【问题解决】用pnpm创建的 Vue3项目找不到 .eslintrc.js文件 及 后续的eslint配置的解决办法
问题描述：
在用 pnpm 创建的 Vue3项目中 需要配置 ESLint 代码风格，却找不到 .eslintrc.cjs文件
分析原因：
1. ESLint 版本升级（9.x+）
ESLint 9.x 版本默认采用新的扁平化配置格式，不再使用 .eslintrc.cjs 等旧格式，而是默认生成 eslint.config.js（或 .mjs 、.cjs 等）。如果使用新版 ESLint，就不会出现 .eslintrc.cjs 文件。
2. 创建项目时未选择 ESLint
如果使用 pnpm create vue 或类似脚手架创建项目时，没有勾选 ESLint，则不会生成任何 ESLint 配置文件。
解决办法：
方案一：检查并使用新版 ESLint 配置文件
- 看项目根目录下有没有 eslint.config.js 或类似文件（如 eslint.config.mjs 、eslint.config.cjs）。
- 如果有，直接在这个文件里配置规则即可，无需强行改为 .eslintrc.cjs。
方案二：手动生成旧版 .eslintrc.cjs 文件
如果你更习惯 .eslintrc.cjs，可以手动生成：
1. 安装 ESLint（如果尚未安装）
pnpm add eslint@8.57.0
2. 生成 .eslintrc.cjs 配置文件
npx @eslint/create-config@0.4.6完成后，项目根目录会生成 .eslintrc.cjs 文件。(如果生成的配置文件不叫 .eslintrc.cjs，则将文件名改成这个即可)
方案三：降级 ESLint 到 8.x
如果希望用旧版配置，可以降级 ESLint：
1. 修改 package.json，将 ESLint 相关依赖改为 8.x 版本
2. 删除 node_modules 和 pnpm-lock.yaml
3. 删除依赖（@vue/eslint.js 版本号）重新安装依赖：
pnpm install4. 再执行 npx eslint --init（初始化 ESLint 配置） 即可生成 .eslintrc.cjs。或者修改eslint.config.js文件名为.eslintrc.cjs，并删除原文件全部内容，并配置 8.x版本的.eslintrc（详情见下文eslint 9.0以下版本(旧版本) 配置方法）
5. 点击“扩展”，下载 eslint 的 2.4.0 版本插件。
Eslint 配置代码风格
(1) eslint 9.0以下版本(旧版本) 配置方法
环境同步：
- 安装了插件 ESlint，开启保存自动修复
- 禁用了插件 Prettier，并关闭保存自动格式化
- vite 创建的 Vue3 项目勾选了 ESLint 和 Prettier
// ESlint插件 + Vscode配置 实现自动格式化修复
"editor.codeActionsOnSave": {"source.fixAll": true
},
"editor.formatOnSave": false,或着参考这篇博客：
【vue eslint】报错：VSCode自动保存格式化与ESLint规则冲突
https://blog.csdn.net/weixin_52047874/article/details/151065243
配置文件 .eslintrc.cjs
-
prettier 风格配置 https://prettier.io
-
单引号
-
不使用分号
-
每行宽度至多80字符
-
不加对象|数组最后逗号
-
换行符号不限制（win mac 不一致）
-
-
vue组件名称多单词组成（忽略index.vue）
-
props解构（关闭）
rules: {'prettier/prettier': ['warn',{singleQuote: true, // 单引号semi: false, // 无分号printWidth: 80, // 每行宽度至多80字符trailingComma: 'none', // 不加对象|数组最后逗号endOfLine: 'auto' // 换行符号不限制（win mac 不一致）}],'vue/multi-word-component-names': ['warn',{ignores: ['index'] // vue组件名称多单词组成（忽略index.vue）}],'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验// 💡 添加未定义变量错误提示，create-vue@3.6.3 关闭，这里加上是为了支持下一个章节演示。'no-undef': 'error'}
(2) eslint 9.x 以上版本(新版本) 配置方法
1. 安装 ESLint
环境要求：
- Node.js >= 18.18.0
- vite 创建的 Vue3 项目勾选了 ESLint 和 Prettier
- VSCode 安装了 ESLint插件，Prettier插件仍要禁用
// ESlint插件 + Vscode配置 实现自动格式化修复
"editor.codeActionsOnSave": {"source.fixAll.eslint": always
},
"editor.formatOnSave": false,或着参考这篇博客：
【vue eslint】报错：VSCode自动保存格式化与ESLint规则冲突https://blog.csdn.net/weixin_52047874/article/details/151065243
2. 生成配置文件
如果项目根目录没有 eslint.config.js，可以运行：
npx eslint --init
3. 初始化配置
eslint.config.js 配置文件：
import globals from 'globals'
import js from '@eslint/js'
import pluginVue from 'eslint-plugin-vue'
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'import eslintConfigPrettier from '@vue/eslint-config-prettier' //添加这一行代码export default [{name: 'app/files-to-lint',files: ['**/*.{js,mjs,jsx,vue}'],// rules添加到这里，上面写的该规则应用于js,mjs,jsx,vuerules: {'prettier/prettier': ['warn',{singleQuote: true, // 单引号semi: false, // 无分号printWidth: 100, // 每行宽度至多100字符trailingComma: 'none', // 不加对象|数组最后逗号endOfLine: 'auto' //换行符号不限制（win mac 不一致）}],// vue组件名称多单词组成（忽略index.vue）'vue/multi-word-component-names': ['warn', { ignores: ['index'] }],// 关闭 props 解构的校验'vue/no-setup-props-destructure': ['off'],// 💡 添加未定义变量错误提示，create-vue@3.6.3 关闭，这里加上是为了支持下一个章节演示。'no-undef': 'error'}},{name: 'app/files-to-ignore',ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],//rules添加到这里rules: {'prettier/prettier': ['warn',{singleQuote: true,semi: false,printWidth: 100,trailingComma: 'none',endOfLine: 'auto'}],'vue/multi-word-component-names': ['warn', { ignores: ['index'] }],'vue/no-setup-props-destructure': ['off'],'no-undef': 'error'}},{languageOptions: {globals: {...globals.browser}}},js.configs.recommended,...pluginVue.configs['flat/essential'],skipFormatting,eslintConfigPrettier //添加这一行代码
]
注：prettier 专注于代码的美观度（格式化工具）；ESLint 关注于规范。
更多 prettier 风格配置参考官网：https://prettier.io/
最后 退出重启即可！
建议：
- 如果项目刚创建，且不依赖旧版配置：直接使用 eslint.config.js。
- 如果希望用旧版 .eslintrc.cjs：用方案二或方案三手动生成。
- 如果已有 .eslintrc.cjs 但不生效：检查是否安装了相关依赖（如 eslint-plugin-vue、@typescript-eslint/parser 等）。