1、安装Prettier插件并设置为默认格式化工具；2、启用保存时自动格式化；3、配置项目级.prettierrc规则文件；4、可选配置ESLint实现代码规范检查。
如果您在编写代码时希望保持一致的代码风格，可以借助 VSCode 插件实现自动格式化功能。通过安装合适的插件并进行相应配置，可以让代码在保存时自动美化。以下是完成此任务的具体步骤。
本文运行环境：Dell XPS 13，Windows 11
一、安装 Prettier 插件
Prettier 是一个流行的代码格式化工具，支持多种语言，能够统一团队的代码风格。安装该插件是实现自动格式化的第一步。
1、打开 VSCode 编辑器，点击左侧活动栏中的扩展图标（四个方块组成的图形）。
2、在搜索框中输入 Prettier - Code formatter。
3、找到由 Prettier 官方发布的插件，点击“安装”按钮完成安装。
二、设置默认格式化工具
为了确保 VSCode 在保存文件时调用 Prettier 进行格式化，需要将其设为默认的格式化程序。
1、使用快捷键 Ctrl+Shift+P 打开命令面板。
2、输入并选择 "Preferences: Open Settings (JSON)" 以编辑设置文件。
3、在 settings.json 文件中添加以下配置项：
"editor.defaultFormatter": "esbenp.prettier-vscode"
4、保存文件后，该设置即刻生效。
三、启用保存时自动格式化
启用保存时自动格式化功能，可以在每次保存代码时自动应用格式规则，提升开发效率。
1、打开命令面板（Ctrl+Shift+P），输入并选择 "Preferences: Open Settings (UI)"。
2、在搜索框中输入 format on save。
3、勾选 "Editor: Format On Save" 选项。
或在 settings.json 中手动添加：
"editor.formatOnSave": true
四、配置项目级 Prettier 规则
在团队协作中，通常需要统一格式化规则。可以通过在项目根目录创建配置文件来自定义 Prettier 行为。
1、在项目根目录下创建名为 .prettierrc 的 JSON 文件。
2、在文件中写入自定义格式规则，例如：
{
"semi": false,
"singleQuote": true,
"trailingComma": "es5"
}
3、保存后，VSCode 将根据此配置格式化代码。
五、安装并配置 ESLint 插件（可选）
对于 JavaScript 和 TypeScript 项目，结合 ESLint 可实现更严格的代码规范检查与修复。
1、在扩展市场中搜索并安装 ESLint 插件。
2、在 settings.json 中添加：
"eslint.format.enable": true
3、若项目中已有 .eslintrc 配置文件，则插件会自动读取规则。
4、可在保存时自动修复问题，需确保 ESLint 服务已正确启动。
