详解如何在vue项目中使用eslint+prettier格式化代码

  //由于prettier不能格式化vue文件template 所以使用js-beautify-html格式化
  "vetur.format.defaultFormatter.html": "js-beautify-html", 
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned" //属性强制折行对齐
    }
  },
  "eslint.autoFixOnSave": true, //保存时使用自动格式化
  "eslint.validate": [  //验证文件类型
    "javascript",
    "javascriptreact",
    "vue",
    "html",
    "jsx",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "prettier.singleQuote": true, //使用单引号而不是双引号
  "prettier.jsxBracketSameLine": true, //将>多行JSX元素放在最后一行的末尾，而不是单独放在下一行
  "editor.formatOnSave": true, //保存时自动格式化

extends: [
    'plugin:vue/essential',
    'eslint:recommended'
  ],

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --fix --ext .js,.vue src",
    "build": "node build/build.js"
  },

npm i --save-dev prettier eslint-plugin-prettier eslint-config-prettier prettier-eslint-cli

 extends: [
    'plugin:vue/essential',
    'eslint:recommended',
    'plugin:prettier/recommended'
  ],
  // required to lint *.vue files
  plugins: ['vue', 'prettier'],
  // add your custom rules here
  rules: {
    'prettier/prettier': 'error',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --fix --ext .js,.vue src",
    "build": "node build/build.js",
    "format": "prettier-eslint --write \"src/**/*.js\" \"src/**/*.vue\""
  },

"rules": {
 "no-console": 0,
 "prettier/prettier": [
  "error",
  {
   "singleQuote": true,
   "trailingComma": "none",
   "bracketSpacing": true,
   "jsxBracketSameLine": true
  }
 ]
}