精华 超越 google 成为世界第三,eslint-config-alloy 是如何成功的
发布于 5 年前 作者 xcatliu 12091 次浏览 来自 分享

eslint-config-alloy 是腾讯 AlloyTeam 创立的一套 ESLint 规则,自 2017 年 8 月发布第一个版本以来,不知不觉中已经收获到 1.2k stars,超过了 eslint-config-google,成为了世界上排名第三的 ESLint 规范<sup>1</sup>(仅次于 airbnbstandard)。

两年多以来,我们很少推广,主要靠大家口口相传,自然增长。能够超过 google 的规范,说明它确实受到了开发者的欢迎。那么 eslint-config-alloy 到底有什么过人之处呢?

设计理念

随着前端社区的进化,eslint-config-alloy 的设计理念也有更迭,如今它的设计理念已经很先进了:

  1. 样式相关的规则交给 Prettier 管理
  2. 传承 ESLint 的理念,帮助大家建立自己的规则
  3. 高度的自动化:先进的规则管理,测试即文档即网站
  4. 与时俱进,第一时间跟进最新的规则

1. 样式相关的规则交给 Prettier 管理

Prettier 是一个代码格式化工具,相比于 ESLint 中的代码格式规则,它提供了更少的选项,但是却更加专业。

如今 Prettier 已经成为前端项目中的必备工具,eslint-config-alloy 也没有必要再去维护 ESLint 中的代码格式相关的规则了,所以我们在 v3 版本中彻底去掉了所有 Prettier 相关的规则,ESLint 用来检查它更擅长的逻辑错误了。

至于缩进要两个空格还是四个空格,末尾要不要分号,可以在项目的 prettier.config.js 中去配置,当然我们也提供了一份推荐的 Prettier 配置供大家参考。

2. 传承 ESLint 的理念,帮助大家建立自己的规则

大家还记得 ESLint 是怎么打败 JSHint 成为最受欢迎的 js 代码检查工具吗?就是因为 ESLint 推崇的插件化、配置化,满足了不同团队不同技术栈的个性的需求。

所以 eslint-config-alloy 也传承了 ESLint 的设计理念,不会强调必须要使用我们这套规则,而是通过文档、示例、测试、网站等方便大家参考 alloy 的规则,在此基础上做出自己的个性化。

由于 React/Vue/TypeScript 插件的文档没有中文化(或中文的版本很滞后),所以 alloy 的文档很大程度上帮助了国内开发者理解和配置个性化的规则。

实际上国内有很多团队或个人公开的 ESLint 配置,都参考了 alloy 的文档。

3. 高度的自动化:先进的规则管理,测试即文档即网站

无情的推动自动化

eslint-config-alloy 通过高度的自动化,将一切能自动化管理的过程都交给脚本处理,其中包括了:

  • 通过 greenkeeper 和 travis-ci,自动检查 ESLint 及相关插件是否有新版本,新版本中是否有新规则需要我们添加
  • 自动检查我们的规则是否包含了 prettier 的规则
  • 自动检查我们的规则是否包含了已废弃(deprecated)的规则

除此之外,通过自动化的脚本,我们甚至可以将成百上千个 ESLint 配置文件分而治之,每个规则在一个单独的目录下管理:

  • 通过脚本将单个的配置整合成最终的一个配置
  • 通过脚本将单个配置中的 description 和 reason 构建成文档网站,方便大家查看
  • 通过脚本将单个配置中的 bad.jsgood.js 输出到网站中,甚至可以直接在网站中看到 bad.js 的(真实运行 ESLint 脚本后的)报错信息

这样的好处是非常明显的,测试即文档即网站,我们可以只在一个地方维护规则和测试,其他工作都交给自动化脚本,极大的降低了维护的成本。简单来说,当我们有个新规则需要添加时,只需要写三个文件 test/index/another-rule/.eslintrc.js, test/index/another-rule/bad.js, test/index/another-rule/good.js 即可。

4. 与时俱进,第一时间跟进最新的规则

ESLint 的更新很快,几乎每周都有一个新版本,有时有新规则,有时会废弃已有规则,而且相关插件(React/Vue/TypeScript)也会时而更新,没有自动化工具的话,实在是难以跟进。

eslint-config-alloy 通过上述的自动化工具,可以在第一时间就收到 greenkeeper 提的 issue,告诉我们哪个插件更新了,其中的 travis-ci 构建日志会告诉我们哪些规则需要添加:

这样就实现了,在前端社区快速更迭的时候能够及时跟进最新的规则,永远保持 eslint-config-alloy 的活力和先进。

如何使用 eslint-config-alloy

请直接参考 GitHub网站,这里不再赘述。

Q & A

为什么要重复造轮子

其实我们团队最开始使用 airbnb 规则,但是由于它过于严格,部分规则还是需要个性化,导致后来越改越多,最后决定重新维护一套。经过两年多的打磨,现在 eslint-config-alloy 已经非常成熟与先进,也受到了公司内外很多团队的欢迎。

为什么不用 standard

standard 规范认为大家不应该浪费时间在个性化的规范了,而应该整个社区统一一份规范。这种说法有一定道理,但是它是与 ESLint 的设计理念背道而驰的。大家还记得 ESLint 是怎么打败 JSHint 成为最受欢迎的 js 代码检查工具吗?就是因为 ESLint 推崇的插件化、配置化,满足了不同团队不同技术栈的个性的需求。

所以 eslint-config-alloy 也传承了 ESLint 的设计理念,不会强调必须要使用我们这套规则,而是通过文档、示例、测试、网站等方便大家参考 alloy 的规则,在此基础上做出自己的个性化。

由于 React/Vue/TypeScript 插件的文档没有中文化(或中文的版本很滞后),所以 alloy 的文档很大程度上帮助了国内开发者理解和配置个性化的规则。

实际上国内有很多团队或个人公开的 ESLint 配置,都参考了 alloy 的文档。

相比于 airbnb 规则有什么优势

  1. eslint-config-alloy 拥有官方维护的 vue、typescript、react+typescript 规则,相比之下 airbnb 的 vue 和 typescript 都是第三方维护的
  2. 先进性,保证能够与时俱进,前面已经重点提到了
  3. 方便个性化定制,包含中文讲解和网站示例

你这个确实很好,我还是会选择 airbnb

没关系,eslint-config-alloy 从设计理念上就相信不同团队不同项目可以有不同的配置,虽然你选择使用 airbnb,但是当你有个性化配置需求的时候,还是可以来我们网站上参考一下哦~

有什么后续规划吗

最近刚开始做国际化,已经开始有外国友人 star 了,相信金子终会发光的,也欢迎大家提意见、参与贡献。


说明:

<span id=“1”></span>1: 以 stars 数量排名,其中 airbnb 仓库名是 airbnb/javascript 故搜索结果中没有

13 回复

接触很多语言,还是js的语法检测工具最强

不知道 Prettier 那个nc的 if/else 换行风格可定制了没?

哎?去腾讯了?

原来对比的是 star 数啊,我还以为 npm 下载量呢。不过,依然可喜可贺

@gxmari007 嗯,来两年了

@justjavac npm 下载量还差一大截。。不过之前一直没有做国际化,stars 全是中国人,估计有大部分都是从 cnpm 上下载的

支持啊。最好再研究一下repo的语言分类,争取分类也能分到英语里面。

@steambap 如何看是否被分到了英语呢?

@xcatliu 不知道怎么看呀。现在唯一已知的是 GitHub 现在好像不扫描副标题,只扫描 readme 来决定语言。比如今天就有人混进英语里面了: https://github.com/A3M4/YouTube-Report

回到顶部