详解如何在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\": [  //验证文件类型
    \" \",
    \" react\",
    \"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\'
  ],

\" s\": {
    \"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\'
  }

\" s\": {
    \"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
  }
 ]
}