VSCodeHTML格式化设置教程详解

想让HTML代码始终整洁规范、告别手动调整缩进和换行的繁琐操作？只需在VSCode中简单开启“保存时自动格式化”，安装并设为默认的Prettier扩展，再按需配置缩进宽度、引号风格等规则，就能在每次Ctrl+S（或Cmd+S）保存时自动完成专业级代码美化——无需复杂操作，却能显著提升编码效率与协作体验。

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格式化规则

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

在项目根目录创建或修改 .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代码就能始终保持整齐。不复杂但容易忽略细节，比如默认格式化器的选择和项目级配置。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~