VSCode的HTML格式化功能可提升代码可读性,支持右键或快捷键Shift+Alt+F手动格式化,推荐设置Prettier或内置工具为默认格式化程序,通过settings.json配置默认 formatter,启用“format on save”实现保存时自动格式化,并可用.prettierrc文件自定义缩进、引号等规则。

VSCode 的 HTML 格式化功能可以帮助你快速整理代码结构,让标签嵌套清晰、缩进统一,提升可读性。这个功能开箱即用,只需简单操作就能生效。
自动格式化 HTML 文件
当你编辑一个 .html 文件时,VSCode 通常会自动识别语言模式,并启用默认的格式化工具。要手动触发格式化:
- 右键点击编辑器中的 HTML 内容,选择“格式化文档”
- 或使用快捷键:Shift + Alt + F(Windows / Linux),Shift + Option + F(Mac)
如果未指定默认格式化工具,VSCode 会提示你选择一个。推荐选择内置的 Prettier 或 HTML Language Features。
设置默认格式化工具
为避免每次都要选择,可以设定默认的格式化程序:
立即学习“前端免费学习笔记(深入)”;
- 打开设置(Ctrl + ,)
- 搜索“Default Formatter”
- 找到 “Editor: Default Formatter”,设置为 esbenp.prettier-vscode 或 vscode.html-language-features
也可以在项目根目录添加 .vscode/settings.json 文件,指定格式化规则:
网新企业网站管理系统是专业为个人和企业网站建设而开发的一款智能化程序。该程序基于ASP+ACCESS环境开发,拥有完善的网站前台和后台全智能化管理功能,完全由后台操作(如添加、修改网站基本信息、产品、企业新闻动态等)静态生成前台界面HTML格式网页文件,是个人和企业智能化网站建设首选!
{
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
保存时自动格式化
提高效率的一个常用做法是开启“保存即格式化”:
- 进入设置 → 搜索 “format on save”
- 勾选 Editor: Format On Save
这样每次保存文件(Ctrl + S),HTML 代码就会自动被整理整齐。
自定义格式化规则(可选)
如果你使用 Prettier,可在项目中创建 .prettierrc 文件来控制格式化行为:
{
"singleQuote": true,
"tabWidth": 2,
"semi": false,
"printWidth": 80
}
这些配置会影响 HTML(以及 JS/JSX)的格式化效果,比如缩进空格数、是否使用分号等。
基本上就这些。VSCode 的 HTML 格式化功能不复杂但容易忽略,合理设置后能显著提升编码体验。










