VSCode中通过Prettier实现自动代码格式化-牛站云

代码格式混乱不仅影响阅读体验，还容易让团队协作中的代码审查变得低效。尤其是 JavaScript、TypeScript、Vue、React、JSON、CSS 等项目，如果每个人使用不同的缩进、引号和换行习惯，提交到 Git 后很容易产生大量无意义的格式差异。

Prettier 是目前前端开发中常用的代码格式化工具，可以按照统一规则自动整理代码。结合 VSCode 的保存时格式化功能，还可以实现“保存即格式化”，减少手动调整代码格式的工作量。

一、Prettier是什么

Prettier 是一个专注于代码格式化的工具，支持 JavaScript、TypeScript、JSON、CSS、SCSS、Less、HTML、Markdown、YAML 等多种文件类型。

它与传统代码检查工具的定位有所不同。ESLint 更关注代码质量、潜在错误以及编码规范，而 Prettier 主要负责代码的排版和格式统一。

例如下面这段 JavaScript：

JavaScript
const user={name:"Tom",age:18}
function getUser(){return user}

经过 Prettier 格式化后，可以变成：

JavaScript
const user = { name: "Tom", age: 18 };

function getUser() {
  return user;
}

缩进、空格、分号以及换行方式都会按照配置规则统一处理。

二、VSCode安装Prettier插件

VSCode 本身并不会自动提供完整的 Prettier 格式化能力，因此通常需要安装对应扩展。

打开 VSCode 后，可以使用快捷键：


Ctrl + Shift + X

进入扩展市场，在搜索框中输入：


Prettier - Code formatter

找到 Prettier 官方扩展后点击安装。

安装完成后，可以打开一个 JavaScript、TypeScript 或 Vue 文件进行测试。

如果右下角状态栏能够看到格式化工具相关信息，说明插件已经正常加载。

三、设置Prettier为默认格式化工具

安装多个格式化插件后，VSCode 可能无法确定当前文件应该使用哪个格式化工具，因此建议明确指定 Prettier。

打开任意代码文件，使用快捷键：


Ctrl + Shift + P

搜索：


Format Document With...

选择：


Configure Default Formatter

然后选择：


Prettier - Code formatter

完成设置后，VSCode 就会优先使用 Prettier 对对应文件进行格式化。

也可以直接通过 VSCode 的 settings.json 配置：

