vscode Eslint+Prettier自动格式化代码

安装插件列表

1. ESLint
2. Prettier - Code formatter
3. Prettier ESLint
4. Vetur

配置项 settings.json 

{
   // vscode默认启用了根据文件类型自动设置tabsize的选项
   "editor.detectIndentation": false,
   // 重新设定tabsize
   "editor.tabSize": 2,
   // #值设置为true时，每次保存的时候自动格式化；值设置为false时，代码格式化请按shift+alt+F
   "editor.formatOnSave": true,
   // #每次保存的时候将代码按eslint格式进行修复
   "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
   },
   // 添加 vue 支持
   "eslint.validate": ["javascript", "javascriptreact", "vue"],
   //  #让prettier使用eslint的代码格式进行校验
   "prettier.eslintIntegration": true,
   //  #去掉代码结尾的分号
   "prettier.semi": false,
   //  #使用带引号替代双引号
   "prettier.singleQuote": true,
   "prettier.tabWidth": 4,
   //  #让函数(名)和后面的括号之间加个空格
   "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
   // #让vue中的js按"prettier"格式进行格式化
   "vetur.format.defaultFormatter.js": "prettier-eslint",
   "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
         // #vue组件中html代码格式化样式
         "wrap_attributes": "auto", //也可以设置为“auto”，效果会不一样
         "wrap_line_length": 200,
         "end_with_newline": false,
         "semi": false,
         "singleQuote": true
      },
      "prettier": {
         "semi": false,
         "singleQuote": true
      }
   },
   "[jsonc]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "files.autoSave": "off",
   "explorer.confirmDelete": false,
   "[javascript]": {
      "editor.defaultFormatter": "vscode.typescript-language-features"
   },
   "[json]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "diffEditor.ignoreTrimWhitespace": false,
   "[vue]": {
      "editor.defaultFormatter": "octref.vetur"
   },
   "vetur.format.defaultFormatter.html": "js-beautify-html",
   "[scss]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
   } // 两个选择器中是否换行
}