HTML模板整洁取决于缩进、空行、引号、闭合四要素是否被Prettier自动约束；需设为默认格式化器、启用保存时格式化、配置.prettierrc，并注意空行语义、glob匹配、解析器设置及tabWidth一致性。

HTML模板代码是否整洁，不取决于你写了多少语义化标签，而取决于缩进、空行、引号、闭合这四件事是否被工具自动约束住。

VS Code 里 Prettier 怎么配才真正生效

很多人装了 Prettier - Code formatter 插件却没效果，根本原因是没设为 HTML 默认格式化器，或没启用保存时自动格式化。

• 右键 HTML 文件 → “Format Document With…” → 选 Prettier 并勾选 “Configure Default Formatter…”
• 在设置中搜索 format on save，确保已启用
• 项目根目录必须有 .prettierrc，哪怕只写一行：

  {"htmlWhitespaceSensitivity": "css"}

  ，否则 Prettier 对空行和换行的处理会出人意料
• 如果用的是 Vue 或 Svelte 单文件组件，需额外加 "parser": "html"，否则 template 内部可能被当成 JS 处理

为什么 prettier --write "**/*.html" 有时漏掉某些文件

glob 模式匹配失败是常见原因，尤其在 Windows 或含空格路径下。Prettier 默认不递归处理隐藏目录（如 node_modules），但也不会跳过 .git 下的文件——除非你显式排除。

• 确认 shell 支持 glob：Windows CMD 不支持 **，应改用 PowerShell 或 Git Bash
• 加 --ignore-path .gitignore 防止误格式化构建产物（如 dist/index.html）
• 若项目含 .html 后缀但非标准模板（如邮件模板 email.html），建议单独加 --config 指向不同规则文件

空行不是“看起来舒服”，而是有明确语义边界

空行在 Prettier 中不是装饰，它直接参与解析逻辑块。比如

和

之间必须有且仅有一个空行，否则 htmlWhitespaceSensitivity: "strict" 会把它们合并成连续文本节点（尤其在 SSR 场景下）。

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

• 大模块间（
  /
  /
  ）用 2 行空行
• 同级容器内（如多个
  ）用 1 行空行
• 自闭合标签（、

  ---

  ）前后不加空行，避免渲染时意外插入空白文本节点
• 注释 后必须跟空行，否则 Prettier 可能把它和下个标签挤在同一行

在线工具只能救急，不能替代本地配置

像 codebeautify.org/html-beautify 这类网站，对含内联 JS/CSS 的模板常误判结构；对 Vue 指令（v-if）、JSX 式插值（{{ title }}）完全无法识别，会强行换行或删空格。

• 临时调试可粘贴，但别复制回项目——它不会校验 是否在 最前
• 不验证 DOCTYPE 是否合法，也不检查 alt 属性缺失等语义问题
• 敏感项目禁用：剪贴板内容经第三方服务器，存在泄露风险

最易被忽略的一点：Prettier 的 printWidth 对 HTML 几乎无效，它只影响属性折行行为；真正控制嵌套缩进的是 tabWidth 和 useTabs，这两个值一旦和团队编辑器设置冲突，就会出现“别人看是整齐的，你打开全是错位”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！