在公司實習時遇到了一個問題，我們會用i18n來去做網站的中英文轉換，我們並且會寫一份json來管理我們所有的key，但會遇到一個問題就是說如果一個key在英文有定義，但是在中文沒有定義的話，他不會有自動檢查報錯的功能，導致我們沒有辦法在commit的時候知道key鍵有缺失，思來想去可以用兩個方法來做

1. 用pre-commit執行一個script
2. 把我們想要的規則寫成一個Eslint Rule，這樣在commit時就會去檢查key鍵的缺失
   最後我選定了第二種方法，原因是公司的Project很大，而我們希望去實作的網站算是其中的一部分，如果為了一個小型的檢查在整體的pre-commit.yml上加一條規則我會覺得對專案的維護是不利的，於是便開始搜尋了解如何去實作一個Eslint Rule

因為公司的前端是使用TypeScript，所以我的Plugins也是使用TypeScript，
接下來會教大家如何建立一個基本的TypeScript Eslint Plugins

• 首先建立一個資料夾，並將他初始化為一個npm package

mkdir eslint-plugin-my-rule
cd eslint-plugin-my-rule
npm init

• 記得一定要將Package Name 定義成 eslint-plugin-xxx 格式的

{
    "name": "eslint-plugin-my-rule",
    ...

• 安裝相關套件

npm i -D  @types/eslint @types/node tsup typescript

我們會把檔案分成src跟dist，dist為我們之後typescript轉換之後存放的位置
接著在Package.json中加入如下，main為插件的加載點，files為指定發布套件後要放入的的檔案或是目錄，

{
    "name": "eslint-plugin-my-rule",
    "main": "./dist/index.js",
    "files": [
    "dist/**"
    ],
    ...

• 接著在src資料夾內加入index.ts

module.exports = {
    rules: {
        // our rules will go here
    },
};

• 接著新增一個myRule.ts

import { Rule } from "eslint";

export const myRule: Rule.RuleModule {
    create(context){
        return {};
    }
}

• 接著就可以在index.ts引入我們的Rule

import { myRule } from './myRule';

module.exports = {
    rules: {
      'my-rule': myRule,
    },
};

• 接著在package.json中加入scripts

"scripts": {
    "build": "tsup src/index.ts --no-splitting --minify"
},

• 接下來當我們開發完我們只需要執行

npm run build

就可以在dist生成我們要的程式碼了

接著你只需要在本地安裝他或是用npm publish把他發佈出去，就可以使用了

// 上傳
npm i eslint-plugin-my-rule
// 本地
npm i ./path-to-your-plugin/eslint-plugin-my-rule

• 最後最後，在.eslintrc.js加上Rule

{
    "plugins": ["my-rule"], //package name為eslint-plugin-my-rule這邊只需要寫my-rule
    "rules": {
      "my-rule/my-rule": "warn" // my-rule/index.ts內的rule name
    }
  ...

在寫Rule時很重要的東西是context這個物件，也就是當我們檢查出問題時，我們要如何去顯示錯誤，跟錯誤的行數列數等等
在Eslint的官網有詳細教學，可以去看看
這邊我們只介紹最常用的context.report，格式如下

context.report({
    message: "Error is Found!",
    loc: {
        start: { line: -1, column: -1},
        end: { line: -1, column: -1},
    }
})

message是你會在Eslint檢查上看到的message，start跟end就是你可以指定錯誤發生的行列數

最後如果想看更詳細的，可以參考官網，有非常詳細的教學

參考資料:

1. https://dev.to/bwca/create-a-custom-eslint-rule-with-typescript-4j3d
2. https://www.darraghoriordan.com/2021/11/06/how-to-write-an-eslint-plugin-typescript
3. https://eslint.org/docs/latest/extend/custom-rule-tutorial

關於我:

• https://www.linkedin.com/in/zhi-ping-lin/
• patrick41513@gmail.com