自定义校验
module.exports = {
root: true,
env: {
node: true
},
extends: [
'plugin:vue/essential',
'@vue/standard'
],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-multiple-empty-lines': 'off'
}
}
修改了配置文件,一定要重启项目
ESLint-在vscode中使用
有三种方法来修正错误:
- 手动修正: 人肉修改
- 命令修正:npm run lint
- 插件修正: 配合vscode 中的eslint插件
安装eslint插件:
 用vscode打开项目时,将脚手架工程作为vscode根目录, 因为eslint要使用配置文件.eslintrc
按如下五个步骤:
 补充内容:
{
"eslint.enable": true,
"eslint.run": "onType",
"eslint.options": {
"extensions": [
".js",
".vue",
".jsx",
".tsx"
]
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
eslint.run - 运行eslint检验的时刻 (onSave保存) (onType输入时)
editor.codeActionsOnSave - 控制在保存时运行代码操作时修复哪些问题
source.fixAll.eslint - 自所有插件的所有可自动修复的ESLint错误都将在保存时修复
更多的规则可以看这里
可能遇到的问题
ctrl+s保存不自动格式化
打开一个代码文件, 右下角有个ESLint, 如果是图示这样, 点击一下然后弹出来的对话框选择AnyWhere 在任意处生效(启动vscode中的eslint)
变成v就代表启动着呢 
自动缩进1
试着把Beautify插件卸载 - eslint也能美化代码  可能还有JS/CSS Format插件/其他美化插件 不想卸载可以禁用
如果vscode中用其它扩展 启用 自动格式化功能,则有可能与eslint的规则冲突!  解决方案:关闭vscode中的自动格式化
自动缩进2
如果上面不行, 就修改vscode的配置
文件>设置里, 搜索这个, 把下面的勾去掉

一保存, 单引变双引
原因:vetur插件和eslint冲突, 修改eslint插件配置, 把这里代码覆盖进去
{
"eslint.run": "onType",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"vetur.validation.template": false,
"editor.formatOnSave": false,
"eslint.enable": true,
"eslint.autoFixOnSave": true,
"eslint.options": {
"extensions": [
".js",
".vue"
]
},
"eslint.validate": [
"javascript",
{
"language": "vue",
"autoFix": true,
},
"html",
"vue"
],
}
|