ESLint负责代码质量检查，Prettier专注格式统一，通过eslint-plugin-prettier集成并禁用冲突规则，配置"source.fixAll.eslint"实现保存时统一修复，关闭Prettier的formatOnSave避免重复格式化。
在 VS Code 中同时使用 ESLint 和 Prettier，目标不是让它们“打架”，而是让 ESLint 负责代码质量（比如未定义变量、潜在 bug），Prettier 负责格式统一（比如缩进、引号、换行）。关键在于配置它们协同工作，避免冲突，并让保存时自动修复。
安装必要插件和依赖
先确保本地项目或全局装好核心工具：
- VS Code 插件：安装官方 ESLint 和 Prettier 扩展（推荐用 Esben Petersen 维护的 Prettier 插件）
- 项目依赖：
npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier -
eslint-config-prettier用来关闭 ESLint 中与 Prettier 冲突的规则；eslint-plugin-prettier则把 Prettier 当作 ESLint 的一条规则来运行（报错+自动修复）
配置 ESLint 使用 Prettier
在项目根目录创建 .eslintrc.js（或 .eslintrc.json），内容示例如下：
module.exports = {
extends: [
"eslint:recommended",
"plugin:prettier/recommended" // 这行会自动启用 plugin 并禁用冲突规则
],
plugins: ["prettier"],
rules: {
"prettier/prettier": "error" // 格式问题也作为 ESLint 错误提示
}
};
注意："plugin:prettier/recommended" 已包含 eslint-config-prettier，无需再手动 extend 它。
VS Code 设置自动保存时修复
在工作区或用户设置（settings.json）中添加以下配置：
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": ["javascript", "typescript", "vue"], // 按需补充语言
"prettier.requireConfig": false, // 若无 prettier.config.js，可设为 false；有则建议设为 true
"prettier.semi": true,
"prettier.singleQuote": true // 这些只是示例，实际以你 .prettierrc 为准
}
重点是 source.fixAll.eslint：它会让 ESLint 在保存时统一处理所有可修复问题（包括 Prettier 格式问题）；不用同时开启 Prettier 的 formatOnSave，否则可能重复格式化甚至冲突。
可选：添加 Prettier 配置文件
在项目根目录加 .prettierrc（JSON 格式），明确格式偏好，例如：
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"printWidth": 80,
"arrowParens": "avoid"
}
这样团队成员无需在 VS Code 设置里各自维护格式选项，配置统一且可提交到仓库。
基本上就这些。不复杂但容易忽略的是：别让 ESLint 和 Prettier 各自“抢着修”——关掉 Prettier 的 formatOnSave，只靠 ESLint 的 fixAll 来驱动，才能真正协同。
