vscode prettier保存自动格式化
时间: 2025-06-10 11:54:24 浏览: 39
### 配置 VSCode 使用 Prettier 自动格式化代码
#### 安装 Prettier 插件
确保已安装 Prettier 插件,在 Visual Studio Code 的扩展市场中搜索并安装 `Prettier - Code formatter`。
#### 设置自动保存文件
为了使每次离开编辑区域时都能触发保存操作,需调整自动保存选项。通过设置界面或直接修改配置文件实现此功能:
- **图形界面方式**:依次点击左下角齿轮图标>设置>在顶部搜索栏输入 `files.autoSave` 并将其值设为 `onFocusChange`[^3]。
- **JSON 文件方式**:编辑 `.vscode/settings.json` 或者全局用户设置中的 `settings.json` 添加如下字段:
```json
{
"files.autoSave": "onFocusChange"
}
```
#### 设定默认格式化工具体
指定 Prettier 成为默认使用的代码格式化工具。这同样可以通过两种途径完成:
- **图形界面方式**:前往设置页面,于搜索框内键入 `editor.defaultFormatter` ,随后选取 `esbenp.prettier-vscode` 作为默认格式化程序[^4]。
- **JSON 文件方式**:向 `settings.json` 中追加相应配置项:
```json
{
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
```
#### 启用保存时自动格式化
为了让 Prettier 在每次保存文档的时候执行格式化动作,需要开启相应的开关:
- **图形界面方式**:利用设置面板里的查找功能定位至 `editor.formatOnSave` 进行勾选确认启用该特性[^1]。
- **JSON 文件方式**:继续完善 `settings.json` 文件内容如下所示:
```json
{
"editor.formatOnSave": true,
"prettier.requireConfig": false // 如果不需要特定的 prettier.config.js 则可保持此项关闭状态
}
```
以上步骤完成后,每当用户聚焦变化导致文件被自动保存或是手动保存时,VSCode 将会调用 Prettier 对当前编辑的内容按照预定义规则实施格式化处理。
阅读全文
相关推荐


















