创建一个可共享的 ESLint 插件 #

继续上一讲，这一讲我们来实现一个自己的 ESLint 插件，并在其他项目中运用它

目标 #

• 安装npm i -g yo
• 安装npm i -g generator-eslint
• 运行yo eslint:plugin
• 编写自定义规则
• 在其他项目安装当前插件，并配置自定义规则

Coding #

• 想要快速创建 eslint-plugin 项目我们得使用它的脚手架
• 因此我们需要安装文档安装脚手架所需的依赖
• 文档在这里 👉 https://www.npmjs.com/package/generator-eslint

• 安装好依赖后创建一个文件夹，目录名就叫自己的插件名字就好，这里我是用的是 monorepo 管理，所以直接在 packages 创建eslint-plugin-sudongyeur这个文件夹

• 然后进入eslint-plugin-sudongyuer文件夹目录执行下面的命令

• 执行 yo eslint:plugin初始化项目，进入命令行交互界面

• 完成以下的交互，注意我们这里要创建自定义规则，所以选择 Yes ⚠️这里有个注意事项 我们的 eslint 插件包都需要是eslint-plugin-xxx以eslint-plugin 开头，这里使用脚手架它会帮我们自动处理的，不用担心

  

• 初始化后，可以看见如下的目录结构

  

• 然后我们只需要在 rules 中书写我们的自定义规则就行啦，这里我就用我们之前小节写的find-todo，如果你还不知道如何书写自定义规则，请参考这篇文章 https://sudongyuer.github.io/learn-eslint/guide/找到项目中的TODO.html

• 这就是我们写好自定义规则的目录结构

• 这样就算我们编写好了自己的自定义插件
• 接下来去其他项目安装并使用，我们去到 eslint-setup 这个项目中去使用一下我们的插件

​ 这里我由于使用的 pnpm 所以直接使用 workspace 就可以直接将eslint-plugin-sudongyeur这个软链接进入当前项目，方便调试，正常的话我们应该是将自己写好的插件发布包到 npm，然后在项目去中安装它

• 现在到eslintrc中plugins添加我们的插件并在rules开启我们的自定义规则

效果 #

当我们在当前项目中使用//TODO注释的时候，就会被我们的自定义插件提示