💥💥💥Eslint 迁移 V9 全过程 + yyds 的 Eslint 工具汇总

2,246 阅读6分钟

前言

大家好!我是 嘟老板。前段时间心血来潮,把 ZimuAdminESLintV8.41.0 升级到了 V9.8.0。特分享本次迁移过程,并汇总那些好用的 ESLint 插件。

阅读本文您将收获:

  1. 了解 ESLint V9.x 版本迁移过程。
  2. 汇总 ESLint 好用插件。

迁移过程

1. 升级依赖版本

  1. eslint 依赖版本升级到 V9.x

终端输入以下,重新安装最新依赖(第 2 点同理):

pnpm remove eslint
pnpm add eslint@latest -D
  1. eslint 相关依赖升级到支持 V9.x 的版本,包括但不限于:
  • eslint-plugin-prettier
  • eslint-plugin-vue
  • eslint-plugin-n
  • ...

具体以项目依赖为准。本人使用的依赖在下面「依赖汇总」部分。

2. 修改 eslint 相关配置文件

.eslintrc.xxx

文件名变更

Eslint V9.x 版本前的配置文件命名通常为 .eslintrc.xxx,例如:

  • .eslintrc.js
  • .eslintrc.cjs
  • .eslintrc.json
  • ...

V9.x 版本设计了全新的配置系统,首先文件命名调整为 eslint.config.xxx,包括:

  • eslint.config.js
  • eslint.config.mjs
  • eslint.config.cjs
快速迁移

ESLint 提供了配置迁移工具 - @eslint/migrate-config,可以帮助我们将现有配置快速迁移到 V9.x 版本。

终端输入以下命令,回车执行:

npx @eslint/migrate-config .eslintrc.json

该命令会解析 .eslintrc.xxx 配置文件,自动迁移并生成 eslint.config.js 配置文件。

目前该迁移工具更适用于如下 静态配置 文件:

  • .eslintrc
  • .eslintrc.json
  • .eslintrc.yml

对于 .eslintrc.js 等可能存在动态逻辑的配置文件,部分复杂的处理,如函数、计算等,可能会在迁移过程中丢失。

注意:
不保证工具迁移的 Eslint 配置可以完美运行,仍需要人工验证。

.eslintignore

不再支持 .eslintignore 文件配置,改用 eslint.config.js 中的 ignores 配置项。

export default [{
    ignores: [
        "**/node_modules/",
        "**/.vscode/",
        "**/.husky/",
        // ...
    ],
}]

若使用了 @eslint/migrate-config 迁移工具,执行命令后,工具会自动在配置文件(.eslintrc.xxx)同目录下检索 .eslintignore,并将其内容迁移到新的配置文件(eslint.config.js)中。

3. 命令行调整

为方便快速格式化代码,通常会在 package.json 中添加 npm script,例如:

{
    "scripts": {
        "lint:fix": "eslint . --cache --ext .js,.ts,.jsx,.tsx,.vue --fix"
    }
}

以上命令使用 --ext 标志,指定 ESLint 检查文件的扩展名.

然而 V9.x 版本不再支持 --ext 标志,需要改为在配置文件 eslint.config.js 中的 files 属性指定。

export default [{
    files: [
      '**/*.js',
      '**/*.ts',
      '**/*.jsx',
      '**/*.tsx',
      '**/*.vue'
    ]
}]

--ext 外,--rulesdir--resolve-plugins-relative-to 标志也不再支持,若您有用到,可参考 迁移指南

插件汇总

基础类

typescript-eslint

用途

允许开发者将 TypeScriptESLint 结合使用。

提供了必要的配置和插件,使得在用 TypeScript 编码时,利用 ESLint 进行代码质量的检查和维护。

安装
pnpm add typescript-eslint -D

eslint-plugin-unused-imports

用途

用于查找并移除 ES6 模块中未使用的导入(imports)。

这个插件是作为 no-unused-vars 规则的补充,它依赖于 TypeScript/JavaScript 插件中的 no-unused-vars 规则。若要使这个插件正常工作,需要确保安装了 typescript-eslint 插件。

