ESLint v9正式发布，快来看看都有哪些变化

最新推荐文章于 2024-06-25 19:41:23 发布

前端冒险家克鲁

最新推荐文章于 2024-06-25 19:41:23 发布

阅读量2.4k

点赞数 49

文章标签：前端

本文链接：https://blog.csdn.net/y_ang_1/article/details/137510680

版权

本文介绍了ESLintv9的重大更新，包括停止支持Node.js早期版本，采用新配置文件格式，移除内置格式化功能并转向npm包，以及多项规则的变更。这为开发者在迁移到新版本时提供了指导。

摘要由CSDN通过智能技术生成

前言

早上醒来，伸个懒腰，真舒服
打开手机，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

并且现在的配置文件默认导出的是一个数组类型的配置对象，不再是以前对象形式的了，
数组的每一项都对应着一组规则，这也就更方便就行规则组合和不同文件的规则区分。
这里需要特别注意，示例如下：

// 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包，用于将现有的插件和预设转换为符合新版本规范的代码。示例如下：

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