本文主要讲解关于最小丑的一集，刚整理完的 eslint 就出 v9 大改版了相关内容，让我们来一起学习下吧！
前言
是这样的，前两天动笔开始写一些之前 eslint 的总结，写写断断，终于在昨天晚上前（4.11）搞定了。今天打开电脑看到的第一条评论竟然是：
此时我的状态：
我刚写的文章怎么就过气了（恼）。事已至此，那也只能趁热打铁，再写一篇 v9 了。
查询了一下资料，eslint v9 是 4 月 5 号发布的，原先的配置文件 .eslintrc.cjs 整个废弃掉，并且新配置文件内容进行了较大的调整，增删了不少内容。
我们用到比较多的大概也就是配置文件怎么写、新自定义规则怎么搞。所以本文也就介绍一下这两块的相关部分，仅做抛砖引玉之用。
在此之前，如果有大佬对以前 eslint 的使用方法记得不太清楚，欢迎查阅我的上一集《自定义 eslint 规则来规范组内代码》
整体对比
首先我们来看一下新旧配置文件对比
// 旧文件 .eslintrc.cjs
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
"eslint:recommended",
],
ignorePatterns: ["dist", ".eslintrc.cjs"],
parser: "@typescript-eslint/parser",
plugins: ["react-refresh", "imoo-tools"],
rules: {
eqeqeq: [2, "always", { null: "ignore" }],
},
};
// 新文件 eslint.config.js
export default [
{
rules: {
"no-unused-vars": "warn",
}
}
];
文件名
由原先的 .eslintrc.cjs 改为了 eslint.config.js 。平心而论，确实后者更好理解一些，类似 vite.config.js 的命名，就算不懂的人也能看出这是 eslint 的配置文件。
导出
由原先的导出一个对象，变为了导出一个对象数组。这样做的意义是什么呢？这就要提到之前 eslint 可以存在多个 .eslintrc.cjs 的设计，这种设计可以让 eslint 更加灵活的配置。但是掘友们也很容易想到，在后期这种四处散乱的形式维护起来会有多痛苦。
新 eslint 使用了数组的形式，并且增加了作用范围的属性（files），这样既足够灵活，还不用到处去搜索 .eslintrc 文件逐个进行操作。
比如说，我原先要写在 a 和 b 文件夹下的两个 .eslintrc.cjs ，现在就可以这样
export default [
{
files: ["src/a/*.js"],
rules: { semi: "error" }
},
{
files: ["src/b/*.js"],
rules: { semi: "warn" }
}
];
rules
基本没变，可以按原先的写法。不过值得注意的是多个数组同时配置相同规则的情况，如下
export default [
{
rules: {
semi: ["error", "never"]
}
},
{
rules: {
semi: ["warn", "always"]
}
}
];
最后结果为semi：["warn", "always"]。
当多个配置对象指定相同的规则时，规则配置将与后一个对象合并，并优先于任何先前的对象
plugins
plugins 由原先的数组变为了对象。有同学可能会问了，这又有什么意义呢，我们写它最多也就是为了加一个注册的 rules 表，难道还需要配置什么吗？来看这个 demo
import examplePlugin from "eslint-plugin-example";
import localPlugin from "./my-local-plugin.js";
export default [
{
plugins: {
examplePlugin,
localPlugin,
customPlugin: {
rules: {
"my-rule": {
... // 省略函数实现
},
}
}
},
rules: {
'examplePlugin/rule1': 'warn',
"localPlugin/rule1": "warn",
"customPlugin/my-rule": "warn"
}
}
];
是的，plugins 大加强！如果说之前自定义 rules 最让人诟病的是必须上传 npm，那么这个版本就是彻底解决了这个问题。我们目前可以通过三种形式使用 plugins：
-
正常使用 npm 的包
-
加载本地的包（参考 demo 中的 localPlugin ）
-
直接在 eslint.config.js 里开写 rules （体量小还行，体量大还是建议另起文件）
extends
这位的优化，体感上是更好理解了，过去的 extends 用起来，总是让新手有些蒙圈，为什么 extends 会起到融合的作用？这下好了，通过数组项的形式来拓展，一目了然。
import eslintRecommended from "eslint-config-example";
export default [
eslintRecommended, // 直接加进数组里
{
rules: {
...
}
}
];
总结
- eslint 让新手更容易上手使用，更好理解了
- 自定义规则更方便了，不再强依赖 npm
- 解决了 eslint 规则文件分散的痛点，逻辑更集中了
如果这篇文章对你有帮助，不妨点个赞吧~
以上就是关于最小丑的一集，刚整理完的 eslint 就出 v9 大改版了相关的全部内容，希望对你有帮助。欢迎持续关注程序员导航网，学习愉快哦！
