当前位置：首页 > news >正文

ESLint 深度解析：原理、规则与插件开发实践

news 来源：原创 2025/8/28 5:47:25

在前端开发的复杂生态中，保障代码质量与规范性是构建稳健、可维护项目的基石。ESLint 作为一款强大的代码检查工具，其默认规则与插件能满足多数常见需求，但面对特定团队规范或项目独特要求，自定义 ESLint 插件便成为有力的扩展手段。本文将深入探讨如何打造自定义 ESLint 插件，并结合实际案例，详细阐述从创建到应用的全过程。

一、ESLint 基础回顾

ESLint 通过静态分析代码，将其转换为抽象语法树（AST），进而依据规则对代码进行细致检查。这一过程始于对代码的解析，默认使用 Espree 解析器，它将代码转化为树形结构，每个节点代表一种语法结构。例如，对于简单代码let num = 10;，在 AST 中会呈现为VariableDeclaration节点。

VariableDeclaration节点 ：用于表示变量声明。它包含以下重要属性：
- declarations ：是一个数组，存放变量声明符。在let num = 10;中，这个数组只有一个元素，即表示num变量的声明符。
- kind ：表示声明的类型，如let、const或var。在上述例子中，kind的值为let。

ESLint 利用这些 AST 信息，对照规则库，找出代码中的潜在问题，如未使用的变量、错误的语法等。

二、自定义插件的需求场景

在团队协作项目中，统一的代码风格和规范至关重要。除了常规的代码格式与最佳实践，还可能存在一些特殊要求。例如，为了维护代码的文明性与专业性，我们要求代码中不得出现诸如 “sb250”“fuck” 等不文明、不专业的词汇。这类需求无法通过 ESLint 的默认规则实现，因此需要开发自定义插件来满足。

三、自定义 ESLint 插件开发流程

（一）工程搭建

初始化项目 ：
- 首先确保全局安装了yo和generator - eslint。若未安装，可通过以下命令进行安装：

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

然后创建一个新目录用于插件项目，例如eslint - plugin - yinzhixiaxue，并进入该目录：

mkdir eslint-plugin-yinzhixiaxue
cd eslint-plugin-yinzhixiaxue

执行yo eslint:plugin命令，这是一个交互式命令，需要填写相关信息：
- 插件名称：例如eslint-plugin-yinzhixiaxue。
- 插件描述：描述插件的功能，如 “用于检查代码中是否存在不文明词汇的 ESLint 插件”。
- 是否包含自定义规则：选择Yes。
- 是否需要处理器：根据实际需求选择，通常对于简单的规则检查选择No。

安装依赖 ：
- 插件开发依赖eslint和eslint-utils库，通过以下命令安装：

npm install eslint eslint-utils --save - dev

（二）创建规则

生成规则文件 ：
- 在项目目录下执行npx yo eslint:rule命令，同样是交互式操作：
  - 规则名称：例如no-offensive-words。
  - 规则描述：如 “禁止在代码中使用不文明词汇”。
  - 不通过的案例代码：可输入包含不文明词汇的代码示例，如let message = “fuck you”;。
- 完成后，项目目录结构中会生成lib/rules/no-offensive-words.js文件，该文件用于编写具体的规则逻辑。

（三）规则配置与编写

规则配置（meta对象） ：

在lib/rules/no-offensive-words.js文件中，首先定义meta对象，用于描述规则的元信息：\

