问题：
vscode中默认代码格式化ctrl+shift+f后，代码无法通过eslint的代码风格检查。
解决方案：
安装eslint，prettier-Code formatter，vetur这三个插件，大多数情况下vetur已经安装了
然后设置setting.json
具体代码如下：
{ // 保存后自动修复格式 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, //eslint "editor.formatOnType": true, "eslint.options": { //指定eslint配置文件位置 "extensions": [".js", ".vue"], "configFile": ".eslintrc.js" //指定项目根目录中的eslint配置文件 }, // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 2, // #值设置为true时，每次保存的时候自动格式化；值设置为false时，代码格式化请按shift+alt+F "editor.formatOnSave": true, // #每次保存的时候将代码按eslint格式进行修复 "eslint.autoFixOnSave": true, // 添加 vue 支持 "eslint.validate": [ //开启对.vue文件中错误的检查 "javascript", "javascriptreact", { "language": "html", "autoFix": true }, { "language": "vue", "autoFix": true } ], "prettier.semi": false, //去掉代码结尾的分号 "prettier.singleQuote": true, //使用带引号替代双引号 // #让prettier使用eslint的代码格式进行校验 "prettier.eslintIntegration": true, "prettier.tabWidth": 2, // #让函数(名)和后面的括号之间加个空格 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // #这个按用户自身习惯选择 // 选择 vue 文件中 template 的格式化工具 "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.experimental.templateInterpolationService": true, // vetur 的自定义设置 "vetur.format.defaultFormatterOptions": { "js-beautify-html": { // #vue组件中html代码格式化样式 "wrap_attributes": "auto", //也可以设置为“force-aligned”，效果会不一样 "wrap_line_length": 160, "end_with_newline": false, "semi": false, "singleQuote": true }, "prettier": { "semi": false, // 格式化不加分号 "singleQuote": true // 格式化以单引号为主 } }, "vetur.format.defaultFormatter.js": "vscode-typescript", "[jsonc]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "prettier.useTabs": true, "files.autoSave": "off", "explorer.confirmDelete": false, "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "diffEditor.ignoreTrimWhitespace": false, "[vue]": { "editor.defaultFormatter": "octref.vetur" } // 两个选择器中是否换行 }
