HTML 格式化工具

大多数 HTML 都能容忍格式化工具随意重排空白——在 `<div>`、`<p>` 这类块级元素之间多加缩进不会有任何可见影响,因为浏览器在渲染时会把这类元素之间连续的空白折叠起来。有三种特定情况完全打破了这个假设:`<pre>` 内部的内容会把每一个空格和换行都按字面渲染,和写的一模一样;`<textarea>` 对其内容的处理方式相同,因为它本来就是要精确还原用户可编辑的文本;而任何在 CSS 里带有 `white-space: pre` 的元素,也继承了同样的字面处理方式。一个在这些代码块内部重排空白的格式化工具,改变的不只是源码看起来的样子,而是页面实际显示的内容——这正是为什么这个格式化工具会完全不去触碰它们,而不是套用通常的缩进规则。

紧挨着文本的行内元素是一种更微妙的情况:两个行内元素之间的一个空格有时在视觉上是有意义的——比如两个分别包在独立 `<span>` 标签里的单词之间的空隙——所以这个格式化工具在处理行内内容时刻意保持保守,宁愿把有歧义的空白原样保留,也不愿冒着折叠掉一个真正起视觉作用的空格的风险。

一个组装成单个 HTML 文件的页面,通常会把自己的 CSS 嵌在 `<style>` 代码块里,把自己的 JavaScript 嵌在 `<script>` 代码块里,一个只理解 HTML 标签的格式化工具,要么会把这些嵌入的代码原样留成一整块未格式化的内容,要么更糟——把大括号和分号当成 HTML 语法而弄乱它们。把这些代码块的内容分别交给真正的 CSS 解析器和真正的 JavaScript 解析器处理,意味着整个文件——标记、样式和行为——都能一起被一致地格式化,而不只是最外层的 HTML 结构。

浏览器内置了一套专门设计的错误恢复机制,即使面对严重畸形的标记——未闭合的标签、缺失的引号、嵌套顺序不合法的元素——也要尽力渲染出合理的结果,因为网络上存在着数十年积累下来的不完美 HTML,这些页面依然需要能显示出来。格式化工具无法采用同样的宽容态度:要重新格式化一份文档,它必须准确理解什么嵌套在什么里面,而一份真正标签不成对的文档根本没有唯一正确的结构可以还原。这正是为什么一个在浏览器里显示完全正常的页面,依然可能被这个格式化工具拒绝——浏览器用自己的方式悄悄修复了那处歧义,而一个想要正确重新格式化的工具,必须把这处歧义标记出来,而不是去猜测。

一个格式化失败的文件,往往根本不是损坏的 HTML,而是一个模板——Handlebars、Jinja、Blade、EJS 或类似的模板——把模板指令和标记混在了一起,产出的文档本身就不是合法的独立 HTML,而且也从来不需要是。这份模板要等它的模板引擎运行、把实际数据代入之后,才会变成真正的、格式良好的 HTML。对渲染后的输出结果做格式化——比如从浏览器的"查看源代码"里获取、在模板引擎处理完之后捕获的内容——能完全绕开这个问题,因为那份输出是真正的 HTML,里面已经不残留任何模板语法了。