如何在WebStorm中配置ESLint

前言

在上一篇《使用ESLint构建团队代码规则》中，我介绍了如何构建eslint，并成功的在终端执行命令检测了js代码。但我们更多的是希望在开发时能自动检测，而不是手动检测，从而让bug更早被发现。这时候强大的WebStorm为我们提供了方便。

配置

以mac系统为例，在webstorm中打开Preferences依次选择Languages & Frameworks > Javascript > Code Quality Tools > ESLint，如下图所示，勾上Enable选项，再配置一下eslint指令的路径和配置文件路径即可，保存应用。

说明

1. 我们配置的eslint工具包路径是全局安装的，方便在不同项目中使用同一配置；
2. 在最顶部可以看到For current project字样，说明该配置只对当前项目有效；
3. IDE里是查找.eslintrc文件，这就是为什么我们把生成的.eslintrc.json文件重命名的原因了。

现在我们就可以在编码中，由IDE自动提醒我们代码哪里有不规范的问题了，是不是高级了一点。

.eslintignore文件

如果你有 Git 的使用经验，那.eslintignore文件的功能也就很容易理解了。类似于.gitignore，用于排除文件与目录，比如npm的node_modules目录等，以及一些第三方插件。对于这些目录与文件，不执行代码质量检查。

如果.eslintrc文件所在目录不是根目录，而是子目录，这时候为了不检查子目录外的文件，可以在根目录在创建一个.eslintignore文件，忽略所有文件。

eslint检查到一个文件时，会在其所在目录下查找.eslintignore文件，如果没有则继续向上查找至根目录；如果有该文件则停止向上查找，且应用里面的配置，忽略相应文件；.eslintignore的配置不会合并，只会单独作用。

最后

以上介绍了个人开发时如何借助IDE快速检测代码。那团队开发中呢，如果有些人遇到IDE提示代码不规范却就是不去修改就提交代码呢？请看《利用 git 钩子做代码提交前的检查》。