需安装Prettier与ESLint插件、禁用VSCode内置格式器、配置.prettierrc和.eslintrc.js（eslint-config-prettier放extends末尾）、在.vscode/settings.json中启用formatOnSave和source.fixAll.eslint。
安装 Prettier 和 ESLint 插件并配置工作区
打开 vscode，进入扩展商店（ctrl+shift+x），搜索并安装官方插件：prettier - code formatter 和 eslint（由 dirk baeumer 维护）。确保两者都启用，并**禁用 vscode 内置的 javascript/typescript 格式化器**（在设置中搜索 javascript.format.enable 和 typescript.format.enable，设为 false）。
在项目根目录创建 .prettierrc（或 .prettierrc.json），定义基础格式规则：
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"printWidth": 80,
"arrowParens": "avoid"
}同时确保项目已安装 Prettier 与 ESLint 的本地依赖（推荐使用 --save-dev）：
npm install --save-dev prettier eslint eslint-config-prettier eslint-plugin-prettier
让 ESLint 识别并尊重 Prettier 规则
关键在于避免规则冲突。在 .eslintrc.js（或 .eslintrc.json）中，将 eslint-config-prettier 放在 extends 数组**末尾**，它会关闭所有与 Prettier 冲突的 ESLint 格式类规则；再将 plugin:prettier/recommended 加入 extends，它等价于 plugin:prettier/recommended + eslint-config-prettier，但更明确：
module.exports = {
extends: [
"eslint:recommended",
"plugin:react/recommended",
"plugin:prettier/recommended" // ← 必须放在最后
],
plugins: ["react", "prettier"],
rules: {
"prettier/prettier": "error"
}
};注意：plugin:prettier/recommended 本身已包含 eslint-config-prettier，因此无需重复引入。若你手动启用了某条格式规则（如 quotes），它会被 eslint-config-prettier 覆盖——这是预期行为，不必担心。
配置 VSCode 自动格式化与保存时修复
在项目根目录的 .vscode/settings.json 中写入以下内容（**不建议全局设置**，避免跨项目干扰）：
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnPaste": false,
"editor.formatOnType": false,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}这样，保存文件时会先由 ESLint 自动修复可修复问题（如 no-unused-vars），再由 Prettier 统一格式化代码。若发现格式未生效，请检查是否打开了“仅活动编辑器”格式化开关（右下角状态栏 → 点击「Format Document」→ 选「Configure Default Formatter」→ 确保选中 Prettier）。
常见陷阱：为什么保存后没自动修复？
最常被忽略的是：VSCode 的 editor.codeActionsOnSave 默认**不启用 ESLint 修复**，必须显式开启。若只开了 formatOnSave，Prettier 只负责缩进/引号/分号等格式，而 ESLint 的逻辑类报错（如变量未使用、缺少 return）不会自动修复——除非你配了 "source.fixAll.eslint": true。
另一个典型问题是：项目未正确安装 eslint-plugin-prettier 或未在 plugins 中声明 prettier，导致 "prettier/prettier" 规则不生效，VSCode 控制台可能报错 Definition for rule 'prettier/prettier' was not found。此时请检查 node_modules 是否存在该包，并确认 ESLint 配置中 plugins 字段包含 "prettier"。
最后提醒：团队协作时，务必把 .prettierrc、.eslintrc.* 和 .vscode/settings.json 提交到 Git，否则成员间格式行为不一致。VSCode 的 settings.json 是推荐设置，不是强制锁死，所以仍需靠 prettier 和 eslint CLI 在 CI 中兜底校验。
