ESLint属于那种给人第一印象很恼火，习惯了她的陪伴之后就离不开的人。
首先，移除所有配置
为了避免VSCode各自插件配置或者手贱改了配置的不良影响，我先直接移除了所有配置。做法是删除C盘用户里面的.vscode文件夹。
对自己的配置有信心的话，完全可以不用删。为了更直观地展示相关配置带来的影响，我先恢复出厂设置。
重新打开VSCode之后，按推荐安装了中文包和vetur。
然后，安装ESLint
突然，报错警告满天飞
打开一个本来没有使用ESLint的vue项目，然后就会出现各种提示和报错信息，当你尝试启动项目时，还会有很多行的警告。这个修改和配置的过程比较折磨人，所以一般情况下初次使用者都会恼火，反问自己这个ESLint是不是非用不可？？？
好吧，其实也没那么恶心，要不你再坚持一下嘛。。。
最后，配置settings.json
经过反复地查询和cv，以及对代码格式化的强迫症，最终确定了settings.json的简单配置，它能保证在保存的时候进行格式化和eslint的修复。
这样一来，整个世界就安静下来了。
纯净版：(直接复制使用)
{
"editor.formatOnSave": false,
"eslint.codeActionsOnSave.rules": null,
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": false,
"singleQuote": true,
"trailingComma": "none",
"printWidth": 150
},
"js-beautify-html": {
"wrap_line_length": 150,
"wrap_attributes": "auto",
"end_with_newline": false
}
},
"vetur.format.defaultFormatter.html": "js-beautify-html",
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"prettier.semi": false,
"prettier.singleQuote": true,
"prettier.trailingComma": "none"
}
注释版：
{
// 保存时自动格式化
"editor.formatOnSave": false,
"eslint.codeActionsOnSave.rules": null,
"vetur.format.defaultFormatterOptions": {
"prettier": {
// 分号
"semi": false,
// 单引号
"singleQuote": true,
// 尾部逗号
"trailingComma": "none",
// 超过150个字自动换行
"printWidth": 150
},
"js-beautify-html": {
// 超过100个字自动换行
"wrap_line_length": 150,
"wrap_attributes": "auto",
// 结束标签不占新行
"end_with_newline": false
}
},
// 使上述js-beautify-html配置生效
"vetur.format.defaultFormatter.html": "js-beautify-html",
// vue文件默认使用vetur格式化
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
}
}
// 注意以下5个配置，都需要安装prettier插件
// js文件默认使用prettier格式化
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// css文件默认使用prettier格式化
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// 不展示分号
"prettier.semi": false,
// 使用单引号
"prettier.singleQuote": true,
//不展示尾部逗号
"prettier.trailingComma": "none"
}
如果不安装prettier，可以不要相关配置项，但是无法自动移除js文件的分号，无法自动变为单引号,无法移除尾部逗号。为了和vue文件里的script部分规则对应，所以建议安装prettier。
加更
当我满心欢喜地以为找到了最终答案时，意外又来了。我将上述配置移植到工作电脑后，发现js一保存，就把我本来不想要的分号、逗号、双引号都加上了。
点击下方的Prettier，发现了相应的警告，如图：
原来是因为项目里有.editorconfig这个文件，虽然这个文件没有规定单引号、分号、逗号这三个规则，但是它在我看不见的地方有默认的规则，恰巧和我要的效果(不要分号、不要尾部逗号、使用字符串单引号)相反。当项目里有相应的格式文件时，VSCode的插件就以项目内的规则为准了。所以一保存，又给我变回去了。
我的处理方式是移除了.editorconfig这个文件，重打开VSCode之后，又恢复到往日的宁静了，嗯，真好。
当然了，最好的团队规范化处理方式应该是，大家约定好相应的规则，然后统一VSCode的插件配置。
本文只是为了探究VSCode中ESlint插件的使用，重点关注三个规则，从原来的到处警告报错，到恢复一切正常的过程哦。
如果以后遇到其他要求的代码规范规则，我也会再次更新哦~
