一键美化代码：VS Code 中 Prettier 格式化配置全攻略

在现代前端开发中，代码的可读性与一致性至关重要。而 Prettier 作为一款“有主见”的代码格式化工具，凭借其强大的自动格式化能力，已成为众多开发者的首选。配合 Visual Studio Code（VS Code）使用，只需简单配置，即可实现保存即格式化，大幅提升开发效率与团队协作体验。

安装 Prettier 插件

首先，在 VS Code 的扩展市场中搜索并安装 Prettier - Code formatter。安装完成后，建议将其设为默认格式化工具。打开设置（Ctrl+, 或 Cmd+,），搜索 “default formatter”，选择 Prettier，并勾选 “Format On Save”（保存时格式化），这样每次保存文件时，代码都会自动美化。

配置格式化规则

Prettier 的默认配置已相当合理，但你仍可根据项目需求自定义规则。最常见的方式是在项目根目录下创建 .prettierrc 文件（支持 JSON、YAML 等格式）。例如：

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80
}

上述配置启用了分号、单引号、2 个空格缩进、ES5 风格的尾随逗号，并限制每行最大宽度为 80 字符。

与 ESLint 协同工作（可选）

若项目同时使用 ESLint，建议安装 eslint-config-prettier 和 eslint-plugin-prettier，以关闭 ESLint 中与 Prettier 冲突的规则，避免格式冲突。通过这种方式，ESLint 负责代码质量检查，Prettier 专注代码风格，各司其职。

小贴士

• 可通过右键菜单选择 “Format Document With...” 手动指定 Prettier 格式化当前文件。
• 若某些文件不想被格式化，可在 .prettierignore 中添加路径，如 dist/、node_modules/ 等。

配置好 Prettier 后，你的代码将始终保持整洁统一，告别手动调整缩进与换行的烦恼。让格式化交给工具，开发者只需专注逻辑与创意——这才是高效开发的正确打开方式。