JSON
{
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

如果希望针对不同语言分别指定格式化工具，可以这样配置：

JSON
{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

这种方式适合项目中同时存在多种开发语言和格式化工具的情况。

四、手动执行代码格式化

完成配置之后，可以通过快捷键手动格式化当前文件。

Windows 和 Linux 下通常使用：


Shift + Alt + F

macOS 下使用：


Shift + Option + F

也可以通过命令面板执行：


Format Document

例如原始代码：

JavaScript
function add(a,b){
return a+b
}

执行 Prettier 后：

JavaScript
function add(a, b) {
  return a + b;
}

这种方式适合只想在代码编写完成后统一整理格式的开发场景。

五、开启VSCode保存时自动格式化

如果希望每次保存代码时自动执行 Prettier，可以开启：

JSON
{
  "editor.formatOnSave": true
}

同时指定 Prettier：

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

其中插件 ID 应使用：

JSON
"esbenp.prettier-vscode"

完整配置示例：

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

如果项目中只有部分语言需要保存时格式化，也可以针对语言配置：

JSON
{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

这样可以避免对不需要 Prettier 处理的文件产生影响。

六、使用.prettierrc统一项目代码规范

个人 VSCode 配置只能解决本地开发环境的问题。如果一个团队中的成员使用不同的编辑器，仅配置 VSCode 并不能保证所有人的代码格式一致。

更推荐在项目根目录创建 Prettier 配置文件。

例如：


.prettierrc

配置内容：

JSON
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false,
  "trailingComma": "es5",
  "printWidth": 100
}

这些配置分别表示：

semi：是否在语句末尾添加分号。
singleQuote：JavaScript 中优先使用单引号。
tabWidth：缩进宽度设置为 2 个空格。
useTabs：是否使用 Tab 进行缩进。
trailingComma：多行对象、数组等结构是否添加尾随逗号。
printWidth：控制代码换行参考宽度。

例如：

JavaScript
const user = {
  name: 'Tom',
  age: 18,
  address: 'Singapore'
};

项目中的开发人员只要使用同一份 Prettier 配置，就可以保持基本一致的代码格式。

七、推荐使用.prettierignore排除文件

并不是项目中的所有文件都适合使用 Prettier 格式化。

例如：


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

可以放入：


.prettierignore

示例：


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

这样执行 Prettier 时就不会处理这些目录和文件。

对于体积较大的构建产物、压缩文件以及第三方依赖目录，通常应该避免进行格式化。

八、在项目中安装Prettier

除了安装 VSCode 扩展，还可以将 Prettier 作为项目开发依赖安装。

使用 npm：

Bash
npm install --save-dev prettier

使用 pnpm：

Bash
pnpm add -D prettier

使用 Yarn：

Bash
yarn add --dev prettier

安装完成后，可以直接通过命令行执行格式化。

例如：

Bash
npx prettier --write .

其中 --write 表示直接将格式化结果写回文件。

如果只想检查代码格式，可以使用：

Bash
npx prettier --check .

两者的区别比较明显：


--write  检查并修改文件
--check  只检查，不修改文件

在 CI/CD 流程中，通常更适合使用 --check，避免构建过程中直接修改代码。

九、通过package.json配置格式化命令

为了方便团队成员执行，可以在 package.json 中添加脚本：

JSON
{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

之后运行：

Bash
npm run format

即可格式化整个项目。

检查代码格式则执行：

Bash
npm run format:check

这种方式比单纯依赖个人编辑器设置更加可靠，因为格式化规则和执行命令都能够随项目代码一起进行版本管理。

十、Vue项目中的Prettier配置

Vue 项目通常会同时涉及 .vue、.js、.ts、.css 等文件，因此建议明确配置 VSCode 的默认格式化工具。

例如：

JSON
{
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

对于 Vue 组件：

vue
 setup>
const message = 'Hello Vue';

function showMessage() {
  console.log(message);
}



  {{ message }}

保存文件后，Prettier 会按照项目配置重新调整缩进、空格和换行。

如果项目同时使用 ESLint，需要注意 ESLint 和 Prettier 的职责划分，避免两个工具针对同一个格式问题产生冲突。

十一、Prettier与ESLint如何配合

在现代前端项目中，Prettier 和 ESLint 经常一起使用。

可以简单理解为：


Prettier → 负责代码长什么样
ESLint   → 负责代码写得是否规范、是否存在问题

例如：

JavaScript
const name = "Tom"

Prettier 可以将双引号调整为项目指定的单引号：

JavaScript
const name = 'Tom';

而 ESLint 则可以检查变量未使用、潜在错误以及项目规定的编码规则。

如果两者规则发生冲突，就可能出现保存代码后反复修改的问题。因此实际项目中通常需要让 ESLint 和 Prettier 的职责保持清晰。

常见做法是让 Prettier 负责格式化，ESLint 负责代码质量检查，并通过项目配置降低规则冲突。

十二、常见问题及解决方法

1. 保存文件没有自动格式化

首先检查：

JSON
"editor.formatOnSave": true

是否已经启用。

然后确认默认格式化工具是否为：


Prettier - Code formatter

还需要检查当前文件类型是否被 Prettier 支持，以及项目配置文件是否存在格式错误。

2. Format Document找不到Prettier

可以重新检查 VSCode 扩展是否安装成功。

打开扩展管理页面搜索：


Prettier - Code formatter

如果已经安装，可以尝试禁用后重新启用扩展，或者重新加载 VSCode 窗口。

3. Prettier格式化后与项目规范不一致

优先检查项目根目录是否存在：


.prettierrc

或者：


.prettierrc.json
.prettierrc.js
.prettierrc.cjs

同时检查 VSCode 的个人配置是否覆盖了项目配置。

通常情况下，团队项目应该优先维护项目级 Prettier 配置，而不是要求每个人手动设置一套规则。

4. ESLint和Prettier互相覆盖

如果保存文件后发现格式不断变化，需要检查 ESLint 与 Prettier 的规则是否存在冲突。

尤其要关注：


引号
分号
缩进
尾随逗号
换行

这些项目最容易出现重复控制。

5. 修改代码后Git出现大量格式变化

如果首次引入 Prettier 后整个项目产生大量格式差异，不建议直接将所有格式修改与业务代码混在一个提交中。

可以先单独执行一次全项目格式化，并单独提交格式调整。后续业务提交就可以保持更清晰的 Git diff。

十三、推荐的一套基础配置

对于一般的 JavaScript、TypeScript、Vue 前端项目，可以采用类似下面的配置：

JSON
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false,
  "trailingComma": "es5",
  "printWidth": 100
}

VSCode 中则配置：

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

项目根目录再配合：


.prettierignore
.prettierrc

这样能够形成比较完整的代码格式化体系。

十四、Prettier自动格式化的实际使用建议

如果是个人项目，可以直接开启保存时格式化，让代码在编写过程中自动保持整洁。

团队项目则更建议采用“项目配置 + VSCode插件 + npm脚本 + CI检查”的组合方式：


.prettierrc
      ↓
统一格式化规则
      ↓
VSCode保存自动格式化
      ↓
npm run format
      ↓
CI执行 prettier --check

这样即使某位开发人员没有安装 VSCode Prettier 插件，项目依然可以通过命令行检查代码格式。

需要注意的是，Prettier 的目标并不是替代代码审查，也不是解决所有代码质量问题。它更适合承担统一排版和格式规范的工作。将格式问题交给工具自动处理后，开发人员可以把更多精力放在业务逻辑、性能、安全性以及代码设计上。

对于经常使用 VSCode 开发前端项目的开发者来说，配置 Prettier 后开启 formatOnSave 是一种非常实用的工作方式。代码保存的一瞬间即可完成格式整理，不需要反复手动调整缩进、空格和换行，同时结合项目级配置，还能有效降低团队协作中的格式差异。

VSCode中通过Prettier实现自动代码格式化