如何开发一个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"
}