vs code需配置prettier插件并显式绑定html语言设置才能正确格式化，关键步骤包括：在.vscode/settings.json中添加"[html]": {"editor.defaultformatter": "esbenp.prettier-vscode"}、禁用内置html格式器、配置.prettierrc含printwidth/tabwidth/htmlwhitespacesensitivity三项。
VS Code 是目前最实用的跨平台 HTML 格式化工具
它本身不带 HTML 格式化能力，但装一个插件就能稳定、可配置、本地执行——比网页版更可控，比专用工具更灵活。
关键在于：Format Document 命令默认调用的是内置的 HTML 格式化器，它对缩进、换行、属性排序不做强制干预，但足够干净；若需更强控制（比如强制单引号、属性换行），就得靠 Prettier 插件接管。
- 安装后按
Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（macOS），输入Format Document即可触发 - 右键菜单里也有“格式化文档”选项，适合鼠标党
- 首次格式化前建议检查设置：
"html.format.wrapAttributes": "force-aligned"可让长属性自动换行对齐 - 注意：如果文件里混有
v-if、@click等 Vue 指令，原生格式化器可能错判为非法属性——此时必须启用Prettier并配好.prettierrc
Sublime Text 4 的 HTML 格式化靠插件拼装，适合老手
它没有开箱即用的格式化功能，得手动装 HTML-CSS-Class-Completion + JsPrettier 或 Sublime-HTML-Beautify 才能干活。好处是轻、快、不卡大文件；坏处是每台新机器都要重配一遍，且不同插件对 data- 属性、自定义元素的支持参差不齐。
-
Sublime-HTML-Beautify默认用js-beautify引擎，支持indent_inner_html这类细粒度开关 - 按
Ctrl+Shift+H（Windows）或Cmd+Shift+H（macOS）调出格式化命令，但快捷键需在插件安装后手动确认 - 对含内联
<script type="module"></script>的 HTML，某些版本会把 JS 内容也一并换行缩进，破坏可读性——建议关掉indent_scripts选项
FreeFormatter 网页版适合临时救急，别当主力
不用装、不传代码到服务器（所有处理在浏览器内完成），这点很安心。但它无法保存配置，每次都要重新选缩进空格数、是否强制闭合标签、是否保留空行——写项目时来回切换太打断节奏。
- 粘贴代码后点
Format按钮，几秒出结果；右侧实时预览能帮你一眼发现<div></div>嵌套错位 - 遇到
Unmatched tag:错误提示，说明有漏闭合的标签，它不会自动修复，只标红位置 - 对含
<!-- htmlmin:ignore -->这类构建指令的代码，会直接报语法错误——网页版不识别构建时注释 - 批量处理多个 HTML 片段？它只支持一次粘贴一个，不能拖文件夹
别忽略 .editorconfig 和 Prettier 配置文件的协同作用
光靠编辑器点一下格式化，团队协作时照样会出问题。真正让 HTML 格式统一的，是 .editorconfig 管缩进风格，.prettierrc 管语义规则，两者缺一不可。
-
.editorconfig中写indent_style = space和indent_size = 2，VS Code/Sublime 都认；但wrap_line_length这种字段只有 Prettier 尊重 -
prettier对 HTML 的printWidth默认是 80，但现代屏幕宽得多，设成 100 更少换行 - 如果项目用了 Tailwind，记得加
"htmlWhitespaceSensitivity": "ignore"，否则class="p-2 m-4"后面多一个空格，Prettier 就会把整行拆开
格式化不是终点，而是协作起点。最容易被跳过的，其实是把 .prettierrc 提交进 Git，并在 CI 流水线里加一步 npx prettier --check **/*.html ——不然本地格式再漂亮，合并时照样乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
