如何快速格式化混乱的 HTML 代码 - 极速工具箱

引言

在开发过程中，经常会遇到格式混乱的 HTML 代码：可能是从网页源码中复制的，可能是邮件模板中的，也可能是他人编写的。本文将介绍如何快速将这些混乱的代码格式化为整洁的结构。

常见混乱场景

场景一：从网页复制的代码

浏览器开发者工具复制的代码往往丢失缩进：

<div class="container"><div class="row"><div class="col-md-6"><h2>标题</h2><p>内容</p></div><div class="col-md-6"><img src="image.jpg" alt="图片"></div></div></div>

场景二：压缩后的代码

生产环境的代码被压缩成一行：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>页面</title><link rel="stylesheet" href="style.css"></head><body><div id="app"><header><nav><a href="/">首页</a><a href="/about">关于</a></nav></header><main><h1>欢迎</h1></main></div><script src="app.js"></script></body></html>

场景三：邮件模板

邮件 HTML 使用大量 table 布局，结构复杂：

<table width="100%" cellpadding="0" cellspacing="0"><tr><td><table width="600" align="center"><tr><td><table><tr><td><img src="logo.png"></td></tr><tr><td><p>邮件内容...</p></td></tr></table></td></tr></table></td></tr></table>

格式化方法

方法一：在线工具（推荐）

使用在线 HTML 格式化工具，一键完成格式化：

打开格式化工具
粘贴混乱的代码
选择缩进方式（2/4/8空格或Tab）
点击"格式化"
复制结果

优势：

无需安装软件
支持大文件
保留代码逻辑

方法二：编辑器插件

VS Code

// settings.json
{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.tabSize": 4
    }
}

WebStorm / PHPStorm

内置格式化功能：

Ctrl + Alt + L（Windows）
Cmd + Option + L（Mac）

方法三：命令行工具

# 安装 html-beautify
npm install -g js-beautify

# 格式化文件
html-beautify input.html -o output.html

# 指定缩进
html-beautify -s 4 input.html -o output.html

# 格式化并压缩
html-beautify -s 4 input.html | html-minifier --collapse-whitespace -o output.html

格式化选项说明

缩进方式

选项	说明	适用场景
Tab	制表符缩进	个人偏好
2 空格	紧凑风格	前端社区主流
4 空格	标准风格	推荐，清晰易读
8 空格	宽缩进	嵌套较少时

特殊处理

保留注释

<!-- 格式化后注释保留 -->
<div>
    <!-- 这是注释 -->
    <p>内容</p>
</div>

处理内联元素

<!-- 内联元素保持同行 -->
<p>这是一段<strong>重要</strong>的文字</p>

<!-- 块级元素换行 -->
<div>
    <p>段落一</p>
    <p>段落二</p>
</div>

处理模板语法

支持 ThinkPHP、Vue 等模板语法：

<!-- Vue 模板 -->
<div v-for="item in list" :key="item.id">
    {{ item.name }}
</div>

<!-- ThinkPHP 模板 -->
{volist name="list" id="vo"}
    <div>{$vo.title}</div>
{/volist}

批量格式化

使用脚本批量处理

#!/bin/bash
# format-html.sh

for file in *.html; do
    echo "Formatting $file..."
    html-beautify -s 4 "$file" -o "formatted_$file"
done

Node.js 脚本

const fs = require('fs');
const path = require('path');
const { html } = require('js-beautify');

const dir = './templates';

fs.readdirSync(dir).forEach(file => {
    if (file.endsWith('.html')) {
        const filePath = path.join(dir, file);
        const content = fs.readFileSync(filePath, 'utf-8');
        const formatted = html(content, { indent_size: 4 });
        fs.writeFileSync(filePath, formatted);
        console.log(`Formatted: ${file}`);
    }
});

格式化后检查

1. 验证 HTML 语法

使用 W3C Validator 检查格式后的代码是否有效。

2. 检查功能

确保格式化没有破坏：

JavaScript 事件绑定
CSS 样式应用
表单提交
链接跳转

3. 对比差异

# 使用 diff 对比
diff original.html formatted.html

# 使用 IDE 对比
# VS Code: 选择两个文件，右键 "Compare Selected"

常见问题

问题一：格式化后样式错乱

原因：CSS 选择器依赖特定空白符

解决：检查 CSS 中是否有依赖空白的选择器

/* 可能受影响的写法 */
div span { }  /* 后代选择器通常不受影响 */
div + span { }  /* 兄弟选择器不受影响 */

问题二：JavaScript 失效

原因：内联脚本中的 HTML 字符串被格式化

解决：使用 <script> 标签包裹，或使用模板字符串

<!-- 不推荐 -->
<script>
    var html = '<div>
        <p>内容</p>
    </div>';  // 语法错误
</script>

<!-- 推荐 -->
<script>
    var html = `<div>
        <p>内容</p>
    </div>`;
</script>

问题三：模板标签被破坏

原因：格式化工具不理解模板语法

解决：使用支持模板语法的工具，或手动保护特殊区域

最佳实践

开发时保持格式：从一开始就写整洁的代码
提交前格式化：使用 Git Hook 自动格式化
定期整理：每周整理一次代码格式
团队统一：使用 Prettier 等工具统一风格

总结

快速格式化 HTML 代码的关键是选择合适的工具。在线工具适合临时处理，编辑器插件适合日常开发，命令行工具适合批量处理。无论哪种方式，保持代码整洁都是专业开发者的基本素养。

引言