TS 项目如何从 ESlint8 升级至 9并集成 Prettier

eslint 8 到 9 属于破坏性更新（Break Change），因此导致 eslint 8 配置方式无法直接使用（可以使用兼容包，但这不是本文的主题）。

其实大家最关心的就是从 eslint 8 到 9 之后的写法，而与 eslint 息息相关的多种配置插件也需要大量的变更，因此本文核心就是：使用 eslint9 配置规则和集成 prettier。
废话不多说，开始。

环境要求

不支持 Node 19 所有版本，Node 18最低要求 18.8.0，Node 20最低要求 20.9.0 及 Node 21.1.0 以上。

升级 eslint 至最新版

9.9.0 是我写文章时的最新版本

npm i eslint@^9.9.0 -D

安装 @eslint/js

npm i @eslint/js -D

安装 typescript-eslint

npm i typescript-eslint -D

该文件包含了 @typescript-eslint/parser 和 @typescript-eslint/eslint-plugin，因此需移除以上两个依赖，而且以上两个插件不直接支持 eslint9

安装 globals

npm i globals -D

该包在 eslint 的配置中会用到

移除 eslint-config-prettier

eslint 在 8.53.0 之后就不再支持格式化规则，因此 eslint-config-prettier 作为 eslint 和 prettier 的规则冲突解决插件，已经没用了。

旧 eslint 配置文件改名为 eslint.config.js

在 8 版本及之前，eslint 默认读取的以上配置文件中，package.json 配置已在 9 中移除，其余配置的兼容性在 10 版本会移除

需提前安装 prettier 和 eslint-plugin-prettier
由于项目是 react，所以 react 相关的都注释掉了，可以参考写法进行配置。
新的 eslint.config.js 内容如下

import js from "@eslint/js";
import globals from "globals";
// import reactHooks from "eslint-plugin-react-hooks";
// import reactRefresh from "eslint-plugin-react-refresh";
import tseslint from "typescript-eslint";
import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";export default tseslint.config({extends: [js.configs.recommended,...tseslint.configs.recommended,eslintPluginPrettierRecommended,],files: ["**/*.{ts,tsx,js,jsx}"], // eslint 检测的文件，根据需要自行设置ignores: ["dist"],languageOptions: {ecmaVersion: 2020,globals: globals.browser,},plugins: {// "react-hooks": reactHooks,// "react-refresh": reactRefresh,},rules: {...reactHooks.configs.recommended.rules,// "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],"prettier/prettier": "warn", // 默认为 error"arrow-body-style": "off","prefer-arrow-callback": "off","@typescript-eslint/no-explicit-any": "off", // allow any type},
});

eslint-plugin-react-hooks 和 eslint-plugin-react-refresh 为 react 相关规则插件，可根据项目框架自行设置 plugins。

验证 eslint 和 prettier 的正确运作

eslint-plugin-react-hooks 不兼容 eslint9 处理

eslint-plugin-react-hooks 若需要兼容 eslint9，需安装 rc 版本

npm i eslint-plugin-react-hooks@^5.1.0-rc.0 -D