VSCode中按ESLint规则格式化Javascript代码

背景

在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插件。