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

一、安装 Prettier 官方扩展

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

1. 打开 VS Code，点击左侧活动栏的扩展图标（或按下快捷键 Ctrl + Shift + X / Cmd + Shift + X）。
2. 在顶部搜索框中输入 Prettier - Code formatter。
3. 在搜索结果中认准发布者为 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"
}

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

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

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

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

总结

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

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

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