VS Code 代码格式化怎么配置？Prettier + ESLint 集成指南

VS Code 格式化的核心配置就三个问题：用什么格式化器、什么时候格式化、团队怎么统一。搞清楚这三件事，剩下的都是细节。

最推荐的搭配：Prettier + ESLint

Prettier 只管格式（缩进、换行、引号），不管逻辑。ESLint 管代码质量（未使用变量、潜在 bug），也管部分格式。两者配合的关键是：让 Prettier 管所有格式规则，ESLint 只管逻辑规则，不要打架。

装 "eslint-config-prettier" 这个包，它会关掉 ESLint 里和 Prettier 冲突的所有规则：

bash
npm install --save-dev prettier eslint-config-prettier

js
// .eslintrc.js
module.exports = {
  extends: ["eslint:recommended", "prettier"],  // prettier 放最后，覆盖冲突规则
}

json
// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "trailingComma": "es5"
}

保存时自动格式化

这是最省心的配置——每次 Ctrl+S 自动格式化 + 修复 lint 错误，不需要手动触发：

json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

formatOnSave 触发 Prettier 格式化，source.fixAll.eslint 触发 ESLint 自动修复——两者顺序是先格式化再 lint 修复，不会冲突。

不想全局开？可以按语言开关：

json
{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[python]": {
    "editor.defaultFormatter": "ms-python.black-formatter",
    "editor.formatOnSave": true
  }
}

手动格式化快捷键

• Shift+Alt+F：格式化整个文档
• Ctrl+K Ctrl+F：只格式化选中部分
• Ctrl+.：快速修复当前行的 lint 错误
• F8 / Shift+F8：跳到下一个/上一个错误

团队统一：配置文件提交到 Git

格式化配置只有在团队成员的编辑器表现一致时才有意义。必须提交到仓库的文件：

• .prettierrc — Prettier 规则
• .eslintrc.js — ESLint 规则
• .editorconfig — 编辑器基础配置（缩进风格、换行符）

再加一个 VS Code 工作区推荐扩展，确保所有人装了 Prettier 插件：

json
// .vscode/extensions.json
{
  "recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"]
}

json
// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

这样 clone 项目后 VS Code 会自动提示安装推荐扩展，打开文件就生效——不需要每个新人手动配置。

追问

Prettier 和 ESLint 冲突了怎么办？

症状是保存后文件在两种格式间反复跳。解法：(1) 确保 "eslint-config-prettier" 已安装且放在 extends 最后；(2) 检查 .eslintrc 里有没有手动写缩进/引号规则——这些应该全部交给 Prettier，ESLint 的 rules 里不要有 indent、quotes、semi 之类的格式规则。

formatOnSave 导致保存变慢怎么办？

大文件格式化可能要几百毫秒。解决方案：(1) 设 formatOnSaveMode: "modifications" 只格式化修改的行而非整个文件；(2) 确认 Prettier 没有配 rangeIgnore 之外的大段忽略区域（每次都要扫描）；(3) 实在慢就关掉 formatOnSave，改用快捷键手动触发。

不同语言怎么用不同格式化器？

用 [语言] 块指定。Python 用 Black，Go 用 gofmt（内置），Rust 用 rustfmt（内置），C/C++ 用 Clang-Format。每个语言配一个 editor.defaultFormatter 和 editor.formatOnSave: true，互不干扰。