概要。

就在几天前，󿀌ESLint迎来了重大更新，9.0.0版，介绍官方文档󿀌使用新版本的先决条件是Node.js版必须是18.18.0、20.9.0，或者是>=21.1.版本0-#xff00c;新ESLint将不再直接支持以下旧配置(非扁平化)文件：

1. .eslintrc.js。
2. .eslintrc.cjs。
3. .eslintrc.cjs。
4. .eslintrc.yaml。
5. .eslintrc.yml。

.eslintrc.json。

• 以下格式替换配置文件：

• eslint.config.js。

• eslint.config.mjs。

eslint.config.cjs。

注：若仍需使用旧版本的配置文件，需要额外配置󿀌可查阅官方文档󿀌这里不多介绍。

此外，新ESLint还消除了与Prettier冲突的规则，也就是说，与Prettier一起使用󿼌“不再需要使用插件”eslint-config-prettier解决冲突问题。

写这篇文章的目的是因为，前段时间写了一篇关于uniap项目配置eslint的文章，昨天创建项目时，ESLint用以下命令初始化:。

npm init @eslint/config。

发现eslintrcc没有在项目下生成.js、eslintrc.cjs等文件，自动安装的eslint版本为9.0.0。在执行eslint命令时，新版eslint󿀌NodeJS࿰需要使用高版本c;我当地的NodeJS版本是v16.14.0，所以在不升级node版本的情况下，只使用旧版eslint。

经过一番折腾�发现了一种间接的方法。

ESLllint的安装和初始化。

首先，在项目package中.在json文件中󿀌将依赖eslint的版本改为8.6.版本󿀌

执行：

npm i#或pnpm i。

安装依赖性好，#xff0c;接下来是初始eslint，自动安装相关依赖，生成eslint配置文件󿼌

注：不建议直接复制他人的eslint配置文件，及相关依赖性󿀌这往往会导致依赖版本兼容性问题󿀌或者eslint格式问题，导致eslint无效�而且具体的错误原因不容易调查。

项目根目录执行以下命令：

pnpm eslint --init#或npx eslint --init#或./node_modules/.bin/eslint --init。

根据提示选择eslint相关配置：

下一个依赖安装环节将报告错误，

但我们熟悉eslintrcrc.js配置文件已自动生成：

不要惊慌，#xff00c;这是对等依赖问题󿀌报错信息还说了解决方案，我们只需要手动安装相关依赖，并使用 --legacy-peer-deps指令忽略了对等依赖的问题。

控制台，我们可以找到需要安装的依赖包：

执行以下命令󿀌#xff1手动安装a;

pnpm add eslint-plugin-vue @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest --force -D #或npm i eslint-plugin-vue @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest --legacy-peer-deps -D。

Prettier安装配置。

eslint手动安装相关依赖后，执行以下命令，安装Pretier及其插件：

pnpm add prettier eslint-config-prettier eslint-plugin-prettier -D#或npm i prettier eslint-config-prettier eslint-plugin-prettier -D。

安装成功后󿀌extends选项在eslint配置文件中的最后位置，追加“plugin:prettier/recommended配置：

创建项目根目录.prettierrc.cjs文件&xf0c;填写相应的Prettier规则󿼌可以参考我的：

module.exports = { printWidth: 80, // 一行最多80个字符 tabWidth: 2, // 每个水平缩进的空间数设置工具 useTabs: false,///使用空间而不是缩进 semi: true, // 句末是否加分号 vueIndentScriptAndStyle: true,///在Vue文件中＜script＞和＜style＞是否缩进 singleQuote: false, // 用单引号 trailingComma: 'none', // 最后一个对象元素符加逗号 bracketSpacing: true,// 箭头函数，只有一个参数，也需要括号 arrowParens: 'always', // 文件开头不需要写 @prettier insertPragma: false, // 文件开头不需要自动添加 @prettier endOfLine: 'auto' // 换行符使用 auto}。

再次package.json文件中的eslint依赖版改为8.45.0至8.57.0之间的版本，依赖性重新安装。

Reload vscode：

不出意外的eslint和prettier规则应该生效 ，红色波浪线࿰将在不符合规则的地方报告c;前提是vscode安装了eslint插件。

Reload vscode：

不出意外的eslint和prettier规则应该生效 ，红色波浪线࿰将在不符合规则的地方报告c;前提是vscode安装了eslint插件。

 错误排查。

如果上述步骤完成后，配置仍然无效(无红色波浪线)，我们可以在package中.在json文件中添加一个命令󿀌

然后执行：

pnpm run lint#或npm run lint。

看看控制台报错了什么#xff0c;然后根据提示解决󿀌我在这里使用的eslint版本是8.6.执行󿀌以下错误报告。

这就是你所依赖的兼容性问题，更改版本是正确的，

如果你看到下图：

ESLint准确地找出了您项目中存在问题的文件 ,那么你的eslint配置和相关依赖肯定没问题，重启vscode或Reloadvscode󿼌您将看到熟悉的红色波浪线。

保持自动格式化 。

保持自动格式化 。要实现VSCode保持自动格式化不符合规范的代码，我可以参考另一篇文章：uniapp+vite+vue3+ts配置eslint代码检查和pretier规范检查。注：折腾不容易󿀌转载请注明出处！