前言
早上醒来,伸个懒腰,真舒服
打开手机,ESLint 竟然发布了 v9 大版本,瞬间来了精神
一般大版本更新都会伴随重大更改甚至是破坏性更改,ESLint 这艘巨轮发展至今已经是前端的标配,一起看看它这次的重大更新能带给我们什么惊喜。
更新点
不再支持 Node.js < v18.18.0 的版本
截止目前作者书写本文,Node.js 的 LTS 版本为 v20.12.1,最新 Node.js 版本为 v21.7.2
ESLint v9 与时俱进,放弃了对 Node.js v18.18.0 以下版本的支持。
默默看看自己电脑的 Node.js 版本
好嘛,还够不上最低版本,是时候升级 Node.js 版本了。
目前目前公司服务器上跑着的大部分都是 v16 版本的 Node.js,想必这波升级还得慎重点。
不过本地玩玩还是可以的!
全新的默认配置文件格式
ESLint v9 采用全新的配置文件:
- eslint.config.js
- eslint.config.mjs
- eslint.config.cjs
并且现在的配置文件默认导出的是一个数组类型的配置对象,不再是以前对象形式的了,
数组的每一项都对应着一组规则,这也就更方便就行规则组合和不同文件的规则区分。
这里需要特别注意,示例如下:
javascript
// eslint.config.js
export default [
{
rules: {
semi: "error",
"prefer-const": "error"
}
}
];
并且数组的每一项具有如下几个属性组成:
- name- 配置对象的名称。这在错误消息和配置检查器中使用,以帮助识别正在使用哪个配置对象。 (命名约定)
- files- 一组 glob 模式,指示配置对象应应用到的文件。如果未指定,则配置对象适用于与任何其他配置对象匹配的所有文件。
- ignores- 一组 glob 模式,指示配置对象不应应用于的文件。如果未指定,则配置对象适用于所有与files.
- languageOptions- 包含与如何配置 JavaScript 进行 linting 相关的设置的对象。
- ecmaVersion- 支持的 ECMAScript 版本。可以是任何年份(即2022)或版本(即5)。设置"latest"为最新支持的版本。 (默认:"latest")
- sourceType- JavaScript 源代码的类型。可能的值"script"适用于传统脚本文件、"module"ECMAScript 模块 (ESM) 和"commonjs"CommonJS 文件。 (默认值:"module"用于.js和.mjs文件;"commonjs"用于.cjs文件)
- globals- 指定在 linting 期间应添加到全局范围的其他对象的对象。
- parserparse()- 包含方法或方法的对象parseForESLint()。 (默认:espree)
- parserOptions- 指定直接传递给解析器上的parse()or方法的附加选项的对象。parseForESLint()可用选项取决于解析器。
- linterOptions- 包含与 linting 过程相关的设置的对象。
- noInlineConfig- 指示是否允许内联配置的布尔值。
- reportUnusedDisableDirectives- 严重性字符串,指示是否以及如何应跟踪和报告未使用的禁用和启用指令。对于旧版兼容性,true相当于"warn"和false相当于"off". (默认:"warn")。
- processorpreprocess()- 包含方法的对象postprocess()或指示插件内部处理器名称的字符串(即"pluginName/processorName")。
- plugins- 包含插件名称到插件对象的名称-值映射的对象。当files指定时,这些插件仅适用于匹配的文件。
- rules- 包含配置规则的对象。当指定files或ignores时,这些规则配置仅适用于匹配的文件。
- settings- 包含应可用于所有规则的名称-值对信息的对象。
简单总结下变化点:
以前使用 extends
来组合规则,现在使用数组的每一项来组合,所以 ESLint 官方才新出品了 @eslint/js
包来导出 ESLint 默认规则。
而且,这会导致以前的 eslint
的其他社区规范文件需要发布适用于 v9 版本的新规则。不过好在 ESLint 官方已经想到了这个问题,他们提供了一个 @eslint/eslintrc
包,用于将现有的插件和预设转换为符合新版本规范的代码。示例如下:
javascript
import { FlatCompat } from "@eslint/eslintrc";
import path from "path";
import { fileURLToPath } from "url";
// mimic CommonJS variables -- not needed if using CommonJS
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
baseDirectory: __dirname
});
export default [
// mimic ESLintRC-style extends
...compat.extends("standard", "example"),
// mimic environments
...compat.env({
es2020: true,
node: true
}),
// mimic plugins
...compat.plugins("airbnb", "react"),
// translate an entire config
...compat.config({
plugins: ["airbnb", "react"],
extends: "standard",
env: {
es2020: true,
node: true
},
rules: {
semi: "error"
}
})
];
这将使我们很平滑额过渡到 v9 版本。
移除格式化代码相关的程序
在旧版本的 ESLint 中,可以使用它作代码风格约束,例如:尾随逗号,空格,空行等
这些规则可以让我们的代码风格一致,但是这些规则却与 ESLint 的核心功能有点相悖
因为 ESLint 主要的点是分析代码的语法错误而不应该是风格错误,所以风格检查有点画蛇添足了,况且现在有更加快速且强大的 prettier
来做代码风格约束,所以 ESLint 的风格约束是时候放弃了。
删除格式化程序 | 替换 npm 包 |
---|---|
checkstyle | eslint-formatter-checkstyle |
compact | eslint-formatter-compact |
jslint-xml | eslint-formatter-jslint-xml |
junit | eslint-formatter-junit |
tap | eslint-formatter-tap |
unix | eslint-formatter-unix |
visualstudio | eslint-formatter-visualstudio |
以上原本内置于 ESLint 内部的格式化程序将全部被删除,取而代之的是后面的 npm 包,
如果你仍然需要使用 ESLint 的风格格式化,则需要自己安装对应的包,启用对应的规则。
不过,prettier
可能是一个更好的选择。
其他更新点
- 删除require-jsdoc和valid-jsdoc规则
- eslint:recommended已经升级
- --quiet不再运行规则集"warn"
- --output-file现在即使输出为空也会将文件写入磁盘
- 没有模式传递到 CLI 时行为发生变化
- /* eslint */仅具有严重性的注释现在保留配置文件中的选项
- /* eslint */现在不允许对同一规则发表多个评论
- 更严格的/* exported */解析
- no-constructor-return并且no-sequences规则模式更加严格
- no-implicit-coercion默认情况下新签入
- 区分大小写的标志no-invalid-regexp
- varsIgnorePattern选项no-unused-vars不再适用于 catch 参数
- no-restricted-imports现在接受多个具有相同配置条目name
- "eslint:recommended""eslint:all"平面配置中不再接受字符串
- no-inner-declarations有一个新的默认行为和一个新选项
- no-unused-vars现在默认caughtErrors为"all"
- no-useless-computed-key默认情况下标记类中不必要的计算成员名称
- camelcase允许选项仅接受字符串数组
因为这些更新点涉及面比较狭窄,这里不做过多阐述,感兴趣的可以自行查看。
总结
本文主要向大家展示了 ESLint v9 版本的更新点,希望本文可以帮助你更好的迁移到 ESLint v9。