背景
在VSCode(Visual Studio Code)中,用Prettier或Beautify格式化后的JS代码,会被ESLint检查报错。
即使禁用了ESLint,在编译运行时(npm run dev)也会报错。其实不是语法错误,只是没有符合ESLint预设的规则。
解决方法
1.安装Vetur、ESlint、Prettier等插件。
2.File -> Preferences -> Setting,点击右上角的Open Settings (JSON)按钮,用文本模式编辑设置选项。
3.在花括号内的末尾加入以下代码:
// vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 2, // 每次保存的时候自动格式化 "editor.formatOnSave": true, // 每次保存的时候将代码按eslint格式进行修复 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, // 在函数名和后面的括号之间加个空格 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 每次保存的时候将代码按eslint格式进行修复,新版用editor.codeActionsOnSave "eslint.autoFixOnSave": true, // 添加vue支持 "eslint.validate": [ "html", "javascript", "javascriptreact", "language": "vue" ], // 让prettier使用eslint的代码格式进行校验(新版缺少该属性) "prettier.eslintIntegration": true, // 使用单引号替代双引号 "prettier.singleQuote": true, // 去掉代码结尾的分号 "prettier.semi": false, // 按用户习惯填写(这里举例用js-beautify-html) "vetur.format.defaultFormatter.html": "js-beautify-html", // 让vue中的js按编辑器自带的ts格式进行格式化 "vetur.format.defaultFormatter.js": "vscode-typescript", "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "force-aligned" } }, // [选填]用于格式化stylus的选项, 需要先安装Manta's Stylus Supremacy插件 /* "stylusSupremacy.insertColons": false, //是否插入冒号 "stylusSupremacy.insertSemicolons": false, //是否插入分号 "stylusSupremacy.insertBraces": false, //是否插入大括号 "stylusSupremacy.insertNewLineAroundImports": false, //import之后是否换行 "stylusSupremacy.insertNewLineAroundBlocks": false //两个选择器中是否换行 */
* 注意1:由于是在末尾追加选项,所以需要在原有的最后一个选项后面加上逗号“,”,否则会报错。
* 注意2:有可能会有选项与原有选项重复了,需要删减重复选项,否则会报警告。
简便方法
直接安装Prettier ESLint插件。