ESLint v9.0.0 正式发布,快来看看都有哪些变化

前言

早上醒来,伸个懒腰,真舒服

打开手机,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可能是一个更好的选择。

其他更新点

因为这些更新点涉及面比较狭窄,这里不做过多阐述,感兴趣的可以自行查看。

总结

本文主要向大家展示了 ESLint v9 版本的更新点,希望本文可以帮助你更好的迁移到 ESLint v9。

相关推荐
天平2 小时前
油猴脚本创建webworker踩坑记录
前端·javascript·typescript
原则猫4 小时前
前端基础大厦
前端
陈随易5 小时前
编程语言级别的Skill市场,AI Agent 的未来形态
前端·后端·程序员
SoaringHeart6 小时前
Flutter进阶:基于 EasyRefresh 的下拉刷新封装 n_easy_refresh_mixin.dart
前端·flutter
IT_陈寒7 小时前
Vite的热更新突然不香了,排查三小时差点砸键盘
前端·人工智能·后端
子兮曰8 小时前
Agency-Agents 深度解析:400+ AI 专家的"梦之队"如何重塑开发工作流
前端·后端·vibecoding
竹林8189 小时前
用 The Graph 查询链上数据实战:从手搓 RPC 到 Subgraph,我的 NFT 项目数据加载快了 10 倍
前端·javascript
妙码生花9 小时前
从 PHP 到 AI + Golang,程序员自救转型手记(十九):点选验证码代码逐行目检
前端·后端·go
Awu122710 小时前
⚡从零开发 Agent CLI(五)实现一个可治理、可扩展的工具系统
前端·人工智能·claude
咪库咪库咪10 小时前
Vue3-生命周期
前端