AlloyTeam ESLint 配置指南
In JavaScript on 2017年08月28日 by view: 2,886
8

ESLint 是一个应用广泛的 JavaScript 代码检查工具。本文主要介绍由 AlloyTeam 总结的 ESLint 配置,以及应用 ESLint 配置时的一些经验和工具。

配置原则

我们依据以下三条原则,研读了 ESLint 所有的配置项,定制出了心目中「完美」的 ESLint 配置

  1. 能够帮助发现代码错误的规则,全部开启
  2. 配置不应该依赖于某个具体项目,而应尽可能的合理
  3. 帮助保持团队的代码风格统一,而不是限制开发体验

配置解读

我们对每一条配置,都有详尽的注释,这样不仅方便了我们自己查阅某项配置的意义和如此配置的原因,也使大家更容易配置出自己心目中的规则:

  • 每一条配置都有注释说明此配置的用途
  • 对于理解困难的配置,都在注释中有举例
  • 对于有争议的配置,都在注释中说明了为什么要这么配置的原因
  • 对于关闭掉的配置,都在注释中有对应的原因说明,以及 @off 的标识
  • 对于能够 autofix 的配置,都在注释中有标注 @autofix

详细的配置内容在这里:

下面列出一个代码片段供参考:

使用方法

标准规则

安装

配置 .eslintrc.js

在你的项目根目录下创建 .eslintrc.js,并将以下内容复制到文件中:

React 版

安装

配置 .eslintrc.js

在你的项目根目录下创建 .eslintrc.js,并将以下内容复制到文件中:

Vue 版

安装

配置 .eslintrc.js

在你的项目根目录下创建 .eslintrc.js,并将以下内容复制到文件中:

代码改造经验

如果是一个新项目,应用一个比较严格的 ESLint 规则并不是一件难事。

但是如果是一个已经维护多年的老项目,那么突然引入 ESLint 就会有成千上万个错误。这个时候该如何改造呢?

1. 将所有报错的配置都关闭

运行 ESLint 之后,会有很多错误,这时候我们可以把他们先暂时关闭掉。

由于项目还在不停地迭代,这样可以保证其他不会报错的规则能够应用到新增的文件上。

这时你的 .eslintrc.js 应该类似与下面的样子:

小技巧:如果报错的规则太多了,可以在运行 ESLint 的时候,加上参数 -f json,这样的话会以 json 格式输出,然后稍作处理就可以直接得到所有报错的规则了。

注意:一开始不要开启 --fix,因为修复的太多了,就难以 review 代码了。

2. 针对每个配置,修复所有报错的文件,优先修复能够 autofix 的配置

将 .eslintrc.js 中的 rules 删掉一行,然后重新执行 ESLint 检查。

  • 如果可以 autofix,则加上 --fix 即可
  • 如果不能 autofix,则需要一个文件一个文件的手动修改

建议优先修复能够 autofix 的配置。

在这一步中,我们一次只修复一个 ESLint 配置,这样的好处是 code review 的时候,目的很明确,不会出现问题。

小技巧:如果一个配置不能 autofix,又有很多文件报错,那么可以尝试写一些脚本去处理,利用 ESLint 中的参数 -f json,可以解析到所有报错的文件和报错的行数。

小技巧:如果写脚本也难以处理,那么可以用编辑器的宏功能快速的执行重复的操作,对于 VSCode,可以使用这个工具: https://github.com/geddski/macros

注意:不要陷于某一个配置的泥潭,优先解决容易修复的问题。

3. 针对难以修复的配置,将报错的文件忽略掉对应的规则,将来再慢慢修复

有时一个配置需要理解业务逻辑,读懂上下文,很难去修复。

这个时候,可以在报错的文件头部加上 ESLint 注释,忽略掉对应的规则,将来只要搜索对应的 ESLint 注释就可以一个文件一个文件的修复问题了。

比如 eqeqeq 限制必须使用 === 而不是 ==,代码中使用了 if (result == ‘2’),然而我们并不知道 ajax 返回的数据是 number 还是 string。这时候就可以在对应的文件头部加上:

这样就可以针对这个文件关闭掉 eqeqeq 这个规则了。

相比于将规则在 .eslintrc.js 中关闭,将 ESLint 注释添加到对应文件的头部的好处是:这些规则虽然对老文件不起效,但是新文件都需要遵守这些规则了。

小技巧:如果需要修改的文件太多了,可以使用我们开发的小工具,批量给文件添加 ESLint 注释。

编辑器插件对 ESLint 的支持

所有编辑器对 ESLint 的支持都很好,可以参考这个页面安装你的编辑器插件。

以 VSCode 举例,在插件栏中下载安装 ESLint 之后,编写 js 代码时就会有类似下图的提示了:

注意:如果提示说 ESLint 未安装,则需要在命令行安装项目级别的 ESLint,或全局安装 ESLint:

VSCode 设置中也可以配置一些 ESLint 选项(以及其他相关选项),比如:


快来使用 AlloyTeam ESLint 规则吧!

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2017/08/13065/

  1. fiture 2017 年 9 月 25 日

    去腾讯了?

    • xcatliu 2017 年 9 月 25 日

      嗯是呀

  2. whinc 2017 年 9 月 6 日

    用 javascript standard style 就好了,省去配置的麻烦,而且与社区风格保持一致

  3. 孟陬 2017 年 9 月 5 日

    为什么要重复造轮子,Airbnb 的 eslint 规则不就已经 ok 了吗?而且 eslint 本身支持 extend

    • xcatliu 2017 年 9 月 5 日

      重复造轮子的原因是,airbnb 的规则有一些不适合我们团队,所以想改一下,慢慢的就改的越来越多。而我们又要同时维护多个项目,导致需要维护多份 eslintrc。所以干脆自己重新做个适合我们团队的配置文件了。

  4. 阿伟 2017 年 8 月 30 日

    使用了ESLint后,瞬间感觉代码效率低很多的样子,哪都报错

    • xcatliu 2017 年 9 月 5 日

      可以先将报错的文件都 ignore 掉,这样新增的文件就符合了规则。将来再慢慢改正旧文件

  5. Lewischeng 2017 年 8 月 28 日

    好文,可以考虑集成到Commit hook里面去,代码提交前做校验。

发表评论