前端框架系列之（eslint自定义插件）

最新推荐文章于 2025-05-18 17:51:43 发布

vv_小虫

最新推荐文章于 2025-05-18 17:51:43 发布

阅读量1.6k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端框架

本文链接：https://blog.csdn.net/vv_bug/article/details/106949203

本文详细介绍了如何创建和使用eslint自定义插件，包括定义环境、处理器和规则。通过实例展示了如何创建一个名为fox的自定义环境，处理.fox文件，以及编写自定义规则plugin2yasin，实现将'hello plugin'替换为'hello yasin'。此外，还讨论了插件中的配置（configs）和修复（fix）功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开始

前面已经写了两篇关于eslint的文章了，想必都对eslint应该有一个简单的认识了，在平常的项目中使用应该是问题不大，面试应该也是问题不大的，大家有兴趣可以看看前面两篇文章：

接下来我们更深入的了解一下eslint，我们直接结合demo创建一个我们自己的plugin。

我们还是用前面我们的eslint-demo项目，代码已经上传github了大家可以直接clone一份,我们在eslint-demo项目根目录直接创建一个plugins目录，然后创建一个.eslintrc.json文件，

.eslintrc.json：

{
   
  "root": true
}

为了不跟根目录的配置文件冲突，我们直接加上了“root”：true的标识。

env

env前面文章有介绍过，我就不在这里介绍了，比如我们有一个叫“fox”的运行环境，然后有一个“fox”的全局变量，还记得我们之前demo的做法吗？我们直接在config的globals变量中定义了一个叫fox的变量，这样我们的eslint就能识别fox变量了，

{
   
  ...
   "globals": {
   
    "fox": "readonly"
  },
  ...
}

这一次我们通过自定义env把它当成一个fox环境，让它变成下面这样的效果：

{
   
  "env":{
   
    "@fox/fox":true
  }
}

首先我们在plugins目录创建一个fox-plugin目录，然后在fox-plugin目录执行npm init：

cd ./plugins/fox-plugin && npm init

让fox-plugin的入口指向index.js，

package.json：

{
   
  "name": "@fox/eslint-plugin",
  "version": "1.0.0",
  "description": "自定义eslint插件",
  "main": "index.js",
  "scripts": {
   
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

可以看到，我们创建了一个带@fox命名空间的插件，然后我们在fox-plugin目录创建一个入口文件index.js，

index.js:

module.exports = {
   
    environments: {
   
        fox: require("./env/fox")
    }
};

可以看到，我们直接导出了一个对象，然后里面包含environments字段，environments对象中又包含一个fox属性，fox属性就是我们的自定义fox运行环境，我们在目录底下创建一个env目录，然后在env目录创建一个fox.js文件，

plugins/fox-plugin/env/fox.js：

const eslintEnv = require("eslint/conf/environments"); //获取eslint的所有环境变量
module.exports = {
   
    globals: {
   
        ...eslintEnv.get("es2020").globals, //合并eslint的es2020变量
        ...eslintEnv.get("browser").globals, //合并eslint的browser变量
        ...{
    //合并自定义的环境变量
            fox: false,
        }
    },
    parserOptions: {
   
        ecmaVersion: 11 //设置语法为es2020
    }
};

可以看到，我们在上面代码中合并了eslint中的原始es2020跟browser环境变量，然后还自定义了一个全局fox变量，并且设置es的语法版本为11，也就是说我们的fox环境=（es2020+browser+自定义fox）。

ok，我们已经定义完plugin了，然后也定义好了我们的env，那么项目中该怎么使用呢？

首先我们直接在我们根目录执行npm install把我们的插件引入进来：

npm install -D xxx/eslint-demo/plugins/fox-plugin //注意xxx是你本地的绝对路径

执行完毕后我们会在根目录的node-modules目录下面找到我们的插件：

在这里插入图片描述

然后在配置文件中引入我们的插件和环境

plugins/.eslintrc.json：

{
   
  "root": true,
  "env": {
   
    "@fox/fox": true
  },
  "plugins": [
    "@fox"
  ],
  "extends": [
    "eslint:recommended"
  ]
}

同时为了看效果，我们加入了eslint的recommended规则。

接下来我们创建一个测试文件来测试一下，我们在plugins的src目录中创建一个demo1.js文件，

demo1.js：

document.write("hello plugin");
fox.say("hello world");

然后我们在根目录执行一下eslint命令：

➜  eslint-demo git:(v0.0.1) ✗ npx eslint ./plugins/src/*                                                      
➜  eslint-demo git:(v0.0.1) ✗

可以看到，没有任何报错，那我们把我们的fox环境去掉试试，

plugins/.eslintrc.json：

{
   
  "root": true,
  "env": {
   
  },
  "plugins": [
    "@fox"
  ],
  "extends": [
    "eslint:recommended"
  ]
}

再次运行：

xxx/Study/eslint-demo/plugins/src

最低0.47元/天解锁文章