VS Code怎么配置Prettier实现JS保存时自动美化

作者：开源拾贝

时间：2026-10-30

详细讲解如何在 VS Code 中配置 Prettier 插件，实现 JavaScript 文件在按下保存键时自动格式化美化。涵盖扩展安装、settings.json 配置、项目级规则文件制定及常见冲突排查。

文章目录

分类：开发工具 / 前端配置目标环境：Visual Studio Code (各主流平台) 适用语言：JavaScript / ECMAScript

VS Code怎么配置Prettier实现JS保存时自动美化 — 图 1：VS Code 结合 Prettier 实现 JavaScript 保存时自动格式化的工作链路

在 Visual Studio Code 中让 JavaScript 代码在按下保存（Ctrl + S 或 Cmd + S）时自动美化，最直接且标准的做法由两个关键部分组成：安装官方 Prettier 扩展，并在编辑器的配置文件 settings.json 中把 Prettier 设为 JavaScript 的默认格式化程序，同时开启 editor.formatOnSave。配置完成后，无需每次手动调出格式化菜单，代码便能在保存瞬间根据设定的规则自动规整。

一、安装 Prettier 官方扩展

VS Code 本身内置了基础的 JavaScript 格式化能力，但它的规则定制能力和在前端工程中的通用性不及 Prettier。要在 VS Code 中使用 Prettier，首先需要安装官方提供的扩展：

打开 VS Code，点击左侧活动栏的扩展图标（或按下快捷键 Ctrl + Shift + X / Cmd + Shift + X）。
在顶部搜索框中输入 Prettier - Code formatter。
在搜索结果中认准发布者为 Prettier（扩展唯一标识符为 esbenp.prettier-vscode），点击安装 (Install)。

安装完成后无需重启编辑器。此时扩展已就绪，但由于 VS Code 默认并不会在保存时执行任何格式化程序，且可能存在其他同类插件，我们需要明确告知编辑器“在何时执行”以及“由谁来执行”。

二、配置 settings.json 开启保存时自动格式化

虽然可以通过图形化界面（Preferences: Open Settings (UI)）勾选，但通过 settings.json 直接配置是最精确、不易遗漏的方式，也便于在团队间共享配置。

1. 打开 settings.json

在 VS Code 中按下 Ctrl + Shift + P（macOS 为 Cmd + Shift + P）调出命令面板，输入 Preferences: Open User Settings (JSON) 并回车。如果只想对当前项目生效，可以选择 Preferences: Open Workspace Settings (JSON)。

2. 添加针对 JavaScript 的核心配置项

在打开的 JSON 文件中，添加以下键值对。建议使用针对 [javascript] 语言作用域的配置，这样既保证了 JS 代码准确由 Prettier 处理，又不会干扰其他可能需要专门格式化工具的文件类型（如 Markdown、Python 等）：

{
  // 全局开启保存时自动格式化
  "editor.formatOnSave": true,

  // 针对 JavaScript 文件明确指定 Prettier 为默认格式化器
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },

  // 如果项目同时包含 JavaScript React (JSX)，建议一同配置
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

配置中的两项核心属性含义如下：

editor.formatOnSave：布尔值，设为 true 即表示每次文件保存到磁盘时，VS Code 都会自动触发当前语言绑定的格式化动作。
editor.defaultFormatter：字符串值，取值为 esbenp.prettier-vscode。这是 Prettier 插件在 VS Code 体系内的唯一标识，防止 VS Code 在存在多个代码插件时因无法抉择而弹窗询问或静默失效。

三、建立项目级规则配置文件（.prettierrc）

仅配置 VS Code 的 settings.json 虽然能够实现格式化，但每个人的本地环境可能存在缩进空格数、分号习惯等差异。Prettier 官方推荐在工程根目录下建立专门的配置文件。一旦存在项目配置文件，Prettier 扩展会自动优先读取该文件，从而保证整个团队输出完全一致的风格。

在项目的根目录下创建一个名为 .prettierrc 或 .prettierrc.json 的文件，内容示例如下：

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false,
  "trailingComma": "es5",
  "printWidth": 80,
  "arrowParens": "avoid"
}

配置字段	示例值	作用说明
`semi`	`true`	语句末尾自动补充标准分号。设为 `false` 则移除语句尾部分号。
`singleQuote`	`true`	将 JavaScript 中的字符串强制使用单引号，替代双引号。
`tabWidth`	`2`	每个缩进层级占用的空格数量，通常前端推荐设置为 2。
`trailingComma`	`"es5"`	在 ES5 支持的对象、数组等多行数据结构末尾追加逗号，降低 Git 差异噪音。
`printWidth`	`80`	单行代码推荐最大字符宽度，超出后 Prettier 会自动换行并折叠排版。
`arrowParens`	`"avoid"`	当箭头函数只有一个参数时省略括号，例如 `x => x * 2`。

四、常见问题排查与协同机制

在实际配置过程中，偶尔会出现“按了保存却没有任何变化”或“刚保存完代码又被其他插件改回去”的现象。以下是最常见的诱因及排查步骤：

1. 保存时代码完全没有反应

检查语言模式是否识别为 JavaScript：查看 VS Code 底部状态栏右下角的语言模式，确认显示为 JavaScript，而不是纯文本或其他语言。
检查格式化器是否发生冲突：在编辑器中右键点击代码任意位置，选择“使用...格式化文档” (Format Document With...)。在弹出的下拉列表中查看是否有多个格式化插件；点击底部的“配置默认格式化程序...” (Configure Default Formatter...)，直接选中 Prettier - Code formatter 重新绑定。
检查语法是否存在致命错误：Prettier 依赖抽象语法树（AST）解析代码。如果 JavaScript 存在未闭合的括号等严重语法报错，Prettier 会为了保护代码完整性而主动拒绝格式化。可以打开 VS Code 底部的“输出”面板，下拉切换到“Prettier”查看具体解析错误日志。

注意与 ESLint 的职责冲突

如果项目中同时启用了 ESLint 且配置了 eslint.autoFixOnSave，ESLint 的代码风格规则（如缩进、引号）可能会与 Prettier 发生“拉锯打架”，导致保存时代码闪烁或报错。行业标准实践是使用 eslint-config-prettier 关闭 ESLint 中所有与排版冲突的样式规则，让 Prettier 专注负责外观格式化，ESLint 专注负责代码质量与逻辑检查。

总结

配置 VS Code 实现 JavaScript 保存时自动美化，关键在于梳理清楚插件与编辑器的关系。只要完成了以下三点，整个工作流便能顺畅运行：

通过扩展市场装好 esbenp.prettier-vscode；
在 settings.json 中把 [javascript] 的 editor.defaultFormatter 指定为 Prettier，并把 editor.formatOnSave 设为 true；
在项目根目录放置 .prettierrc 文件统一团队格式化规则。

完成以上配置后，日常开发只需专注于逻辑实现，每次随手按下保存，格式化工具就会自动完成规范排版，大幅提升代码阅读与协作效率。