问题描述：
在用 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（如果尚未安装）
bash
pnpm add eslint@8.57.02. 生成 .eslintrc.cjs 配置文件
bash
npx @eslint/create-config@0.4.6完成后，项目根目录会生成 .eslintrc.cjs 文件。(如果生成的配置文件不叫 .eslintrc.cjs，则将文件名改成这个即可)
方案三：降级 ESLint 到 8.x
如果希望用旧版配置，可以降级 ESLint：
-
修改package.json，将 ESLint 相关依赖改为 8.x 版本
-
删除 node_modules 和 pnpm-lock.yaml
-
删除依赖（@vue/eslint.js 版本号）重新安装依赖：
bash
pnpm install-
再执行 npx eslint --init （初始化 ESLint 配置） 即可生成**.eslintrc.cjs。** 或者修改eslint.config.js文件名为.eslintrc.cjs，并删除原文件全部内容，并配置 8.x版本的.eslintrc（详情见下文eslint 9.0以下版本(旧版本) 配置方法）
-
点击"扩展"，下载 eslint 的 2.4.0 版本插件。
Eslint 配置代码风格
(1) eslint 9.0以下版本(旧版本) 配置方法
环境同步：
- 安装了插件 ESlint，开启保存自动修复
- 禁用了插件 Prettier，并关闭保存自动格式化
- vite 创建的 Vue3 项目勾选了 ESLint 和 Prettier
javascript
// ESlint插件 + Vscode配置 实现自动格式化修复
"editor.codeActionsOnSave": {
"source.fixAll": true
},
"editor.formatOnSave": false,或着参考这篇博客：
https://blog.csdn.net/weixin_52047874/article/details/151065243配置文件 .eslintrc.cjs
-
prettier 风格配置 https://prettier.io
-
单引号
-
不使用分号
-
每行宽度至多80字符
-
不加对象|数组最后逗号
-
换行符号不限制（win mac 不一致）
-
-
vue组件名称多单词组成（忽略index.vue）
-
props解构（关闭）
javascript
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插件仍要禁用
javascript
// ESlint插件 + Vscode配置 实现自动格式化修复
"editor.codeActionsOnSave": {
"source.fixAll.eslint": always
},
"editor.formatOnSave": false,或着参考这篇博客：
2. 生成配置文件
如果项目根目录没有 eslint.config.js，可以运行：
bash
npx eslint --init3. 初始化配置
eslint.config.js 配置文件：
javascript
// eslint.config.js
import js from '@eslint/js'
import pluginVue from 'eslint-plugin-vue'
import globals from 'globals'
import eslintConfigPrettier from '@vue/eslint-config-prettier'
export default [
// 1. 全局忽略文件（必须放在最前面）
{
name: 'app/files-to-ignore',
ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**']
},
// 2. 应用 ESLint 官方推荐规则
js.configs.recommended,
// 3. 应用 Vue 插件的推荐规则
...pluginVue.configs['flat/essential'],
// 4. 应用 Prettier 配置，禁用冲突规则（必须放在最后）
eslintConfigPrettier,
// 5. 你的项目自定义配置（放在最后，优先级最高）
{
name: 'app/custom-rules',
files: ['**/*.{js,mjs,jsx,vue}'], // 指定文件范围
languageOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
globals: {
...globals.browser // 注入浏览器全局变量
}
},
rules: {
// 在这里集中定义所有自定义规则
'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 解构的校验，prop解构会影响响应式
'vue/no-setup-props-destructure': 'off',
// 💡 添加未定义变量错误提示，create-vue@3.6.3 关闭，这里加上是为了支持下一个章节演示。
'no-undef': 'error'
}
}
]
**关键知识点：**ESLint 9.x 引入了一个重大变革------它默认采用新的"Flat Config"格式（eslint.config.js），而不再自动支持旧版的 .eslintrc.js 文件。且 Flat Config 的一个核心原则是"数组中的配置对象按顺序合并，后面的会覆盖前面的！"
这里对 eslint.config.js 文件内容进行了规范调整，以满足 Flat Config 的标准语法。
具体可参考博客：
**注：**prettier 专注于代码的美观度（格式化工具）；ESLint 关注于规范。
更多 prettier 风格配置参考官网：https://prettier.io/
最后 退出重启即可！
建议：
- 如果项目刚创建，且不依赖旧版配置：直接使用 eslint.config.js。
- 如果希望用旧版**.eslintrc.cjs**：用方案二或方案三手动生成。
- 如果已有**.eslintrc.cjs** 但不生效：检查是否安装了相关依赖（如 eslint-plugin-vue 、@typescript-eslint/parser 等）。