module.exports = {meta: {type: 'problem', // 表示该规则识别的代码可能会导致问题，需要优先解决，取值还可以是'suggestion'（建议优化代码）或'layout'（关注代码布局，如空格、分号等）docs: {description: '禁止在代码中使用不文明词汇', // 规则的详细描述category: 'Custom Rules', // 规则的分类，便于在规则列表中进行归类展示recommended: true, // 表示该规则是否推荐使用，若为true，在继承相关配置时可能会默认启用该规则url: null // 规则文档的链接，可指向详细介绍该规则的页面，这里暂设为null},messages: {noOffensiveWords: '代码中不允许使用不文明词汇' // 定义规则触发时的错误提示信息，这里的'noOffensiveWords'是一个自定义的标识符，可在后续代码中引用},fixable: null, // 表示该规则是否支持自动修复，null表示不支持，'code'表示可修复代码问题，'whitespace'表示可修复空格相关问题schema: [] // 用于定义规则的配置选项，这里为空表示该规则没有额外的配置参数},// 规则具体实现将在create函数中编写
};

AST结构分析与规则编写（create函数） ：

ESLint 通过遍历 AST 来应用规则，因此需要了解代码对应的 AST 结构。对于代码let message = “fuck you”;，在 AST Explorer（https://astexplorer.net/）中解析后，VariableDeclaration节点包含message变量的声明信息，而变量的初始值"fuck you"则存储在init属性指向的Literal节点中。

我们使用Literal节点是因为在这个规则中，我们关注的是字符串字面量中是否包含不文明词汇。Literal节点专门用于表示各种字面量，如字符串、数字、布尔值等。在检查不文明词汇时，我们只需要关心字符串类型的字面量，所以使用Literal节点来获取并检查变量值。

基于此，编写create函数来实现规则：\

module.exports = {meta: {// 省略meta部分已有的内容},create: function (context) {const offensiveWords = ['sb250', 'fuck'];return {Literal(node) {if (typeof node.value ==='string') {offensiveWords.forEach((word) => {if (node.value.includes(word)) {context.report({node,messageId: 'noOffensiveWords'});}});}}};}
};

在上述代码中：

定义了一个包含不文明词汇的数组offensiveWords。
在create函数返回的对象中，使用Literal节点访问方法。当 ESLint 遍历 AST 遇到Literal节点（通常用于表示字符串、数字等字面量）时，若其值为字符串类型，则检查该字符串是否包含offensiveWords中的词汇。若包含，则使用context.report方法报告错误，错误信息使用meta.messages中定义的noOffensiveWords。

（四）配置规则组

在lib/rules/index.js文件中，将新创建的规则集成到插件中：

const requireIndex = require('requireindex');
const rules = requireIndex(__dirname + '/rules');
module.exports = {rules,configs: {recommended: {plugins: ['yinzhixiaxue'],rules: {'yinzhixiaxue/no-offensive-words': 'error'}}}
};

这里通过requireIndex引入自定义规则，在configs中定义了recommended配置组，将no-offensive-words规则设置为error级别，即一旦违反该规则，ESLint 将抛出错误。

（五）补充测试用例

在tests/lib/rules/no-offensive-words.js文件中编写测试用例，以验证规则的正确性：

const rule = require('../../../lib/rules/no-offensive-words');
const RuleTester = require('eslint').RuleTester;const ruleTester = new RuleTester();
ruleTester.run('no-offensive-words', rule, {valid: ['let message = "Hello world";','const num = 10;'],invalid: [{code: 'let message = "sb250 is not allowed";',errors: [{ messageId: 'noOffensiveWords' }]},{code: 'const greeting = "fuck this";',errors: [{ messageId: 'noOffensiveWords' }]}]
});

测试用例分为valid和invalid两组：

valid组包含符合规则的代码示例，这些代码应通过规则检查。
invalid组包含违反规则的代码示例，每个示例都指定了预期的错误信息messageId，用于验证规则是否按预期触发错误。

四、自定义插件的使用

（一）插件安装

本地调试 ：

在插件项目目录下执行npm link，然后在需要使用该插件的项目目录下执行npm link eslint-plugin-yinzhixiaxue。

发布安装 ：

将插件发布到 npm 仓库后，在项目中通过npm install eslint-plugin-yinzhixiaxue --save - dev进行安装。

（二）项目配置

在项目的.eslintrc文件中，添加插件配置：

{"extends": ["plugin:yinzhixiaxue/recommended"],"parserOptions": {"ecmaVersion": 6,"sourceType": "module"}
}

这里通过extends继承了eslint-plugin-yinzhixiaxue插件的recommended配置组，同时根据项目需求配置了parserOptions，例如支持 ES6 语法和模块语法。

（三）关于 extends 和 plugins 的深入理解

在 ESLint 的配置体系中，extends和plugins扮演着不同但又紧密关联的角色。

extends主要用于继承已有的配置集合 ，它可以是一个配置文件的路径、可共享配置的名称，或是plugin:插件名/配置组名的形式。以"extends": [“plugin:react/recommended”]为例，它会一次性启用react插件中recommended配置组里预先定义好的多个规则，这些规则涵盖了插件作者认为在大多数情况下适合项目使用的代码检查规范，比如react/jsx-uses-react、react/jsx-uses-vars等规则会同时生效，无需开发者逐个配置。这大大简化了配置流程，确保项目遵循特定插件推荐的整体规则集。

plugins则是用于引入第三方插件 ，扩展 ESLint 的功能边界。在使用插件前，需要先通过npm安装插件，然后在.eslintrc文件的plugins数组中添加插件名，如"plugins": [“eslint-plugin-demo”] 。引入插件后，若想启用插件中的规则，有两种常见方式。一是在rules中单独配置，例如想启用eslint-plugin-demo插件中的rule1规则，可以设置"eslint-plugin-demo/rule1": “error” ，这种方式适用于对插件规则有精细化控制，只启用部分规则的场景；二是结合extends，通过继承插件提供的配置组来批量启用规则，就像前面提到的"extends": [“plugin:react/recommended”] 。

extends会默认开启当前的所有，plugin需要自己手动开启

extends侧重于对已有配置的复用，让开发者能够快速应用一套成熟的规则体系；而plugins更专注于引入新的功能，无论是自定义规则还是特殊文件处理器。在实际项目中，二者通常相互配合，开发者可以根据项目的具体需求，先用plugins引入插件，再巧妙运用extends来启用插件中合适的配置组，从而精准定制出符合项目特点的代码检查方案。

通过以上步骤，我们成功创建并应用了一个自定义 ESLint 插件，能够有效检查代码中是否存在不文明词汇，进一步提升了代码的规范性与专业性，为团队协作和项目维护提供了有力保障。在实际开发中，可根据更多具体需求，灵活扩展和调整自定义插件的规则，以满足不断变化的项目要求。

技术交流沟通➕V：yinzhixiaxue

ESLint 深度解析：原理、规则与插件开发实践

在前端开发的复杂生态中，保障代码质量与规范性是构建稳健、可维护项目的基石。ESLint 作为一款强大的代码检查工具，其默认规则与插件能满足多数常见需求，但面对特定团队规范或项目独特要求，自定义 ESLint 插件便成为有力的扩展手段…...

编程日记 2025/8/28 5:47:25

ios使用swift调用deepseek或SiliconFlow接口

调用SiliconFlow API 注册并获取API密钥：打开硅基流动平台官网Models，进行注册和认证。登录后，进入首页，点击左上角三个横杠，选择API密钥，生成密钥并复制。配置第三方应用：打开安装好的Chatbox…...

编程日记 2025/8/28 20:25:02

贪心算法一

> 作者：დ旧言~ > 座右铭：松树千年终是朽，槿花一日自为荣。 > 目标：了解什么是贪心算法，并且掌握贪心算法。 > 毒鸡汤：有些事情，总是不明白，所以我不会坚持。早安! >…...

编程日记 2025/8/18 4:46:29

Java进阶：Dubbo

分布式RPC框架Apache Dubbo 1. 软件架构的演进过程软件架构的发展经历了由单体架构、垂直架构、SOA架构到微服务架构的演进过程，下面我们分别了解一下这几个架构。 1.1 单体架构架构说明： 全部功能集中在一个项目内（All in one&#xf…...

编程日记 2025/8/28 20:32:46

【Day9】make/makeFile如何让项目构建自动化起飞

【Day9】make/makeFile如何让项目构建自动化起飞使用make命令编写makefile文件依赖管理增量构建makefile注释：#makefile其他语法 make/makefile递归式工作过程在Linux中，项目自动化构建是指使用一系列工具和脚本来自动执行软件项目的编译、测试、打包和…...

编程日记 2025/8/28 20:27:33

SCI1区TOP：自适应学习粒子群算法SLPSO，深度解析+性能实测

目录 1.摘要2.改进策略3.自适应学习粒子群算法4.结果展示5.参考文献6.获取代码 1.摘要粒子群算法（PSO）是一种基于种群的随机搜索方法，广泛应用于科学和工程领域的连续空间优化问题，并已证明其高效性和有效性。许多实际问题的往往…...

编程日记 2025/8/28 20:29:07

迷你世界脚本显示板管理接口：DisPlayBoard

显示板管理接口：DisPlayBoard 迷你世界更新时间: 2023-04-26 10:21:14 具体函数名及描述如下: 序号函数名函数描述 1 showBoard(...) 对玩家显示显示板 2 hideBoard(...) 对玩家隐藏显示板 3 setBoardPicture 对玩家设置显示板的图片…...

编程日记 2025/8/28 20:27:34

如何使用 LLM 生成的术语自动在搜索应用程序上构建 autocomplete 功能

作者：来自 Elastic Michael Supangkat 了解如何在 Elastic Cloud 中，通过使用 LLM 生成的词汇，为搜索应用增强自动补全功能，实现更智能、更动态的搜索建议。自动补全是搜索应用中的一项关键功能，它通过在用户输入时实…...

编程日记 2025/8/28 20:31:12

电路基础：【1】PN结二极管制作电桥点亮LED灯

第一章：PN结二极管制作电桥点亮LED灯文章目录第一章：PN结二极管制作电桥点亮LED灯前言一、电路原理二、电路图与元器件1.电路图做实验总结前言在本章中，我们将探讨如何通过PN结二极管制作电桥电路，并利用该电路点亮LED灯。L…...

编程日记 2025/8/24 7:52:47

蓝桥与力扣刷题（蓝桥门牌制作）

题目：小蓝要为一条街的住户制作门牌号。这条街一共有 2020 位住户，门牌号从 1 到 2020编号。小蓝制作门牌的方法是先制作 0 到 9 这几个数字字符，最后根据需要将字符粘贴到门牌上，例如门牌 1017 需要依次粘贴字符 1、0、1、7&…...

编程日记 2025/8/28 20:26:50

unity console日志双击响应事件扩展

1 对于项目中一些比较长的日志，比如前后端交互协议具体数据等，这些日志内容可能会比较长，在unity控制面板上查看不是十分方便，我们可以对双击事件进行扩展，将日志保存到一个文本中，然后用系统默认的文本查看…...

编程日记 2025/8/28 20:26:25

基于Django创建一个WEB后端框架（DjangoRestFramework+MySQL)流程

一、Django项目初始化 1.创建Django项目 Django-admin startproject 项目名 2.安装 djangorestframework pip install djangorestframework 解释: Django REST Framework (DRF) 是基于 Django 框架的一个强大的 Web API 框架，提供了多种工具和库来构建 RESTf…...

编程日记 2025/8/28 20:26:27

unittest框架核心知识的系统复习及与pytest的对比

1. unittest 介绍是什么：Python 标准库自带的单元测试框架，遵循 xUnit 架构（类似Java的JUnit）。核心概念： TestCase：测试用例的基类，所有测试类需继承它。 TestSuite：测试套件&a…...

编程日记 2025/8/23 7:24:47

嵌入式硬件设计SPI时需要注意什么？

嵌入式硬件设计SPI时需要注意什么？ 1. 硬件设计注意事项关键点注意事项1. 信号完整性- 缩短SCK、MOSI、MISO的走线长度，避免反射干扰。- 使用屏蔽线或差分信号（高速场景）。- 阻抗匹配（特别是高频信号，如50Ω端接）。2. 电源与地线- 电源去耦：每个SPI芯片的VCC附近放置0…...

编程日记 2025/8/21 8:54:37

vscode远程ssh链接服务器

前提：安装并配置好 ssh 服务,并且远程主机和本地主机在同一个局域网。降级到1.85.2版本并禁用自动更新，因为最新的vscode不支持remote SSH。【VS Code】VS Code不再支持remote SSH 1.在vscode 扩展中搜索Remote - SSH,下载安装扩展 2.点击远程资源管理…...

编程日记 2025/8/20 12:35:59

97k倍区间

97k倍区间 ⭐️难度：中等 🌟考点：暴力，2017省赛 📖 📚 import java.util.Scanner;public class Main {static int N 100010;public static void main(String[] args) {Scanner sc new Scanner(System.…...

编程日记 2025/8/24 22:25:21

绝美焦糖暖色调复古风景画面Lr调色教程，手机滤镜PS+Lightroom预设下载！

调色教程通过 Lr 软件丰富的工具和功能，对风景照片在色彩、影调等方面进行调整。例如利用基本参数调整选项，精准控制照片亮度、对比度、色温、色调等基础要素；运用 HSL 面板可对不同色彩的色相、饱和度以及明亮度进行单独调节；利…...

编程日记 2025/8/25 17:14:08

双王炸爆单，问界M8、M9怎么选？

文 | AUTO芯球作者 | 雷慢问界M8一小时小订7500台， 新问界M9一小时订单3800台。余承东这次直接把一对王炸打了出来， 来看这对大小王， 问界M8预售价36.8万到45.8万， 问界M9预售价47.8万到57.8万， 这两款车&…...

编程日记 2025/8/25 20:09:42

【自学笔记】OpenStack基础知识点总览-持续更新

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录 OpenStack基础知识点总览一、OpenStack概述1.1 OpenStack起源1.2 OpenStack的目标与优势1.3 OpenStack的常见核心项目二、OpenStack的节点类型2.1 控制节点2.2 网络…...

编程日记 2025/8/28 0:57:09

同步 Fork 仓库的命令

同步 Fork 仓库的命令要将您 fork 的仓库的 main 分支与原始仓库（fork 源）同步，您可以使用以下命令： 首先，确保您已经添加了原始仓库作为远程仓库（如果尚未添加）： git remote add…...

编程日记 2025/8/24 4:47:58

2025-03-04 学习记录--C/C++-C语言判断是否是素数

合抱之木，生于毫末；九层之台，起于累土；千里之行，始于足下。💪🏻 C语言判断是否是素数一、代码 ⭐️ #include <stdio.h> #include <stdbool.h> // 使用 bool 类型// 判断是否是…...

编程日记 2025/8/26 23:49:22

1、CI/CD 平台安装部署（Gitlab+Jenkins）

CI/CD 平台安装部署安装部署Gitlab安装Gitlab添加组、创建用户、创建项目 Jenkins 安装Maven 安装和配置Tomcat 安装和配置Jenkins 构建 Maven 项目自由风格项目构建什么是CI/CD？ 通俗来说就是启动一个服务，能够监听代码变化，然后自动执行构…...

编程日记 2025/8/18 6:13:37

数据集路径出错.yaml‘ images not found , missing path

方法一：删除settings.yaml 方法二：dataset_name.yaml改用绝对路径，如最后一张图错误分析： dataset_name.yaml中的path的路径仅支持绝对路径，写相对路径就会搜索不到，使用settings.json中的路径&#xff0…...

编程日记 2025/8/27 22:25:06

零基础学习Python 之类（Class）和实例（Instance）_我的学习Python记录12

零基础学习Python 之类（Class）和实例（Instance）_我的学习Python记录12 目录什么是类和实例？类的作用如何定义类？如何创建实例？类的属性和方法属性方法实际案例案例 1：学生信息…...

编程日记 2025/8/28 12:06:57

Map＜String,Object＞转换为XML报文的方法

1. 使用 JAXB (Java Architecture for XML Binding) JAXB 是 Java 标准库的一部分，支持将 Java 对象与 XML 相互转换。虽然 JAXB 主要用于将 Java 对象转换为 XML，但可以通过一些技巧将 Map<String, Object> 转换为 XML。示例代码 import java…...

编程日记 2025/8/25 3:05:42

Linux：如何安装虚拟机

Linux：如何安装虚拟机第一步首先打开阿里巴巴开源镜像网站然后点击相应要下载链接选择自己需要的这个是完整版这个是联网进行安装系统这个是基础版只有命令行界面这里我选择下载基础版下载好打开vmwareworkstation 开始安装...

编程日记 2025/8/23 12:34:24

HTML 编辑器推荐与 VS Code 使用教程

在进行 HTML 编程时，选择一款合适的 HTML 编辑器能极大地提高开发效率。以下为大家推荐几款常用且功能强大的 HTML 编辑器，同时详细介绍如何使用 VS Code 创建和预览 HTML 文件。一、HTML 编辑器推荐 VS Code：由微软开发，是一款…...

编程日记 2025/8/24 8:39:31

Python的Pandas和matplotlib库：让数据可视化贼简单

在数据爆炸的时代，数据可视化已成为数据分析的关键环节。Python 作为强大的编程语言，拥有众多用于数据可视化的库，而 pandas 库在其中扮演着重要角色。它不仅能高效处理和分析数据，还具备强大的数据可视化功能，让我们轻…...

编程日记 2025/8/27 8:45:27

私有云基础架构与运维（二）

二.私有云基础架构【项目概述】经过云计算基础知识及核心技术的学习后，希望进一步了解 IT 基础架构的演变过程，通过学习传统架构、集群架构以及私有云基础架构的相关知识，认识企业从传统 IT 基础架构到私有云基础架构转型的必要性。…...

编程日记 2025/8/25 18:28:44

Java Maven 项目问题：org.dom4j:dom4j:pom:2.1.3 failed to transfer from...

问题与处理策略问题描述 IDEA 中打开一个 Java 项目，使用 Maven 构建时，报如下错误 org.dom4j:dom4j:pom:2.1.3 failed to transfer from https://repo.maven.apache.org/maven2 during a previous attempt. This failure was cached in the local r…...

编程日记 2025/8/23 4:41:11

DeepSeek group-limited expert routing和负载均衡

Ref https://github.com/deepseek-ai/DeepSeek-V3/blob/main/inference/model.py GitHub - deepseek-ai/EPLB: Expert Parallelism Load Balancer DeepSeek-V3 Technical Report DeepSeek的路由方法 class Gate(nn.Module):def __init__(self, args: ModelArgs):super().__…...

编程日记 2025/8/25 21:38:46