html注释被格式化工具错位因pretterr将其视为可重排节点，应升级至≥3.0版并配置htmlwhitespacesensitivity:"strict"、禁用激进排版选项、在关键注释前后加空行隔离；vs code中可关闭html自动格式化或手动选区格式化；含--的注释需正则搜索修复。
HTML注释被格式化工具“吃掉”或错位怎么办
多数 HTML 格式化工具（如 Prettier）默认会移动注释位置，比如把 <!-- header start --> 从 <header></header> 前面挪到上一行空白处，甚至塞进标签内部——这违反 HTML 注释安全边界，可能触发解析错误或 DOM 错乱。
根本原因是：Prettier 等工具将注释视为“可重排节点”，而非结构锚点。它不区分“区块标记注释”和“临时屏蔽注释”，统一按缩进规则处理。
- 检查你用的 Pretterr 版本是否 ≥ 3.0：旧版对注释位置控制极弱；新版支持
htmlWhitespaceSensitivity: "ignore"+embeddedLanguageFormatting: "off"组合缓解 - 在
.prettierrc中显式禁用注释自动换行："htmlWhitespaceSensitivity": "strict"（注意：这会让 Prettier 更尊重原始换行，但不保证位置绝对不变） - 对关键区块注释（如
<!-- main content start -->），在注释前后各加一个空行，形成视觉隔离区，能显著提升工具识别稳定性
VS Code 中注释缩进不一致，怎么强制左对齐
VS Code 默认会把注释缩进到与当前代码块同级，但 HTML 区块注释（如包裹 <section></section> 的）理应顶格——否则搜索 <!-- main 时容易漏掉缩进深的行。
- 不要依赖 “Format Document” 全局命令，改用自定义用户片段（User Snippets）插入标准注释模板，例如设置快捷键
cmnt-block输出：\n${2}\n - 在 VS Code 设置中关闭
editor.formatOnSave对 HTML 的影响，改为仅对.js和.css启用；HTML 文件用Shift+Alt+F手动触发，且先选中目标区块再格式化，避免全文件扰动 - 安装插件
Auto Rename Tag+Comment Anchors，后者能高亮并跳转所有<!--开头的注释，辅助人工校验位置
Prettier 把注释塞进 <script> 标签里了，怎么拦住
这是最危险的误操作：Prettier 有时会把原本在 <script> 外部的注释，合并进标签内部，变成 <script><!-- TODO: init analytics -->，导致浏览器将其当作 HTML 注释起点，后续 JS 代码裸露渲染或直接报错。
- 确认你的
.prettierrc中已设置"htmlWhitespaceSensitivity": "strict"，并**移除**任何"bracketSameLine": true或"singleAttributePerLine": true这类激进排版选项 - 在
<script></script>和<style></style>标签前后手动加空行，形成物理隔离带，Prettier 在空行存在时极少跨区域移动注释 - 更彻底的方案：用 ESLint 插件
eslint-plugin-html配合规则no-html-comment-in-script-or-style，在保存时直接报错拦截
多行注释里的 -- 导致页面崩溃，怎么检测和修复
只要注释内容中出现连续两个短横线 --（比如写“这里--不能这样”），浏览器解析器会在第一个 -- 处提前结束注释，后面所有内容都会裸露渲染——轻则文字错位，重则整块 DOM 被丢弃。
- 用正则全局搜索项目：
<!--[\s\S]*?--[\s\S]*?-->（匹配含至少两处--的注释），或更简单：在 VS Code 中搜索--，然后人工确认是否在<!--和-->之间 - CI 流程中加入脚本检查：用
grep -r "
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
