vue3项目中eslint与prettier协同工作的关键是明确分工：eslint检查代码质量（如any滥用、vue语法错误），prettier统一格式（缩进、引号等）；需安装eslint@^8.57.0、eslint-plugin-vue@^9.25.0、prettier@^3.3.0等兼容版本，通过eslint-config-prettier禁用冲突规则，并在eslint.config.js中按序继承规则、配置parser及全局宏，结合vs code设置实现保存时自动修复与格式化。
Vue 3 项目要让 ESLint 和 Prettier 协同工作，关键不是“各自为政”，而是明确分工、消除冲突、自动落地。ESLint 负责检查代码质量（比如未使用变量、any 类型滥用、Vue 语法错误），Prettier 负责统一排版（缩进、换行、引号、括号间距等）。两者配错顺序或规则，反而会互相打架。
安装必要依赖
用 npm 或 pnpm 安装核心工具链，注意版本兼容性（2026 年推荐组合）：
-
ESLint 核心：
eslint@^8.57.0 -
Vue 支持：
eslint-plugin-vue@^9.25.0（专为 Vue 3 设计） -
TypeScript 支持：
@typescript-eslint/parser@^7.12.0和@typescript-eslint/eslint-plugin@^7.12.0 -
Prettier 集成：
prettier@^3.3.0+eslint-plugin-prettier@^5.1.0+eslint-config-prettier@^9.1.0
命令示例（pnpm）：
pnpm add -D eslint prettier eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-prettier eslint-config-prettier配置文件结构与内容
推荐使用 eslint.config.js（ESM 风格）或 .eslintrc.cjs（CJS 风格），搭配独立的 .prettierrc.json。
.prettierrc.json 示例（兼顾可读性与现代实践）：
{ "printWidth": 100, "tabWidth": 2, "useTabs": false, "semi": false, "singleQuote": true, "quoteProps": "as-needed", "trailingComma": "es5", "bracketSpacing": true, "arrowParens": "always", "vueIndentScriptAndStyle": true, "singleAttributePerLine": true }
eslint.config.js 关键要点：
- 按顺序引入：基础 JS 规则 → Vue 3 推荐规则 → TypeScript 规则 →
eslint-config-prettier（必须在 Vue/TS 规则之后、eslint-plugin-prettier之前）→ 最后启用prettier/prettier规则 - 设置
parser: 'vue-eslint-parser'，并指定内部 parser 为@typescript-eslint/parser - 在
languageOptions.globals中声明 Vue 3 宏（defineProps,defineEmits等）为只读
VS Code 自动化集成
确保编辑器保存时真正生效，不靠手动格式化：
- 安装插件：ESLint（by Microsoft）和 Prettier（by Esben Petersen）
- 在工作区
.vscode/settings.json中设置：
注意：source.fixAll.eslint 设为 "explicit" 表示仅执行 ESLint 明确标记为可自动修复的规则（如引号、分号），避免覆盖 Prettier 的格式决策。
规避常见冲突
最典型的错误是规则重叠导致报错或修复失败：
-
禁用 ESLint 的格式类规则：通过
eslint-config-prettier关闭所有与 Prettier 冲突的规则（如indent,quotes,comma-dangle） -
不要在 ESLint 中启用
prettier/prettier以外的格式规则，尤其避免plugin:prettier/recommended与eslint-config-prettier混用 -
Vue 文件中 script setup 的类型推导问题：确保
@typescript-eslint/parser的project选项指向正确的tsconfig.json，否则类型相关规则可能失效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
