前言
大家好!我是 嘟老板。前段时间心血来潮,把 ZimuAdmin 的 ESLint
从 V8.41.0
升级到了 V9.8.0
。特分享本次迁移过程,并汇总那些好用的 ESLint
插件。
阅读本文您将收获:
迁移过程
1. 升级依赖版本
- 将
eslint
依赖版本升级到V9.x
。
终端输入以下,重新安装最新依赖(第 2
点同理):
pnpm remove eslint
pnpm add eslint@latest -D
- 将
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
用途
允许开发者将 TypeScript
与 ESLint
结合使用。
提供了必要的配置和插件,使得在用 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
用途
应用于 Nodejs
的 Eslint
规则。
安装
pnpm add eslint-plugin-n -D
eslint-plugin-regexp
用途
应用于正则表达式 RegExp
的 Eslint
插件,可用于查找 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-name
,empty-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
等内容。
安装
pnpm add eslint-plugin-markdown -D
[Json]eslint-plugin-jsonc
用途
应用于 JSON
, JSONC
和 JSON5
文件的 Eslint
插件。
安装
pnpm add eslint-plugin-jsonc -D
[Json]jsonc-eslint-parser
用途
JSON
, JSONC
和 JSON5
文件的解析器,与 eslint-plugin-jsonc
插件配合使用。
安装
pnpm add jsonc-eslint-parser -D
结语
本文重点介绍了 ZimuAdmin 迁移 Eslint
到 V9.x
版本的具体过程,及使用到的 Eslint
相关插件,分为 基础类 和 语言拓展类,旨在帮助同学们加深对于新版 Eslint
迁移过程及相关工具的了解。希望对您有所帮助。
如您对文章内容有任何疑问或想深入讨论,欢迎评论区留下您的问题和见解。
技术简而不凡,创新生生不息。我是 嘟老板,咱们下期再会。