ESLint配置（二）：vscode配置eslint，实现错误代码标识以及自动修复

ESLint插件

一、安装 eslint 插件

以 vscode 为例：

二、vscode 扩展设置

依次点击 文件 > 首选项 > 设置 打开 VSCode 配置文件，添加如下配置：

"eslint.options": {
    "extensions": [".js", ".vue"]
},
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue-html",
    {
        "language": "vue",
        "autoFix": true
    },
    {
        "language": "html",
        "autoFix": true
    }
],
"eslint.run": "onSave",
"eslint.autoFixOnSave": true,

如此，每次保存文件的时候就可以根据 .eslintrc.js 配置规则来检查代码和做一些简单的修复

三、检查、标红错误代码

1、如何标识错误

当我们编写的代码不符合 .eslintrc.js 规范的时候，编辑器会用红色（错误）或绿色（警告）的波浪线标识在目标代码上。并且在编辑器右侧会有对应的记号（可点击前往）。如下图（包含两个错误：变量未使用、多余的分号）：

2、我们可以用 eslint 命令检验一下

四、自动修复代码

1、什么时候修复错误代码

保存文件的时候 eslint 插件会自动修复代码，保存一次可能没法修复所有的错误，那就多保存几次。

2、关于自动保存

如果你的编辑器设置了自动保存 "files.autoSave": "afterDelay" ，那么在你修改代码文件自动保存后是不会触发 eslint 自动修复功能的。这个时候仍然需要你手动保存一下（ctrl+s）才会自动修复。

五、vscode忽略文件检查

1、忽略全部文件检查，即禁止eslint：

"eslint.enable": false

2、忽略部分文件检查

注：vscode eslint 插件貌似没有读取 .eslintignore 文件。

• 当然，这并不影响项目的开发进程，只是页面会标红而已；
• 可以用行内配置的方式来解决：/* eslint-disable */
• 如果有解决的方式，请留言！

六、其他编辑器如何使用eslint插件

https://cn.eslint.org/docs/user-guide/integrations

系列文章

ESLint配置（一）：eslint默认及自定义规则介绍，上传自己的eslint-config-*风格文件
ESLint配置（二）：vscode配置eslint，实现错误代码标识以及自动修复
ESLint配置（三）：构建工具（webpack、gulp）配置eslint