应明确ESLint负责代码质量检查、Prettier专注格式化，通过eslint-config-prettier禁用冲突规则，并在.eslintrc中将'prettier'置于extends末位；VSCode需设Prettier为默认格式化器、启用formatOnSave和codeActionsOnSave修复ESLint问题。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您在 Trae（可能为 Typora、Tauri 或拼写误差，但结合上下文实指 VS Code 类编辑器环境中的代码规范配置场景）中尝试统一管理 Vue 项目代码风格与质量规则，却发现 ESLint 报错未被自动修复、Prettier 格式化结果与 ESLint 冲突，或保存时无响应，则很可能是二者未正确协同。以下是实现 ESLint 与 Prettier 集成的多种可行路径：
一、安装必要依赖并启用插件协同
该方法通过官方推荐插件桥接 ESLint 与 Prettier，使 ESLint 调用 Prettier 执行格式化，避免规则打架。核心是引入 eslint-plugin-prettier（将 Prettier 规则转为 ESLint 规则）和 eslint-config-prettier（关闭 ESLint 中与 Prettier 冲突的格式类规则）。
1、在项目根目录执行安装命令：pnpm add -D eslint-plugin-prettier eslint-config-prettier prettier
2、修改项目根目录下的 eslint.config.js（或 .eslintrc.cjs），在 extends 数组末尾追加："plugin:prettier/recommended"
3、确认 plugins 中已包含 "prettier"，且 rules 中显式启用："prettier/prettier": "error"
二、使用独立 Prettier 配置文件 + ESLint 禁用格式规则
该方法将格式化职责完全交由 Prettier，ESLint 仅保留质量检查功能。需确保 ESLint 不再干预缩进、引号、分号等样式问题，防止重复校验引发冲突。
1、在项目根目录创建 .prettierrc.json，写入格式规则，例如：{"semi": false, "singleQuote": true, "tabWidth": 2, "printWidth": 100}
2、在 ESLint 配置中移除所有格式类规则，或直接继承 "eslint-config-prettier"（已内置禁用全部格式规则）
3、确保 eslint.config.js 的 extends 包含 "eslint-config-prettier"，且其位置必须在所有含格式规则的配置项之后
三、VS Code 工作区级 settings.json 强制接管
该方法绕过项目配置优先级干扰，通过编辑器本地设置强制指定格式化行为与保存动作，适用于团队成员配置不一致或项目配置未生效的紧急场景。
1、在项目根目录创建 .vscode/settings.json 文件
2、写入以下内容，明确绑定语言与格式化器：{"[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}, "editor.formatOnSave": true}
3、添加 ESLint 自动修复指令：{"editor.codeActionsOnSave": {"source.fixAll.eslint": true}}
4、禁用 Prettier 自动触发以避免双重格式化：{"prettier.requireConfig": true}
四、利用 husky + lint-staged 实现提交前校验
该方法将 ESLint 与 Prettier 集成延伸至 Git 生命周期，在代码提交前自动执行修复与格式化，保障仓库代码基线纯净，不依赖开发者本地编辑器设置。
1、安装 husky 和 lint-staged：pnpm add -D husky lint-staged
2、初始化 husky：npx husky install，并在 package.json 中添加准备脚本："prepare": "husky install"
3、添加 pre-commit 钩子：npx husky add .husky/pre-commit "npx lint-staged"
4、配置 lint-staged，在 package.json 中加入："lint-staged": {"*.{js,vue,ts}": ["eslint --fix", "prettier --write"]}
