建立ESLint外掛
建立ESLint外掛
現在已經有很多實用的ESLint外掛了。在Tumblbug，我們是 ofollow,noindex" target="_blank">eslint-config-airbnb 和 eslint-plugin-react 的粉絲。然而，隨著專案規模的擴大，你會感受到新增自定義規則來確保開發人員遵循好的實踐的必要性。在這篇部落格中，我將會講述如何一步一步地建立一個ESLint外掛，並且在這個外掛裡面寫一個規則。
設定
首先，安裝 Yeoman 和方便的 generator-eslint ，它提供了建立外掛所需要的所有模版程式碼。
npm install -g yonpm install -g generator-eslint
接下來，為外掛新建一個目錄並且初始化這個目錄：
mkdir eslint-plugin-tutorialcd eslint-plugin-tutorial
yo eslint:plugin
? What is your name? ...? What is the plugin ID? tutorial? Type a short description of this plugin: ...? Does this plugin contain custom ESLint rules? Yes? Does this plugin contain one or more processors? No
npm install
建立規則
現在，到了建立規則的時候了！我們將建立一個禁止下面程式碼的規則：
var _ = require('your favorite fp library');
因為這會給當前模組引入太多的程式碼，使得難以執行 tree-shaking 。
讓我們開始編寫規則吧！ generator-eslint 外掛也有生成規則模版的命令。
yo eslint:rule
? What is your name? ...? Where will this rule be published? ESLint Plugin? What is the rule ID? no-full-fp-lib? Type a short description of this rule: ...? Type a short example of the code that will fail: var _ = require('your favorite fp library');
在正式開始規則的編寫之前，我們需要了解一下JavaScript是如何被解析的。ESLint使用了一個叫做 Espree 的JavaScript解析器來把JavaScript程式碼解析為一個抽象語法樹(AST) 。規則可以“監聽”語法樹中特定型別的結點，當發現一個匹配的結點的時候，規則就會被觸發去檢驗是否需要採取某些行為。幸運地是，有一個非常方便的把JavaScript程式碼轉化為抽象語法樹的線上網站，叫做 astexplorer 。因為我們將會使用ESLint預設的Espree解析器去解析程式碼，所以最好把網站預設的‘Acorn’解析器改為‘Espree’。
下面的抽象語法樹是由我們想要禁用的程式碼生成的：
抽象語法樹提供了建立規則所需要的全部資訊。首先，可以看到我們感興趣的結點型別是 VariableDeclaration ，它包含了一系列的 VariableDeclarator 。可以通過檢視每一個 VariableDeclarator ，然後檢查_id_屬性的 name 屬性是否為___並且 init 屬性的 callee 是否為 require 來實現這個規則。檢視 ESLint文件 獲取編寫規則更深入的解釋。
把上面的規則邏輯轉化為程式碼，我們得到：
測試
可以很容易地通過安裝 Mocha 並且在package.json檔案裡面編寫測試指令碼來測試我們的規則：
“scripts”: { “test”: “mocha ./tests/**/*.js” },
我們已經有了一些通過generator-eslint生成的程式碼，所以我們要做的就是填充錯誤資訊，型別以及新增一些測試用例！
使用下面的程式碼執行mocha測試：
npm run test
可以看到所有的測試用例都通過了！
ES6+
寫一個ES6的校驗規則要更困難些，因為需要額外的配置使得程式碼能正常執行。我們仍然可以使用上面的AST explorer網站生成一個抽象語法樹，但是需要確保在parser選項裡面使用了恰當的ECMAScript版本。
使用ES6的語法寫與上面的等價程式碼，我們現在需要禁止下面的匯入語句：
import _ from 'my favorite fp lib';
我們使用和上面同樣的邏輯寫這個ES6版本的規則，程式碼如下：
為了測試這個規則，我們需要給ESLint提供一些額外的配置使它知道如何去執行這個規則。首先，因為我們使用的是ES6的語法，所以需要把 ecmaVersion 設定成6，並且因為我們的規則使用了import語法，所以還需要設定一個標誌去支援這個語法。關於更多可以使用的不同特性的列表可以在 ESLint文件 中找到。
測試程式碼如下：
執行 npm run test ，可以看到規則正確運行了！
打包
既然我們的規則已經寫完並且通過了測試，剩下的就是打包了。
因為ESLint預設不會開啟任何規則，我們可能會想要匯出一個配置來啟用我們的規則：
推薦的配置項可以通過 擴充套件來配置我們其它的專案 。
剩下的就是可選的把外掛包釋出到npm上，並且在我們其它的專案裡面安裝和使用！
檢視 Github上的專案倉庫 。
快樂校驗！
更新：非常感謝Ilya Volodin分享了很多有用的資源！這篇文章現在比原先要簡潔的多！