可在 VS Code 中通过安装 Prettier 扩展、启用保存时自动格式化、配置 .prettierrc 文件、使用快捷键手动格式化及设置语言专属格式化行为，实现保存即对齐的一键排版。

如果您在 VS Code 中编写代码时希望保存文件时自动格式化并实现代码对齐，可通过配置 Prettier 实现一键排版。以下是具体操作方法：

一、安装 Prettier 扩展

Prettier 是一个流行的代码格式化工具，支持 JavaScript、TypeScript、CSS、HTML、JSON 等多种语言。VS Code 需先安装官方 Prettier 扩展以启用格式化功能。

1、点击左侧活动栏的扩展图标（或按 Ctrl+Shift+X）。

2、在搜索框中输入 Prettier - Code formatter。

3、在搜索结果中找到由 Esben Petersen 发布的官方扩展，点击“安装”按钮。

二、设置保存时自动格式化

启用自动格式化需开启 VS Code 的“保存时格式化”功能，并指定默认格式化工具为 Prettier，确保每次保存都触发对齐与缩进标准化。

1、按下 Ctrl+, 打开设置界面。

2、在右上角搜索框中输入 format on save。

3、勾选 Editor: Format On Save 选项。

4、再次搜索 default formatter。

5、点击 Editor: Default Formatter 右侧下拉菜单，选择 esbenp.prettier-vscode。

三、创建项目级 Prettier 配置文件

为保障团队协作一致性及多语言适配，建议在项目根目录添加 .prettierrc 配置文件，明确定义缩进、引号、换行等对齐规则。

1、在项目根文件夹中新建文本文件，命名为 .prettierrc。

2、写入以下 JSON 内容（可根据需要调整）：

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

3、保存该文件，VS Code 将自动识别并应用此配置进行格式化。

四、手动触发格式化快捷键

当自动保存未启用或需即时排版时，可使用快捷键强制执行 Prettier 格式化，适用于当前打开的文件或选中代码块。

1、聚焦编辑器窗口，确保光标位于待格式化代码区域。

2、Windows/Linux 用户按 Shift+Alt+F；macOS 用户按 Shift+Option+F。

3、若弹出格式化工具选择提示，确认选择 Prettier。

五、配置特定语言的格式化行为

某些语言（如 Vue 或 Markdown）可能需要额外声明格式化支持，避免 Prettier 跳过非标准文件类型。

1、打开 VS Code 设置（Ctrl+,），切换到“工作区”标签页。

2、搜索 files.associations，点击“在 settings.json 中编辑”。

3、在 settings.json 中添加如下配置项：

"files.associations": {
  "*.vue": "vue",
  "*.md": "markdown"
}

4、再搜索 editor.defaultFormatter，为对应语言单独指定 Prettier：

"[vue]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[markdown]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}