轻量级文本编辑器如notepad++、sublime text、editplus不内置html格式化能力,需依赖prettier、js-beautify或tidy等外部工具;其原生功能仅支持基础缩进与语法高亮,无法解析dom树或ast实现结构重排、属性对齐、自动闭合等高级格式化。

轻量级文本编辑器本身不内置HTML格式化能力,必须靠外部工具或插件注入 —— 直接调用 prettier、js-beautify 或 tidy 这类命令行工具是最可靠、兼容性最好的做法。
为什么不能靠编辑器原生功能做HTML格式化
像 Notepad++、EditPlus、Sublime Text 这类轻量编辑器,核心定位是“快速打开、编辑、保存”,语法高亮和基础缩进是内置的,但真正的HTML结构重排(比如自动换行、嵌套缩进、属性对齐、标签闭合补全)需要解析DOM树或AST,原生JS或编辑器API做不到。你看到的“格式化”效果,99%是调用了外部可执行程序。
-
prettier依赖 Node.js 环境,输出严格、一致,但会覆盖原有空格/注释风格 -
js-beautify更轻量,支持命令行和浏览器端,参数灵活(如--indent-size 2),适合定制 -
html-tidy(即tidy)专注W3C校验与修复,能自动补全缺失标签、修正大小写,但输出较保守
Notepad++ 中用 tidy2.dll 格式化 HTML 的实操要点
这是目前 Windows 下最省事的方案,但容易卡在安装和配置环节:
- 必须下载匹配 Notepad++ 架构的
tidy2.dll(x64 版 Notepad++ 不能用 x86 的 dll) - dll 文件要放进
%ProgramFiles%\Notepad++\plugins\,不是用户目录下的 plugins - 重启后菜单栏出现
Tidy2→Tidy Current Document,但默认配置可能把<div class="a"> 强制折成多行 —— 需手动编辑 <code>tidy2.conf,加一行wrap: 0关闭自动换行 - 如果遇到中文乱码,确认文档编码是 UTF-8 with BOM,且 tidy2.conf 里有
input-encoding: utf8和output-encoding: utf8 - 临时解法:先用
tidy -asxhtml把 HTML 转成 XHTML,再交给xmlstar格式化 - 更稳的做法:在 EditPlus 的「用户工具」里直接调用
prettier --parser html --print-width 100 %f,并勾选「捕获输出」,避免弹黑窗 - 注意
%f是 EditPlus 的文件路径宏,不要写成$file或{FILE},否则命令根本不会执行 - 必须全局安装
prettier:npm install -g prettier,仅项目局部安装无效 - Sublime 的 PATH 环境变量不继承系统终端的,需在插件设置里显式填
"prettier_cli_path": "C:/Users/xxx/AppData/Roaming/npm/prettier.cmd" - 默认不格式化
.html文件,要在插件设置中添加"auto_format_on_save_excludes": []并确认"file_extensions": ["html", "htm"] - 如果用了 Vue 或 JSX 模板,得额外装
prettier-plugin-vue并在设置里启用,否则<template></template>块会被当普通 HTML 错误缩进
EditPlus 用 xmlstarlet 格式化 HTML 的限制
xmlstarlet 本质是 XML 工具,处理 HTML 时会报错:「not well-formed (invalid token)」—— 因为 HTML 允许自闭合标签(<img>)、无引号属性(class=foo)、大小写混用,而 XML 解析器要求严格。
Sublime Text 用 Prettier 插件的隐藏坑
很多人装完 HTML-CSS-JS Prettier 插件后点右键没反应,问题不在插件本身:
真正麻烦的从来不是“怎么调用格式化工具”,而是让编辑器在不破坏原有编码、不丢掉注释、不误伤内联脚本的前提下,把 HTML 标签层级理清楚 —— 所以别迷信一键格式化,先用 tidy -errors %f 扫一遍有没有未闭合标签,比啥都强。











