Prettier插件支持五种VSCode格式化方式:一、快捷键Shift+Option+F;二、命令面板选Prettier;三、启用保存时自动格式化;四、终端执行npx prettier --write批量处理;五、多光标选中区域后格式化。

如果您在使用 VSCode 编辑代码时希望统一风格并快速应用标准化格式,Prettier 插件可提供一键式自动格式化能力。以下是实现该功能的多种操作方式:
本文运行环境:MacBook Air,macOS Sequoia。
一、通过快捷键触发格式化
VSCode 默认为 Prettier 配置了全局快捷键,可在当前打开的文件中立即执行格式化,无需手动调用命令面板。
1、确保当前文件已保存且处于编辑焦点状态。
2、按下 Shift + Option + F(macOS)或 Shift + Alt + F(Windows/Linux)。
3、等待右下角状态栏短暂显示“Formatting with Prettier”提示。
二、通过命令面板执行格式化
当快捷键被其他插件覆盖或自定义禁用时,可通过命令面板精准调用 Prettier 的格式化功能。
1、按下 Cmd + Shift + P(macOS)或 Ctrl + Shift + P(Windows/Linux)打开命令面板。
2、输入 Format Document With... 并回车。
3、在弹出的提供者列表中选择 Prettier。
三、配置保存时自动格式化
启用此设置后,每次保存文件时 VSCode 将自动调用 Prettier 对整个文档进行格式化,避免遗漏手动操作。
1、打开 VSCode 设置(Cmd + ,)。
2、搜索 format on save。
3、勾选 Editor: Format On Save 选项。
4、确保工作区或用户设置中已将 editor.defaultFormatter 设为 esbenp.prettier-vscode。
四、批量格式化工作区全部文件
借助终端命令与 Prettier CLI 结合 VSCode 内置终端,可对整个项目目录下的支持文件执行统一格式化。
1、在 VSCode 中打开集成终端(Ctrl + `)。
2、执行命令:npx prettier --write "**/*.{js,jsx,ts,tsx,css,scss,html,json}"。
3、确认终端输出中每行末尾出现 formatted 字样,表示该文件已被成功处理。
五、使用多光标选择区域格式化
针对仅需调整部分代码块而非整页的情况,可通过多光标选中目标范围,再触发局部格式化。
1、按住 Option(macOS)或 Alt(Windows/Linux),点击多个需要格式化的起始位置以创建多个光标。
2、拖拽任一光标选中对应代码段,确保所有光标覆盖区域一致。
3、按下 Shift + Option + F(macOS)或 Shift + Alt + F(Windows/Linux)。










