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

eslint-config-alloy 是騰訊 AlloyTeam 創立的一套 ESLint 規則，自 2017 年 8 月發佈第一個版本以來，不知不覺中已經收穫到 1.2k stars，超過了 eslint-config-google，成爲了世界上排名第三的 ESLint 規範¹（僅次於 airbnb 和 standard）。

兩年多以來，咱們不多推廣，主要靠你們口口相傳，天然增加。可以超過 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.js 和 good.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 故搜索結果中沒有