VS Code HTML 格式化不换行问题解决方案

shiy720

VS Code HTML 格式化不换行问题解决方案

在 VS Code 中，如果 HTML 格式化不按照你期望的方式换行，可以通过以下几种方法解决：

方法一：调整默认格式化设置
1. 打开 VS Code 设置 (`Ctrl + ,` 或 `Cmd + ,`)
2. 搜索 `html.format`
3. 调整以下设置：

1.   "html.format.wrapLineLength": 0,  // 0 表示不限制行长度
   
2. 
   
3.    "html.format.unformatted": "",    // 空字符串表示所有内容都格式化
   
4. 
   
5.    "html.format.contentUnformatted": "" // 空字符串表示内容也格式化

复制代码

方法二：使用 Prettier 扩展

1. 安装 Prettier 扩展
2. 在设置中配置：

1. "prettier.printWidth": 80,  // 设置换行宽度
   
2. 
   
3.    "prettier.htmlWhitespaceSensitivity": "css"

复制代码

3. 设置 Prettier 为默认格式化工具：

1.   "[html]": {
   
2. 
   
3.      "editor.defaultFormatter": "esbenp.prettier-vscode"
   
4. 
   
5.    }

复制代码

## 方法三：使用 JS-Beautify
1. 安装 JS-Beautify 扩展
2. 配置 `.jsbeautifyrc` 文件：

1. {
   
2. 
   
3.      "html": {
   
4.        "wrap_line_length": 0,
   
5.        "wrap_attributes": "force-expand-multiline"
   
6.      }

复制代码

## 方法四：自定义格式化规则
在项目根目录创建 `.vscode/settings.json` 文件：

1. {
   
2.   "html.format.wrapLineLength": 0,
   
3.   "html.format.wrapAttributes": "force-expand-multiline",
   
4.   "html.format.indentInnerHtml": true,
   
5.   "html.format.preserveNewLines": true
   
6. }

复制代码

## 临时解决方案
如果只是临时需要，可以在格式化时按住 `Shift + Alt + F` 同时按住 `Shift` 键，这有时会提供不同的格式化选项。
选择哪种方法取决于你使用的格式化工具和个人偏好。Prettier 通常是目前最流行的选择。