安装
pnpm add eslint-plugin-unused-imports -D

eslint-plugin-n

用途

应用于 NodejsEslint 规则。

安装
pnpm add eslint-plugin-n -D

eslint-plugin-regexp

用途

应用于正则表达式 RegExpEslint 插件,可用于查找 RegExp 使用错误及格式问题。

安装
pnpm add eslint-plugin-regexp -D

eslint-config-flat-gitignore

用途

用于解析 .gitignore 文件或兼容格式的文件(如 .eslintignore),返回包含 ignore 模式unignore 模式 的文件路径的数组。

ignore 模式unignore 模式 是什么?以 .gitignore 为例:

ignore 模式

例如,忽略所有 .txt 文件

*.txt

unignore 模式

例如 unignore.txt 文件比较特殊,不需要忽略,通过在文件路径前加上 ! 符号,表示取消忽略。

!unignore.txt
安装
pnpm add eslint-config-flat-gitignore -D

eslint-plugin-eslint-comments

用途

提供对 Eslint 指令注释应用的最佳实践,例如 /* eslint-disable */

例如:

  • 不允许未使用的禁用指令。
  • 不允许无效的启用指令。
  • 禁用和启用指令需要提供对应的规则ID。
安装
pnpm add eslint-plugin-eslint-comments -D

eslint-plugin-import-x

用途

支持 ES6+ import/export 语法的格式化,以及防止文件路径和导入名称拼写错误的问题。

安装
pnpm add eslint-plugin-import-x -D

eslint-plugin-perfectionist

用途

于对不同类型的数据进行排序,包括对象、导入语句、TypeScript 类型、枚举、JSX 属性、Svelte 属性等,排序的方式可以是按字母顺序、自然顺序或按行长度排序。

安装
pnpm add eslint-plugin-perfectionist -D

eslint-plugin-unicorn

用途

内置大量 ESLint 规则,如 catch-error-nameempty-brace-spaces 等。

安装
pnpm add eslint-plugin-unicorn -D

扩展类

[Prettier]eslint-plugin-prettier

用途

用于 Prettier 格式化的 Eslint 插件,可以将 Prettier 格式化配置作为 Eslint 规则运行。

安装
pnpm add eslint-plugin-prettier -D

[Prettier]eslint-config-prettier

用途

关闭所有不必要或可能与 Prettier 冲突的 Eslint 规则。

安装
pnpm add eslint-config-prettier -D

[Vue]eslint-plugin-vue

用途

Vue 官方 Eslint 插件,允许我们使用 Eslint 检查 Vue 语法,如 <template><script> 等。

安装
pnpm add eslint-plugin-vue -D

[Vue]vue-eslint-parser

用途

Vue Eslint 自定义解析器,允许我们检查 .vue 文件的 <template> 标签内容,配合 eslint-plugin-vue 提供的规则使用。

安装
pnpm add vue-eslint-parser -D

[Markdown]eslint-plugin-markdown

用途

用于格式化 Markdown 中的 JS, JSX, TypeScript 等内容。

image.png

安装
pnpm add eslint-plugin-markdown -D

[Json]eslint-plugin-jsonc

用途

应用于 JSONJSONC 和 JSON5 文件的 Eslint 插件。

安装
pnpm add eslint-plugin-jsonc -D

[Json]jsonc-eslint-parser

用途

JSONJSONC 和 JSON5 文件的解析器,与 eslint-plugin-jsonc 插件配合使用。

安装
pnpm add jsonc-eslint-parser -D

结语

本文重点介绍了 ZimuAdmin 迁移 EslintV9.x 版本的具体过程,及使用到的 Eslint 相关插件,分为 基础类语言拓展类,旨在帮助同学们加深对于新版 Eslint 迁移过程及相关工具的了解。希望对您有所帮助。

如您对文章内容有任何疑问或想深入讨论,欢迎评论区留下您的问题和见解。

技术简而不凡,创新生生不息。我是 嘟老板,咱们下期再会。


往期推荐