SublimeText如何自动格式化HTML
在使用SublimeText进行前端开发时，手写HTML代码后经常会出现缩进混乱、结构不清晰的问题，手动调整格式不仅耗时还容易出错。通过配置相关插件，我们可以让SublimeText实现HTML代码的自动格式化，大幅提升开发效率。
前提条件
首先需要确保你的SublimeText已经安装了Package Control插件，这是SublimeText管理第三方插件的核心工具。如果还没有安装，可以通过以下步骤操作：
- 打开SublimeText，按下快捷键Ctrl+`（反引号），打开控制台
- 复制官方提供的Package Control安装命令，粘贴到控制台中回车执行
- 等待安装完成后重启SublimeText即可
安装HTML格式化插件
目前常用的HTML格式化插件是HTML-CSS-JS Prettify，它支持HTML、CSS、JavaScript等多种前端代码的格式化，适配性较好。安装步骤如下：
- 按下快捷键Ctrl+Shift+P，打开命令面板
- 输入
Package Control: Install Package并回车 - 在弹出的插件搜索框中输入
HTML-CSS-JS Prettify，找到对应插件后点击安装 - 等待安装完成，底部状态栏会提示安装成功
配置自动格式化规则
插件安装完成后，我们可以根据自身编码习惯调整格式化规则，避免格式化后的代码不符合预期。配置步骤如下：
- 打开命令面板，输入
HTML-CSS-JS Prettify: Set Prettify Preferences并回车 - 会打开一个名为
prettify.json的配置文件，里面包含了所有格式化相关的参数 - 常见的需要调整的参数如下：
{
// 缩进使用的空格数，通常设置为2或4
"indent_size": 2,
// 缩进方式，true为使用空格缩进，false为使用Tab缩进
"indent_char": " ",
// 是否保留换行符
"preserve_newlines": true,
// 最大连续换行数，超过该数量的连续换行会被合并
"max_preserve_newlines": 2,
// 是否自动格式化HTML标签的属性，使其每个属性单独占一行
"wrap_attributes": "auto",
// 是否格式化内联的CSS和JS代码
"format_on_save": false
}修改完成后保存文件，配置即可生效。如果需要恢复默认配置，删除prettify.json文件后重启SublimeText，插件会自动生成默认配置。
使用自动格式化功能
配置完成后，就可以对HTML代码进行格式化了，有两种常用的触发方式：
手动触发格式化
- 打开需要格式化的HTML文件
- 按下快捷键Ctrl+Shift+H，即可快速格式化当前文件的HTML代码
- 如果只需要格式化选中的部分代码，可以先选中目标代码块，再按下Ctrl+Shift+H，插件只会格式化选中区域的内容
保存时自动格式化
如果希望每次保存HTML文件时自动触发格式化，可以修改插件配置：打开prettify.json文件，将"format_on_save"的值改为true，保存后重启SublimeText。之后每次按下Ctrl+S保存HTML文件时，插件都会自动完成格式化操作。
格式化效果示例
以下是格式化前后的代码对比，可以看到格式化后的代码结构更清晰，缩进层级明确：
格式化前的混乱HTML代码：
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试页面</title></head><body><div class="container"><h1>标题</h1><p>这是一段测试文本</p><ul><li>列表项1</li><li>列表项2</li></ul></div></body></html>
格式化后的规范HTML代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试页面</title>
</head>
<body>
<div class="container">
<h1>标题</h1>
<p>这是一段测试文本</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
</div>
</body>
</html>常见问题解决
- 如果按下快捷键没有反应，检查是否安装了
HTML-CSS-JS Prettify插件，或者尝试重启SublimeText - 如果格式化后的代码缩进不符合预期，回到
prettify.json配置文件中调整indent_size和indent_char参数 - 如果格式化报错，检查HTML代码是否有语法错误，比如未闭合的<div>标签、缺少引号的属性等，修正语法错误后再尝试格式化
SublimeText插件HTML自动格式化HTML-CSS-JS_Prettify代码美化Package_Control