V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
xcatliu
V2EX  ›  分享创造

超越 google 成为世界第三, eslint-config-alloy 是如何成功的

  •  
  •   xcatliu ·
    xcatliu · 2019-12-13 19:18:34 +08:00 · 8771 次点击
    这是一个创建于 1567 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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 了,相信金子终会发光的,也欢迎大家提意见、参与贡献。


    说明:

    1: 以 stars 数量排名,其中 airbnb 仓库名是 airbnb/javascript 故搜索结果中没有

    第 1 条附言  ·  2019-12-13 20:57:47 +08:00
    明天是我生日,看到维护两年多的项目越来越受欢迎真的很开心!
    31 条回复    2019-12-17 10:14:00 +08:00
    zhw2590582
        1
    zhw2590582  
       2019-12-13 19:34:48 +08:00 via iPhone   ❤️ 1
    前排大佬合影
    mazyi
        2
    mazyi  
       2019-12-13 19:48:12 +08:00   ❤️ 1
    大佬又去腾讯了?
    xcatliu
        3
    xcatliu  
    OP
       2019-12-13 19:50:16 +08:00
    @mazyi 已经来腾讯两年多啦
    flyfinec
        4
    flyfinec  
       2019-12-13 20:32:36 +08:00   ❤️ 1
    airbnb 的规则太繁琐,需要调整很多配置才能正式干活,挺多规则个人感觉没必要,需要给程序员一定的自由度。
    standard 缺乏个性化,比如配置个带分号的得用另外一个库。
    目前新代码库在用 eslint-config-alloy,基本不用调整配置能开始干活,希望以后别越整越复杂,或者有一个宽容度比较高的模式。
    xrr2016
        5
    xrr2016  
       2019-12-13 20:48:53 +08:00 via Android   ❤️ 1
    回去试试👏
    xcatliu
        6
    xcatliu  
    OP
       2019-12-13 20:56:01 +08:00 via iPhone   ❤️ 1
    @flyfinec 感谢支持!看到有开发者喜欢我们的项目特别欣慰!以后也要加油做的越来越好!
    xcatliu
        7
    xcatliu  
    OP
       2019-12-13 20:56:38 +08:00 via iPhone
    @xrr2016 感谢支持~有什么问题可以问我或提 issue
    flyfinec
        8
    flyfinec  
       2019-12-13 21:03:10 +08:00   ❤️ 1
    :) 加油!
    yhxx
        9
    yhxx  
       2019-12-13 22:10:28 +08:00   ❤️ 1
    在用 alloy 的+1,前几天刚在 alloy 基础上搞了个我们自己的包

    airbnb 和 standard 的用起来都不顺手
    lxml
        10
    lxml  
       2019-12-13 23:14:43 +08:00   ❤️ 1
    今天下午刚入坑的用户表示 https://alloyteam.github.io/eslint-config-alloy/ 这个 网站 amazing 比 eslint 文档看起来直观多了

    不过没折腾明白怎么能配置全局唯一的 eslint 和 prettier 规则,不用每个项目都按照一次。
    xcatliu
        11
    xcatliu  
    OP
       2019-12-14 00:16:12 +08:00 via iPhone
    @yhxx 感谢支持!我们也是觉得 airbnb 和 standard 不顺手才新造的轮子。慢慢的就做的越来越完善了。
    xcatliu
        12
    xcatliu  
    OP
       2019-12-14 00:19:18 +08:00 via iPhone
    @lxml eslint 配置建议跟着代码仓库走,方便多人协作,和接入 ci。
    如果非要全局配置也是可以的,npm 安装 eslint 及相关模块的时候使用 -g 全局安装,然后在根目录下创建 .eslintrc.js 应该就可以了。
    love
        13
    love  
       2019-12-14 08:16:19 +08:00 via Android   ❤️ 1
    感觉有些东西不应该个性化,比如空两格还是空 4 格,大家不都空两格
    g0thic
        14
    g0thic  
       2019-12-14 09:42:38 +08:00   ❤️ 1
    你不说 我还不知道谷歌也出了个这玩意配置
    lxml
        15
    lxml  
       2019-12-14 16:48:23 +08:00   ❤️ 1
    @xcatliu #12 嗯,也是,CI 没法全局,还是跟着官方建议走好了。其实我觉得 js 的 lint 和 格式化要是能有一个二进制工具一站式搞定多好,不用 eslint + prettier 了
    yhxx
        16
    yhxx  
       2019-12-15 14:20:40 +08:00   ❤️ 1
    @love 并不是,比如我就是 4 格的
    love
        17
    love  
       2019-12-15 14:25:51 +08:00   ❤️ 1
    @yhxx 你这是逆大势而行,我刚开始从 py 转 js 时也是 4 空格,后来不得已转 2 空,现在 2 空真香,可读性更好
    xcatliu
        18
    xcatliu  
    OP
       2019-12-15 14:33:45 +08:00
    @g0thic 摔!不小心给竞品也打广告了
    zhw2590582
        19
    zhw2590582  
       2019-12-15 14:43:46 +08:00 via iPhone   ❤️ 1
    看了下,谷歌的有 35k 使用量
    yhxx
        20
    yhxx  
       2019-12-15 15:05:29 +08:00   ❤️ 1
    @love 你需要一个带鱼屏了(逃
    xcatliu
        21
    xcatliu  
    OP
       2019-12-15 18:31:09 +08:00
    @zhw2590582 npm 下载量还很多。。不过之前一直没有做国际化,stars 全是中国人,估计有大部分都是从 cnpm 上下载的
    xcatliu
        22
    xcatliu  
    OP
       2019-12-15 20:03:47 +08:00 via iPhone
    @zhw2590582 npm 下载量差距还很多。。不过之前一直没有做国际化,stars 全是中国人,估计有大部分都是从 cnpm 上下载的
    dcsite
        23
    dcsite  
       2019-12-16 09:42:43 +08:00   ❤️ 1
    标题党有意思吗?
    herexf
        24
    herexf  
       2019-12-16 09:49:26 +08:00 via Android   ❤️ 1
    果然不学习就要落后,这些技术我一个都不知道…
    xcatliu
        25
    xcatliu  
    OP
       2019-12-16 09:54:09 +08:00 via iPhone
    @dcsite 标题符合客观事实,也没有故造悬念,正文内容完全贴合标题所述,为何算标题党?
    imdoge
        26
    imdoge  
       2019-12-16 10:17:38 +08:00   ❤️ 1
    同意 airbnb 太严格,全是报错,受不了了我手动改了十几二十处规则....
    问下我的 Prettier 格式化有时候 eslint 会报格式不对,主要是三元判断的缩进和 eslint 不一致……
    xcatliu
        27
    xcatliu  
    OP
       2019-12-16 10:32:22 +08:00   ❤️ 1
    @imdoge Prettier + ESLint 同时使用的时候,需要加上 prettier 的配置 https://github.com/prettier/eslint-config-prettier ,它可以禁用掉所有与 eslint 冲突的规则
    will0404
        28
    will0404  
       2019-12-16 18:05:48 +08:00   ❤️ 1
    支持。

    不过,airbnb 规范有 91.2k 。

    “世界第二”竟然才 1.8k ,而“世界第三”竟然 1.3k 就够了。
    xcatliu
        29
    xcatliu  
    OP
       2019-12-16 18:14:32 +08:00
    @will0404 airbnb 垄断了绝大部分市场,这种东西迁移成本高,先发优势大。
    standard 算上主仓库的话,还是非常多的,22.9k https://github.com/standard/standard
    ohoh
        30
    ohoh  
       2019-12-17 09:46:29 +08:00   ❤️ 1
    不错,考虑下个项目投入使用
    xcatliu
        31
    xcatliu  
    OP
       2019-12-17 10:14:00 +08:00
    @ohoh 感谢支持~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5383 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 37ms · UTC 08:41 · PVG 16:41 · LAX 01:41 · JFK 04:41
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.