前言

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

配置

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


说明

我们配置的eslint工具包路径是全局安装的,方便在不同项目中使用同一配置;

在最顶部可以看到For current project字样,说明该配置只对当前项目有效;

IDE里是查找.eslintrc文件,这就是为什么我们把生成的.eslintrc.json文件重命名的原因了。

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

.eslintignore文件

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

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

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

最后

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