如何開發一個ESLint規則和插件

引言：最近在寫一個繁體項目，因爲初期設計沒有國際化的規劃，單純是一個繁體的項目，可是繁體和簡體經常使用語和字仍是有差別的，因此作了一個eslint高頻詞彙校驗器、記錄一下ESLint 使用規則

如何寫一個ESLint rule

自定義Eslint！非向官方Eslint提交官方rule，因此對文件夾沒有要求，若是你想官方提供請看API

// 第一步
touch my-rules.js
// 第二步
module.exports = {
    meta: {
        type: 'suggestion', // 規則說明
        docs: {}, // rule相關說明
        // .eslintrc rules 相關options定義
        // 校驗傳入的options是否符合規則
        schema: [
            {
                type: 'object',
                properties: {
                    xxx: {
                    type: 'boolean'
                }
            },
        additionalProperties: false
            }
        ],
        fixable: 'code' // npm run eslint fix提供自動修復的選項
    },
    // create 必需要返回一個object
    create: (context) {
        // 獲取schema定義數組數據
        // context 能夠拿到比較多的數據 好比 .eslintrc setting 共享數據
        const opt = context.options
        return {
        // 獲取AST 節點 並回調這個節點的信息
            [AST節點(JSXText)](node){
                // .... 對節點作一些校驗
                context.report({
                    node, //獲取的節點
                    message: '{{ s }} 錯了', // eslint 報錯顯示的信息
                    data: {
                        s: '我錯了'
                    },
                    // 若是 meta設置了fixable: 'code' 經過這個函數去自動修復
                    fix(fixer){
                        return fixer.replaceTextRange() // API 好幾個 主要是拿到AST 對節點進行範圍替換 仍是向前(後)追加
                    }
                })
            }
        }
    }
}
複製代碼

如何測試一個ESLint rule

經過上面的代碼 就完成了一個基本ESlint，咱們有兩種方式進行測試

• 第一種 ESLint運行時測試

eslint [須要校驗的文件]  --rulesdir [eslint_rules 存在rules的文件夾]
複製代碼

• 第二種 編寫測試代碼

// 引入RuleTester
const RuleTester = require('eslint').RuleTester
// 引入自定義規則
const rule = require('../lib/a.js')['規則名']
// 導入必要的eslint options 下面是針對react 
const parserOptions = {
  ecmaVersion: 2018,
  sourceType: 'module',
  ecmaFeatures: {
    jsx: true
  }
}
const ruleTester = new RuleTester({ parserOptions })
ruleTester.run('規則名', rule, {
// 正確的測試用例
  valid: [
    { code: "<App foo={'哈哈'} />;", options: [{ a: true }] }
  ],
  // 錯誤的測試用例
  invalid: [
    {
      code: "<App foo={'哈哈'} />;",
      output: "<App foo={'嘿嘿'} />;",
      errors: [
        { message: 'foo ---> 視頻 是包含錯用錯別字 請修改 （づ￣3￣）づ╭❤～' }
      ]
    }
  ]
})
注意：valid、invalid要同時存在 且 錯誤errors是個數組 說明你的錯誤用例有幾個錯誤 你就要把錯誤都寫出來
複製代碼

如何寫一個ESLint Plugins

// 插件文件 必須以eslint-plugin-<xx> 開頭
touch eslint-plugin-simple-text-convert.js
// 直接將咱們的自定義規則導出就行了
// 須要注意 *千萬不要以eslint-plugin-<rules>命名rules文件名* 會找不到rules
module.exports = {
    rules: {
        'simple-text-convert': require('./my-rules')
    }
}
複製代碼

如何使用自定義 ESLint Plugins

// .eslintrc
plugins:['simple-text-convert']
rules: {
    "simple-text-convert/simple-text-convert":"error"
}
複製代碼