最小丑的一集，刚整理完的 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", "never"]。

当多个配置对象指定相同的规则时，规则配置将与后一个对象合并，并优先于任何先前的对象

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：

1. 正常使用 npm 的包

2. 加载本地的包（参考 demo 中的 localPlugin ）

3. 直接在 eslint.config.js 里开写 rules （体量小还行，体量大还是建议另起文件）

extends

这位的优化，体感上是更好理解了，过去的 extends 用起来，总是让新手有些蒙圈，为什么 extends 会起到融合的作用？这下好了，通过数组项的形式来拓展，一目了然。

import eslintRecommended from "eslint-config-example";
export default [
    eslintRecommended, // 直接加进数组里
    {        
        rules: {
            ...
        }
    }
];

总结

1. eslint 让新手更容易上手使用，更好理解了
2. 自定义规则更方便了，不再强依赖 npm
3. 解决了 eslint 规则文件分散的痛点，逻辑更集中了

如果这篇文章对你有帮助，不妨点个赞吧~