ESLint Plugin 入門 : O3noBLOG

04月 21日

ESLint Plugin 入門

最近寫了個簡單的 ESLint plugin，來記錄一下一些基礎知識，我做的 plugin 很簡單，叫做 eslint-plugin-no-parameter-e，這個 ESLint plugins 做的事情只是檢查所有 function 的參數，然後如果有任何一個參數名是e的話就警報，這條 rule 其實是為了避免把error或event簡寫成e，會容易混淆。

接下來進入正題，ESLint 基本上就是透過 ESPree 這個 parser 先把程式碼轉為 ESTree 相容的 AST，EStree 是個 de facto standard，是從 Mozilla Spider Monkey 用的 AST 演化而來，現在幾乎做 JavaScript 工具，會需要轉 AST 的話都會用這個格式；有了 AST 後，才來分析 AST 做檢查，然後現在有工具叫 AST Explorer，非常方便，可以線上直接修改 code sample 看 AST 變化，可以用它來看你想要處理的 code 的 AST 結構，至於怎麼寫 rule 就看個人了，基本上就是監聽要注意的 node，然後檢查 AST 結構，有問題就呼叫 report 這樣。

第二點，npm module 的名稱要用eslint-plugin-開頭，官方說的規則，應該不遵守還是可以抓的到，不過就還是遵守一下免的有意外。

第三點，測試其實 ESLint 有 RuleTester 可以拿來寫測試用：

const rule = require('../rule.js')
const RuleTester = require('eslint').RuleTester

const ruleTester = new RuleTester();

ruleTester.run('no-parameter-e', rule, {
  valid: [
    'function a (event) {}',
  ],
  invalid: [
    {
      code: 'function e (e) {}',
      errors: [{ message }],
    }
  ],
});

很方便，都不用 test framework 了，並且有特別要求 valid 和 invalid 都要有 test case，不然測試就會失敗。

然後測試的時候是每個 rule 獨立跑，每個 plugin 可以有多個 rule，很多 plugin 是把不同 rule 都獨立一個檔案，每個 rule 可以丟的東西除了檢查外還有不少，像是說明文件、自動修復的動作等，詳見官方文件，我一開始是參考 eslint-plugin-import 的，不過現在初心者應該也可以先看我的 eslint-plugin-no-parameter-e，東西更少一些。

下一個想來挑戰處理空行，看了一下感覺是比較困難啊～

單篇彙整