在 Visual Studio Code 中使用 Prettier 格式化代码：完整配置指南

推荐阅读 VSCode 官宣：全新默认主题

再见命令行，全新一代桌面级服务器管理工具，超级AI智能！

VS Code 1.113 发布：这次真的有点强！

技术总监悄悄秀了一把 VS Code 神技，被我狠狠学到了！

VS Code 又发布了一个 Agent 新玩具！

VS Code 1.110 官宣 AI 新特性：AI 直接调试浏览器！

VS Code 2026 效率秘籍：学完无敌！

VS Code 发布 AI新功能：离了大谱！

微软正式开源！王炸！

VS Code 又整新活！相当炸裂！

什么是 Prettier？

Prettier 是一个固执的代码格式化工具，它会根据预定义的规则自动格式化代码，减少手动格式化和团队关于代码风格的争论。

核心优势：

特性	Prettier	VS Code 默认格式化器
语言支持	广泛（JS、TS、HTML、CSS、JSON等）	有限，因文件类型而异
一致性	所有文件强制执行	依赖个人语言规则
配置共享	通过 .prettierrc 轻松共享	难以在团队间标准化
保存时格式化	完全支持	支持但不一致
自动化（CI/CD）	易于设置	不适合自动化
团队协作	强烈推荐	不适合团队

---

安装前准备

在开始之前，请确保你已准备好以下工具：

• ✅ Visual Studio Code - 从官网下载安装
• ✅ Prettier 扩展 - 稍后从扩展市场安装
• ✅ Node.js 和 npm（可选但推荐）- 用于命令行安装
• ✅ 示例代码 - JavaScript、TypeScript、HTML、CSS 或 Markdown 项目

示例代码（格式化前）：

const name = "James";

const person ={first: name
}

console.log(person);

const sayHelloLinting = (fName) => {
console.log(`Hello linting, ${fName}`)
}

sayHelloLinting('James');

这段代码存在以下问题：

• 单引号和双引号混用
• person 对象的属性应该在单独一行
• 函数内的 console 语句应该缩进
• 箭头函数参数的括号可选

---

安装 Prettier 扩展

步骤 1：在 VS Code 中安装扩展

1. 打开 Visual Studio Code

2. 点击侧边栏的扩展图标（或按 Ctrl+Shift+X / Cmd+Shift+X）

3. 在搜索框中输入 Prettier - Code formatter

4. 选择 Prettier – Code formatter 并点击 Install

步骤 2：（可选）通过 npm 安装

如果你需要更多控制权或在 CI/CD 中使用：

# 作为开发依赖安装
npm install --save-dev prettier

# 或全局安装
npm install --global prettier

这在团队环境和持续集成管道中很常见，可以确保使用特定版本。

---

使用 Prettier 格式化代码

使用"格式化文档"命令

1. 按 Cmd+Shift+P（Mac）或 Ctrl+Shift+P（Windows）打开命令面板

2. 搜索 format

3. 选择 Format Document

如果提示选择格式化器，点击 Configure，然后选择 Prettier – Code Formatter。

格式化后的代码：

const name = "James";

const person = { first: name };

console.log(person);

const sayHelloLinting = (fName) => {
  console.log(`Hello linting, ${fName}`);
};

sayHelloLinting("James");

CSS 文件同样适用：

/* 格式化前 */
body {color: red;
}
h1 {
  color: purple;
font-size: 24px
}

/* 格式化后 */
body {
  color: red;
}
h1 {
  color: purple;
  font-size: 24px;
}

---

配置保存时自动格式化

手动运行命令很麻烦，我们可以启用 保存时自动格式化：

1. 按 Cmd+,（Mac）或 Ctrl+,（Windows）打开设置

2. 搜索 Editor: Format On Save

3. 确保该选项已勾选

启用后，每次保存文件时 Prettier 会自动格式化代码！

---

创建 Prettier 配置文件

虽然可以在 VS Code 设置中调整 Prettier，但这不能保证团队一致性。最佳实践是创建配置文件。

创建 .prettierrc 文件

在项目根目录创建 .prettierrc.json：

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

常用配置选项：

选项	说明	示例值
singleQuote	使用单引号还是双引号	true / false
semi	是否在行尾添加分号	true / false
tabWidth	缩进空格数	2 / 4
trailingComma	尾随逗号	"es5" / "all" / "none"
printWidth	每行最大字符数	80 / 120

创建 .prettierignore 文件

类似 .gitignore，告诉 Prettier 忽略哪些文件：

node_modules/
build/
dist/
*.min.js
coverage/

---

团队协作配置

在团队项目中，确保所有人使用相同的格式化规则至关重要。

1. 提交配置文件到版本控制

.prettierrc          # 格式化规则
.prettierignore      # 忽略文件
.vscode/settings.json # 工作区设置

2. 配置 .vscode/settings.json

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

这样团队成员克隆项目后无需手动设置！

3. 在 package.json 中添加格式化脚本

{
  "scripts": {
    "format": "prettier --write ."
  }
}

团队成员可以运行 npm run format 来格式化整个项目。

---

与 ESLint 集成

如果你使用 JavaScript 或 TypeScript，可能已经在使用 ESLint。ESLint 负责代码质量，Prettier 负责代码格式，两者配合使用效果最佳。

为什么一起使用？

• Prettier：处理格式（空格、换行、缩进等）
• ESLint：处理代码质量（语法错误、最佳实践、反模式）

步骤 1：安装必要的包

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

• eslint-config-prettier：关闭与 Prettier 冲突的格式化规则
• eslint-plugin-prettier：将 Prettier 作为 ESLint 规则运行

步骤 2：配置 .eslintrc

{
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ]
}

步骤 3：配置 VS Code 设置

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

添加 Lint 脚本

{
  "scripts": {
    "lint": "eslint .",
    "format": "prettier --write ."
  }
}

---

常见问题解答

1. Prettier 支持哪些文件类型？

• JavaScript (.js)、TypeScript (.ts)

• JSON、YAML、TOML

• CSS、SCSS、Less

• HTML、Vue、Angular 模板

• Markdown (.md)、MDX

• GraphQL

• Handlebars (.hbs)

这也是它的一个缺点 几乎不支持后端语言的格式化，比如go。

---

总结

通过在本指南中配置 Prettier，你可以：

✅ 自动化代码格式化 - 减少手动工作
✅ 保持团队一致性 - 所有成员使用相同规则
✅ 提高代码可读性 - 统一的代码风格
✅ 简化代码审查 - 减少格式相关的评论
✅ 与 ESLint 无缝集成 - 格式和质量双保障

---

💡 提示：将 .vscode/settings.json、.prettierrc 和 .prettierignore 提交到 Git 仓库，确保团队成员开箱即用！