vscode配置保存自动格式化
时间: 2023-03-06 14:22:05 浏览: 674
要在VSCode中保存文件时自动进行格式化,您可以按照以下步骤进行配置:
1. 打开VSCode并打开您要编辑的项目文件夹。
2. 点击左侧边栏最底部的“设置”按钮。
3. 在搜索栏中输入“save”,然后选择“首选项:在保存时运行格式化程序”选项。
4. 将此选项打开,这将使得在每次保存文件时都会自动进行格式化。
现在,每当您保存一个文件时,VSCode都会自动运行格式化程序,使您的代码保持整洁和易于阅读。
相关问题
vscode prettier保存自动格式化
### 配置 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 对当前编辑的内容按照预定义规则实施格式化处理。
vscode配置vue自动格式化
### 配置VSCode中Vue文件的自动格式化
为了实现VSCode中的Vue文件自动格式化,安装Prettier扩展是一个有效的方法[^1]。通过设置`settings.json`可以自定义配置项来满足特定需求。
对于希望启用保存时自动格式化的开发者来说,在工作区或用户级别的`settings.json`里加入如下配置能够达成目的:
```json
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[vue]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
```
上述JSON片段指定了默认格式化工具有限于Vue文件类型的特殊规则,并启用了保存文档时触发自动格式化功能[^2]。
除了编辑器内置支持外,还可以利用Vetur插件增强对Vue开发的支持。它提供了语法高亮、Emmet缩写展开以及智能感知等功能之外也包含了基本的代码格式化能力。要激活此特性同样需调整VSCode全局或项目本地配置文件内的参数设定:
```json
{
"vetur.format.enable": true,
"vetur.format.defaultFormatter.html": "prettier",
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatter.ts": "vscode-typescript",
"vetur.format.defaultFormatter.css": "prettier",
"vetur.format.defaultFormatter.postcss": "prettier",
"vetur.format.defaultFormatter.scss": "prettier",
"vetur.format.defaultFormatter.less": "prettier",
"vetur.format.defaultFormatter.stylus": "stylus-supremacy",
"vetur.format.defaultFormatterOptions": {
"prettier": {
"singleQuote": false,
"semi": true
},
"prettyhtml": {
"printWidth": 100,
"wrapAttributes": "auto",
"sortAttributes": true
}
}
}
```
这段配置不仅开启了Vetur自带的格式化选项还设置了不同语言部分所使用的具体工具及其偏好选项[^3]。
阅读全文
相关推荐
















