如何使用VS Code对无缩进HTML代码进行结构化规范排版

不用折腾复杂配置，不管装不装扩展都能把无缩进的乱序HTML整理成层级清晰的规范格式。

不装扩展的原生方法 #

VS Code本身就自带HTML格式化能力，不用下载任何插件就能搞定基础排版：

• 打开你要处理的无格式HTML文件，按Ctrl+A（macOS系统按Cmd+A）全选所有代码
• 直接按格式化快捷键Shift+Alt+F（macOS系统按Shift+Option+F），第一次使用如果弹框提示选择格式化器，选内置的「HTML Language Features」即可，按完会自动按照标签嵌套层级添加缩进、整理换行
• 要是快捷键按了没反应，按Ctrl+,（macOS系统按Cmd+,）打开设置页调整基础配置：
  • 搜索Tab Size可以修改缩进宽度，常用配置为2空格或者4空格，按自己使用习惯选择即可
  • 搜索Insert Spaces可以选择用空格缩进还是Tab字符缩进
  • 搜索Format On Save勾选后，每次保存文件会自动完成排版，不用每次手动触发快捷键
• 如果排版出来的格式错乱，先检查HTML有没有未闭合标签、语法写错的问题，语法异常时工具无法正确识别DOM层级，自然无法输出正确的排版结果。

装扩展的增强方案 #

如果原生格式化满足不了需求（比如HTML里混写了大量内嵌JS/CSS、需要适配团队自定义排版规则），装对应扩展就能实现更灵活的效果：

• 绝大多数通用场景直接装Prettier - Code formatter即可，在扩展面板搜索名称点击安装就行。装完之后触发格式化时选择Prettier作为默认格式化器，它对纯HTML、内嵌CSS/JS的排版一致性更好，规则统一不用反复调整
• 有高度自定义排版需求可以装Beautify扩展，支持单独配置HTML标签是否换行、属性达到多少字符时折行、空标签是否自闭合等细节规则，适配各种定制化的编码规范
• 装完第三方格式化工具后，记得去设置里搜索Editor: Default Formatter，把你常用的格式化工具设为默认，避免按快捷键时调用到不符合预期的格式化程序。

效果对照：
初始无格式状态为所有代码无缩进、挤在一起，没有明确层级：

排版完成后嵌套标签对应匹配缩进，结构一目了然：

内容的提问来源于stack exchange，提问作者eusataf