VSCode中HTML自动格式化怎么设置_VSCode中HTML自动格式化设置指南

开启保存时自动格式化并选择Prettier为默认工具，可实现HTML代码自动对齐；通过设置“Editor: Format On Save”、安装Prettier扩展及配置规则如缩进和引号，确保代码整洁。

VSCode中HTML自动格式化功能可以帮助你保持代码整洁，提升开发效率。只需要简单配置，就能实现保存时或输入时自动格式化HTML代码。

启用保存时自动格式化

最常用的方式是设置在保存文件时自动格式化代码。这样你无需手动操作，每次保存都会自动调整格式。

• 打开VSCode设置界面：点击左下角齿轮图标，选择“设置”
• 搜索“format on save”
• 勾选Editor: Format On Save选项

开启后，每次按下 Ctrl+S（或 Cmd+S）保存HTML文件时，代码会自动格式化。

选择合适的格式化工具

VSCode默认使用内置的HTML格式化器，大多数情况下已足够使用。如需更强大功能，可安装扩展如Prettier。

立即学习“前端免费学习笔记（深入）”；

• 前往扩展市场（左侧活动栏拼图图标）
• 搜索并安装Prettier - Code formatter
• 安装完成后，将其设为默认格式化工具

设置默认格式化工具方法：

• 右键编辑器中的HTML文件，选择“格式化文档时使用...”
• 选择“Prettier”并勾选“设为默认”

自定义HTML格式化规则

如果想调整缩进、标签换行等细节，可以添加配置项。

比格设计

比格设计是135编辑器旗下一款一站式、多场景、智能化的在线图片编辑器

124

查看详情

在项目根目录创建或修改 .prettierrc 文件：

或者在VSCode设置中搜索“html format”，可调整如下选项：

• Wrap Line Length：控制每行最大长度
• Unwrap Tags：指定不需要换行的标签
• Indent Inner HTML：是否对body、head等内容缩进

快捷键手动格式化

即使未开启自动保存格式化，也可随时手动执行。

• 全选代码：Ctrl+A（或Cmd+A）
• 执行格式化：Shift+Alt+F（Windows）或 Shift+Option+F（Mac）

若提示“找不到格式化程序”，请确认已安装Prettier或启用内置HTML格式化器。

基本上就这些。只要开启保存格式化并选好工具，HTML代码就能始终保持整齐。不复杂但容易忽略细节，比如默认格式化器的选择和项目级配置。

以上就是VSCode中HTML自动格式化怎么设置_VSCode中HTML自动格式化设置指南的详细内容，更多请关注php中文网其它相关文章！