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。

相关推荐
m0_748240448 分钟前
《通义千问AI落地—中》:前端实现
前端·人工智能·状态模式
ᥬ 小月亮13 分钟前
Vue中接入萤石等直播视频(更新中ing)
前端·javascript·vue.js
神雕杨1 小时前
node js 过滤空白行
开发语言·前端·javascript
网络安全-杰克1 小时前
《网络对抗》—— Web基础
前端·网络
m0_748250741 小时前
2020数字中国创新大赛-虎符网络安全赛道丨Web Writeup
前端·安全·web安全
周伯通*1 小时前
策略模式以及优化
java·前端·策略模式
艾斯特_2 小时前
前端代码装饰器的介绍及应用
前端·javascript
Sokachlh2 小时前
【elementplus】中文模式
前端·javascript
轻口味2 小时前
【每日学点鸿蒙知识】hap安装报错、APP转移账号、import本地文件、远程包构建问题、访问前端页面方法
前端·华为·harmonyos
m0_748245342 小时前
BY组态-低代码web可视化组件
前端·低代码