场景
开发工具vscode，希望编辑器可以支持eslint的报错展示，及自动修复。
eslint安装
1、eslint vscode plugin安装
在vscode里自行搜索添加“eslint”插件。
2、在项目根目录下添加.eslintrc文件，可自行添加一些rules。
{
"rules": {
"no-undef": 2,
"no-unused-vars": 2,
"no-multi-spaces": 2,
"object-curly-spacing": 2,
"no-console": 1
}
}
3、打开vscode的设置配置里关于eslint的配置，我是添加在folder下。可以在设置里选择在folder下添加，打开到这个setting.json，添加如下配置：
image.png
{
"eslint.enable": true,
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
]
}
也可以直接在根目录下添加.vscode文件夹，然后在.vscode文件夹下新建setting.json文件，添加配置。内容同上。
三步设置完毕，记得重启一下vscode！
排查小技巧
如果设置不成功，可以先查看一下是eslint检查有问题？
还是lint检查功能ok，但是vscode的插件没有把检查结果展示到编辑器里。
1、检查eslint有没有成功检测到lint错误
npx eslint ${file_url}
如果能拿到lint错误，证明lint是生效的。是vscode插件的问题。
2、查看vscode的eslint插件有没有被启动。可以打开vscode的终端，views -> terminal ，切换到output下，查看tasks里有没有eslint，没有的话是不是有启动的报错。
image.png
3、如果tasks里有启动，那就是setting.json里的设置有问题了。没有打开eslint，或者你要检测的语言没有在检测语言之列，要重新设置，我这里只设置了.vue, .js：
"eslint.enable": true,
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
]
添加.ts文件的检测可以添加：
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "typescript",
"autoFix": true
},
{
"language": "typescriptreact",
"autoFix": true
}
]
