1. VSCode 集成 ESLint 插件

VSCode 中集成 ESLint 插件的首要条件，就是你得先安装了 VSCode。

安装好 VSCode 之后，就可以按照下面的步骤来安装并配置了。

1.1 插件安装

首先打开 VSCode，切换到 Extensions Tab。

然后你就会看到默认状态是这样的：

在顶部的输入框内输入 ESLint 进行搜索，你会看到很多很多结果：

我们安装 ESLint 这个，安装完成后，之前的 install 按钮会变成一个小齿轮，点击这个小齿轮，选择 Extension Settings 就可以进入 ESLint 插件的设置界面了。

在设置界面，点击右上角第一个按钮，进入到 JSON 格式的设置页面。

1.2 插件设置

在 JSON 中增加下面这几条配置：

{

...

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true // 开启这个选项，VSCode 会在你保存代码的时候自动格式化你的代码
  },
  "eslint.format.enable": true, // 启用 ESLint
  "eslint.options": {
    "extensions": [".js", ".vue", ".jsx", ".ts", ".tsx", ".md"], // ESLint 检查的文件扩展名
    /*
     * ESLint 配置的位置，最重要的就是这个配置项。
     * 如果配置是写在单独的配置文件里，这个地方就写对应的文件名，如 ".eslintrc.js"
     */
    "overrideConfigFile": "package.json"
  },
  "eslint.validate": ["javascript", "javascriptreact", "vue", "typescript", "typescriptreact"],

...

}

建议每个项目都单独定义这个配置，即把这些配置写在项目的 .vscode/settings.json 文件里

上面这些配置完成后，重启 VSCode。重启之后，按照下图的操作步骤，就能看到 ESLint 插件的执行情况了。

如果这里有看到报错，解决这些报错就可以了，解决之后，记得重启 VSCode。没有报错的时候，ESLint 插件的输出面板应该是如下图：

通常来说，这里报错主要是因为一些依赖没安装，正确安装和配置好对应的依赖即可

1.3 Formatter 选择

当 ESLint 插件正确运行之后，选择项目里的任意一个 js/jsx/ts/tsx/vue 文件打开，在这个文件的任意地方点击鼠标右键，然后选择 Format Document With... 这个选项。

然后就会出现 formatter 的选择界面。

你可以直接选择 ESLint 来用 ESLint 格式化当前的文件，也可以选择 Configure Default Formatter... 选项，在里面选择 ESLint，将 ESLint 设置为默认的 formatter 之后，你就可以随心使用 Shift+Alt+F 这个快捷键来使用 ESLint 格式化你的代码了。

如果 formatter 选择界面没有出现 ESLint 或者出现了多个 ESLint，那就重启一下 VSCode。
如果重启之后还是没有 ESLint 这个选项，那就是之前某个步骤没有配置正确，或者 ESLint 插件有报错，解决掉对应的错误就可以了。

2. Webstorm 集成 ESLint 插件

如果你使用的是 VSCode，请忽略掉下文。

Webstorm 中集成 ESLint 插件的首要条件，就是你得先安装了 Webstorm。

安装好 Webstorm 之后，就可以按照下面的步骤来配置了。

首先用 Webstorm 打开一个项目，然后打开左上角 Files -> Settings，在搜索栏里搜索 eslint，操作如下：

如果代码里有不规范的地方，Webstorm 右上角就会出现提示，点击这个提示，就会在输出面板上显示对应的问题，例如：

这里我们可以看到右侧滚动条处有一段一段的黄色区域，鼠标放上去之后就会给出快速修复的提示，快捷键是 Alt+Shift+Enter。

3. 总结

在 Webstorm 里配置 ESLint 非常简单，比在 VSCode 里配置要简单非常多，因为 Webstorm 本身内置了这个插件。

从我的使用结果来看，我觉得 VSCode ESLint 插件比 Webstorm 内置的 ESLint 要，因为相同的配置下， VSCode ESLint 插件的提示更准确。

比如同样的代码，在 Webstorm 里是这样的：

在 VSCode 里是这样的：

虽然在 ESLint 的表现上两个 IDE 不一样，但具体使用哪一个 IDE，还是需要根据自己的习惯来。只要能保证 ESLint 的配置是一致的，规范化工具都统一了，最终提交到代码库里的代码还是会统一的。

附：IDE 集成 ESLint 插件