最稳妥的方案是让 Prettier 独占格式化权限，ESLint 只负责代码质量检查，通过配置 eslint-config-prettier 屏蔽冲突规则，并在 VSCode 设置中指定默认格式化工具为 Prettier 插件。
先说结论：两者分工明确才能避免保存时代码反复跳动，格式化交给 Prettier，逻辑检查交给 ESLint。
- 适合：前端项目需要统一代码风格且避免保存时代码反复跳动的场景。
- 先准备：安装 VSCode 官方扩展及项目本地依赖包，确保版本兼容。
- 验收：保存文件后观察状态栏显示 Prettier，且 ESLint 不再报格式类错误。
命令速用版
在项目根目录终端执行以下命令，安装核心依赖包。注意需本地安装而非全局安装，以确保团队环境一致。
npm install `--save-dev` eslint prettier eslint-config-prettier eslint-plugin-prettier为什么会这样
ESLint 和 Prettier 的定位不同：ESLint 是“代码医生”，负责检查逻辑错误和潜在问题；Prettier 是“代码打印机”，负责强制统一代码风格。如果两者同时开启格式化功能，会在引号、分号、缩进等规则上产生冲突。例如 ESLint 要求单引号，Prettier 也要求单引号，但解析逻辑细微差别可能导致保存时无限重写。因此必须关闭 ESLint 的格式类规则，将所有风格决定权交给 Prettier。
分步处理
1. 安装 VSCode 扩展
在扩展市场搜索并安装以下官方扩展，注意作者信息以避免安装山寨插件：
- ESLint：作者 Dirk Baeumer (Microsoft)
- Prettier - Code formatter：作者 Esben Petersen
2. 配置 ESLint 禁用格式规则
在项目根目录的.eslintrc.js或.eslintrc.cjs文件中，确保extends数组末尾包含prettier或使用plugin:prettier/recommended。这将自动关闭与 Prettier 冲突的 ESLint 规则。
module.exports = {extends: ['eslint:recommended','plugin:prettier/recommended'],rules: {'prettier/prettier': 'error'}
};3. 配置 VSCode 编辑器行为
在项目根目录创建.vscode/settings.json，明确指定默认格式化程序为 Prettier，并禁用 ESLint 的自动格式化功能，防止两者争抢。
{"editor.defaultFormatter": "esbenp.prettier-vscode","editor.formatOnSave": true,"eslint.enable": true,"eslint.format.enable": false
}4. 定义 Prettier 风格偏好
创建.prettierrc文件，写入具体的格式配置，如分号、引号风格等。所有风格相关决定以此文件为准。
{"semi": true,"singleQuote": true,"tabWidth": 2,"printWidth": 80
}怎么验证是否生效
1. 检查状态栏
打开一个 JavaScript 或 TypeScript 文件，查看 VSCode 右下角状态栏。应显示Prettier字样，而不是ESLint或None。
2. 保存测试
故意写一段格式错误的代码（如缺少分号或缩进混乱），保存文件。代码应自动修正格式，且“问题”面板中不应出现关于引号或分号的 ESLint 报错。
3. 逻辑检查验证
写一段逻辑错误代码（如未使用的变量），保存后 ESLint 应正常报红警告，证明 ESLint 仍在工作，只是不再干预格式。
常见坑
1. 全局安装无效
VSCode 默认优先使用项目内的二进制文件。全局安装 eslint 或 prettier 无意义，必须确保项目本地依赖已安装。
2. 配置文件语法错误
如果.prettierrc或.eslintrc存在语法错误（如多余的逗号），VSCode 可能静默失效，导致保存无反应。需检查配置文件合法性。
3. 语言特定配置缺失
editor.formatOnSave有时需针对特定语言开启。若全局开启无效，尝试在 settings.json 中针对[javascript]或[typescript]单独配置。
4. Vue/TS 特殊支持
使用 TypeScript 或 Vue 单文件组件时，需确保 Prettier 版本支持相应解析器。旧版本可能跳过<script setup>区域，看起来像未格式化。
参考来源
- vscode 格式化规则_使用 Prettier/ESLint 配置统一代码风格
- VSCode 代码格式化指南:Prettier 与 ESLint 的完美结合
- VSCode 中如何配置 ESLint 和 Prettier 以统一代码风格【教程】
- VSCode 怎样配置 Prettier 进行代码自动格式化【教程】
- 如何为 VSCode 配置 ESLint 和 Prettier 以实现代码自动规范【教程】
原文链接：https://www.zjcp.cc/ask/10349.html