前端工程师常用的HTML格式化工具盘点-html教程-PHP中文网

vscode内置html格式化器够用，但团队协作或复杂项目必须配prettier；在线工具仅适合临时救急。内置格式器能解析ast、缩进标签、对齐属性、折行长行，但默认不缩进body子元素，且不处理自定义属性；prettier则统一js/css/html风格，需配置.prettierrc并显式绑定[html]语言块，关键项为htmlwhitespacesensitivity和indentinnerhtml。

前端工程师常用的html格式化工具盘点

VSCode 内置格式化器够用，但团队协作或复杂项目必须配 Prettier；在线工具只适合临时救急，不能替代本地配置。

VSCode 默认 HTML 格式化器能做什么

VSCode 自带的 HTML 格式化器基于 TypeScript 语言服务，能解析 AST 并按层级缩进标签、对齐属性、折行长行。但它默认不缩进 html 和 body 的直接子元素，且对自定义属性（如 v-if、data-testid）不做特殊处理。

启用方式：设置 "editor.formatOnSave": true + 快捷键 Shift + Alt + F（Windows/Linux）
关键配置项：html.format.indentInnerHtml（设为 true 才会缩进 body 下第一层）
默认缩进风格是制表符（tab），但多数前端项目要求空格 —— 必须显式设 "editor.insertSpaces": true 和 "editor.tabSize": 2
不支持属性排序、自动引号标准化、JSX/模板语法兼容等高级行为

Prettier 是团队项目的事实标准

当项目里有 Vue、React 模板，或需要统一 JS/CSS/HTML 风格时，Prettier 不是“可选”，而是必须。它把 HTML 当作“代码”而非“标记”来处理，所有规则由单一配置驱动。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

安装扩展 Prettier - Code formatter 后，需在项目根目录加 .prettierrc，例如：

{ "tabWidth": 2, "useTabs": false, "htmlWhitespaceSensitivity": "ignore", "printWidth": 100 }

htmlWhitespaceSensitivity 很关键：设为 "ignore" 才不会误删模板中用于控制空白的换行（比如 <div> <span>A</span><span>B</span> </div> 中的换行）
和 ESLint 冲突常见于引号、分号、结尾逗号 —— 推荐禁用 ESLint 的格式类规则，只留 eslint-config-prettier
保存即生效，且支持 Git Hook（如 Husky + lint-staged）做提交前校验

FreeFormatter 这类在线工具只适合单次调试

像 https://www.freeformatter.com/html-formatter.html 这类网页工具，优势是零配置、实时预览、错误高亮，但本质是“粘贴-点一下-复制”，无法集成进开发流。

适合场景：排查别人发来的乱码 HTML 片段、快速查看未闭合标签、验证某段内联 JS 是否被格式化破坏
注意：它会把 <script>console.log('x')</script> 中的 JS 当纯文本缩进，可能破坏原始逻辑缩进
不识别 .vue 或 .tsx 中的 template 块，只吃纯 HTML 字符串
隐私风险虽低（宣称本地处理），但含敏感业务逻辑的 HTML 切勿上传

别忽略 .editorconfig 的协同价值

即使用了 Prettier，.editorconfig 仍是跨编辑器兜底方案。它不负责格式化，只声明“这个项目用 2 空格、LF 换行、UTF-8 编码”，连 Sublime 或 Vim 用户也能对齐。

内容示例：

root = true
[*]
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
<p>[*.html]
indent_style = space
indent_size = 2</p>