ESLint是代码质量检查工具，负责发现潜在错误和不良实践；Prettier是代码格式化工具，专注统一缩进、引号、分号等风格。二者协同实现“质量+风格”双重保障，需通过eslint-plugin-prettier集成并禁用冲突规则，确保统一由ESLint驱动格式化。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您在使用 Trae（可能是对 Vite 或某类现代前端构建工具的误写，当前主流生态中无名为“Trae”的标准构建工具）时希望集成 ESLint 和 Prettier 进行代码质量检查与格式化，则需确认项目实际基于 Vite、Vue CLI 或其他框架。以下提供适用于 Vite 及 Vue 项目的通用配置路径，覆盖常见初始化与协同冲突解决场景：
一、确认项目基础与依赖安装
该步骤确保 ESLint 和 Prettier 的核心运行时与插件已就位，避免因缺失解析器或适配层导致规则不生效。需根据项目语言（JavaScript/TypeScript/Vue）安装对应依赖。
1、执行命令安装 ESLint 及其 Vue/TypeScript 支持插件：
npm install eslint @eslint/js @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-vue -D
2、安装 Prettier 及其 ESLint 集成插件：
npm install prettier eslint-plugin-prettier eslint-config-prettier -D
3、验证 node 版本是否满足要求：必须为 ^18.18.0、^20.9.0 或 ≥21.1.0
二、配置 ESLint 主配置文件
通过 eslint.config.js 统一声明解析器、语言选项、插件与规则，使 ESLint 能正确识别 Vue SFC、TSX、TypeScript 语法，并兼容 Prettier 规则。
1、在项目根目录创建 eslint.config.js 文件
2、写入如下最小可行配置（支持 Vue + TS）：
import js from '@eslint/js';
import ts from '@typescript-eslint/eslint-plugin';
import vue from 'eslint-plugin-vue';
import prettier from 'eslint-plugin-prettier';
import globals from 'globals';
export default [
js.configs.recommended,
...ts.configs.recommended,
...vue.configs['flat/essential'],
{
files: ['**/*.vue'],
languageOptions: { globals: { ...globals.browser, ...globals.node } },
},
{
plugins: { prettier },
rules: { 'prettier/prettier': 'error' },
},
];
3、必须将 'prettier/prettier': 'error' 规则置于配置末尾，防止被前置规则覆盖
三、配置 Prettier 规则文件
通过 .prettierrc.json 显式声明格式偏好，确保所有开发者遵循同一套风格，同时为 ESLint 的 prettier/prettier 规则提供校验依据。
1、在项目根目录创建 .prettierrc.json
2、填入标准化配置示例：
{
"singleQuote": true,
"semi": false,
"tabWidth": 2,
"printWidth": 80,
"bracketSpacing": true,
"arrowParens": "avoid",
"trailingComma": "none"
}
3、禁止在 .prettierrc.json 中使用 JavaScript 语法（如 module.exports），仅允许 JSON 格式
四、禁用编辑器端冲突格式化行为
VS Code 默认可能启用多个格式化工具，若 ESLint 和 Prettier 同时响应保存操作，将引发反复修改、光标跳动、报错循环等现象，必须明确主控权归属。
1、打开项目内 .vscode/settings.json（若无则新建）
2、写入以下关键设置：
{
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.prettier": false
},
"[vue]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" },
"[typescript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" },
"[javascript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" }
}
3、必须禁用 editor.formatOnSave，仅保留 source.fixAll.eslint 为 true，确保格式化由 ESLint 插件统一驱动
五、验证配置是否生效
通过终端命令触发一次全量检查与修复，观察是否能识别语法问题、应用 Prettier 风格并输出零错误，是判断配置链路贯通的关键动作。
1、在 package.json 的 scripts 字段中添加：
"lint": "eslint . --ext .js,.ts,.vue",
"lint:fix": "eslint . --ext .js,.ts,.vue --fix"
2、执行命令运行检查：
npm run lint
3、执行自动修复命令：
npm run lint:fix
4、若出现 'Definition for rule 'prettier/prettier' was not found' 错误，说明 eslint-plugin-prettier 未正确加载或版本不兼容
