自己实现一个ESlint插件

---

一、ESLint是什么？

ESLint 是一个JavaScript 代码检查工具，通过静态分析对代码进行检查。默认使用 Espree 解析器将代码解析为 AST 抽象语法树，然后再对代码进行检查。

ESLint 内置了一些规则，点击详细查看。但在实际项目开发时可能会有一些自定义的需求，你可以通过自定义ESlint插件来实现自定义规则的需求。

二、实现ESlint插件的步骤

1.安装工具

代码如下：

npm i -g yo
npm i -g generator-eslint

2.初始化ESlint插件项目

ESLint 插件命名规则：带前缀 eslint-plugin-

代码如下：

mkdir eslint-plugin-project
cd eslint-plugin-project
yo eslint:plugin
# 命令行交互流程，流程结束后生成 ESLint 插件项目基本框架
? What is your name? // 作者名字
? What is the plugin ID?  // 插件 ID
? Type a short description of this plugin // 插件描述
? Does this plugin contain custom ESLint rules? // 插件是否包含自定义ESLint规则
? Does this plugin contain one or more processors? // 插件是否包含一个或多个处理器

创建好的项目目录结构：

├── README.md
├── docs   // 规则文档
│   └── rules
│       └── xxx.md 
├── lib
│   ├── index.js // 入口文件
│   └── rules  // 存放各个规则文件
│       └── xxx.js // 具体规则代码
├── package.json
├── package-lock.json
├── .eslintrc.js
└── tests   // 单元测试文件
    └── lib
        └── rules
            └── xxx.js

3.初始化ESlint规则

代码如下：

yo eslint:rule
# 命令行交互流程，流程结束后生成 ESLint 规则
? What is your name?
? Where will this rule be published? (Use arrow keys) // 规则将在哪里发布
❯ ESLint Plugin  // ESLint 插件
	ESLint Core  // 官方核心规则 (目前有200多个规则)
? What is the rule ID?   // 规则 ID
? Type a short description of this rule:   // 规则描述
? Type a short example of the code that will fail:   // 输入一个失败例子的代码（跳过就行）

创建好的规则代码：

/**
 * @fileoverview a rule demo
 * @author
 */
"use strict";

//------------------------------------------------------------------------------
// Rule Definition
//------------------------------------------------------------------------------

/**
 * @type {import('eslint').Rule.RuleModule}
 */
module.exports = {
  meta: {
    type: null, // `problem`, `suggestion`, or `layout`
    docs: {
      description: "a rule demo",
      category: "Fill me in",
      recommended: false,
      url: null, // URL to the documentation page for this rule
    },
    fixable: null, // Or `code` or `whitespace`
    schema: [], // Add a schema if the rule has options
  },

  create(context) {
    // variables should be defined here

    //----------------------------------------------------------------------
    // Helpers
    //----------------------------------------------------------------------

    // any helper functions should go here or else delete this section

    //----------------------------------------------------------------------
    // Public
    //----------------------------------------------------------------------

    return {
      // visitor functions for different types of nodes
    };
  },
};

• meta（object）包含规则的元数据
• create（function）返回一个对象，该对象具有 ESLint 在遍历JavaScript 代码的抽象语法树（由ESTree定义的 AST）时调用“访问”节点的方法
  官方API文档说明

三、使用ESlint插件

1.在需要的业务代码中安装你的 ESLint 插件。（插件名是你的 ESLint 插件 npm 包的包名）

npm install eslint-plugin-vue-props -D

如果你的npm包还未发布，需要进行本地调试可以使用 npm link 来进行本地调试。npm link的具体使用

2.在.eslintrc配置文件中的plugins里添加ESlint插件，在rules中将插件的规则导入。

module.exports = {
  plugins: [
  	'vue-props'		// plugin名字
  ],
  rules: {
    'vue-props/define-name': 2	// plugin中对应的规则
  },
}

注：若配置规则后未生效，可尝试重启编辑器

3.配置后就可以在你的项目中使用自定义的ESlint规则了

---

总结

以上就是实现一个自定义ESlint插件的整个流程，实际项目开发场景中，可以将沉淀出的最佳实践和业务规范通过自定义 ESLint 的方式来提示开发者，这对于多人协助、代码维护、代码风格的一致性都会有很大的帮助。