配置Prettier实现代码自动格式化:1. 安装Prettier插件;2. 开启保存时自动格式化;3. 设置Prettier为默认格式化工具;4. 创建.prettierrc文件定义项目规则,统一团队代码风格。

在使用 VS Code 开发项目时,借助 Prettier 插件可以轻松实现代码的自动格式化,提升代码可读性和团队协作效率。只需要简单配置,就能在保存文件时自动美化代码。
安装 Prettier 插件
打开 VS Code,进入扩展商店(快捷键 Ctrl+Shift+X),搜索 Prettier - Code formatter,选择下载量高、维护活跃的官方插件并安装。
启用保存时自动格式化
为了让代码在保存时自动格式化,需要开启 VS Code 的自动格式化功能:
- 打开设置(Ctrl+,)
- 搜索 format on save
- 勾选 Editor: Format On Save
也可以在 settings.json 中手动添加配置:
"editor.formatOnSave": true设置 Prettier 为默认格式化工具
确保 Prettier 被识别为当前项目的默认格式化程序:
- 右键点击代码文件,选择“格式化文档时使用...”
- 选择 Prettier
或者在 settings.json 中指定:
"editor.defaultFormatter": "esbenp.prettier-vscode"项目级配置(.prettierrc)
在项目根目录创建 .prettierrc 文件,自定义格式化规则,例如:
{"semi": false,
"singleQuote": true,
"trailingComma": "es5"
}
这样团队成员都能遵循统一的代码风格。
基本上就这些。配置完成后,每次保存代码都会自动按规则格式化,省时又规范。不复杂但容易忽略细节。










