json在中必须手动美化以利调试和git对比，而data-属性值严禁换行或空白，否则解析失败；工具无法安全自动识别混合上下文，需人工分区域处理。
HTML 里直接写 JSON 不需要特殊美化工具，但一旦 JSON 出现在 <script></script> 标签内、或作为 data- 属性值、或嵌在 HTML 模板字符串中，格式混乱就会立刻影响可读性和调试效率——这时候“美化”不是锦上添花，而是排查错误的刚需。
JSON 放在 <script type="application/json"></script> 里要不要美化？
要，而且必须手动缩进。浏览器不解析该标签内容，但开发者要读、要改、要 diff。压缩后的单行 JSON 在 Git 提交或协作评审时几乎无法定位变更点。
- ✅ 推荐做法：用编辑器插件（如 VS Code 的 “Prettier” 或 “JSON Tools”）绑定快捷键，选中
<script type="application/json">{...}</script>内容后一键格式化 - ⚠️ 常见错误：直接对整个 HTML 文件执行“美化”，导致
<script type="application/json"></script>外层标签被错误换行或缩进错位（比如把顶到行首），破坏结构 - ? 注意：
type="application/json"是唯一被广泛支持的语义化写法；用text/json或空type可能被某些构建工具忽略或报 warning
JSON 作为 data- 属性值时，美化等于自找麻烦
不能美化。HTML 属性值里不允许换行和多余空白，否则解析失败或被截断。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- ❌ 错误示例：
<div data-config="{\n " theme> → 浏览器会把换行视为空格，最终 <code>dataset.config变成"{ \"theme\": \"dark\" "（末尾多空格，JSON.parse 报SyntaxError: Unexpected token） - ✅ 正确做法：保持单行 + 手动转义双引号，或用
JSON.stringify()生成：<div data-config='{"theme":"dark"}'> <li>? 小技巧：如果值较复杂，改用 <code><script type="application/json" id="config-data"></script>存储，再用 JS 读取，避免属性值限制 - ? 解决方案：禁用全局 JSON 美化，改为“按区域处理”——复制 JSON 内容 → 新建临时
.json文件 → 格式化 → 复制回 HTML - ⚙️ 配置建议（VS Code Prettier）：在
.prettierrc中添加"htmlWhitespaceSensitivity": "strict"，并关闭jsonRecursive类似选项（如有） - ? 别依赖“HTML 格式化工具自动修好 JSON”——没有工具能 100% 安全处理混合上下文，人工确认仍是底线
用 Prettier / js-beautify 美化含内联 JSON 的 HTML 文件，为什么总出问题？
因为这些工具默认按 HTML 规则处理所有内容，不识别 <script type="application/json"></script> 是 JSON 上下文，也不理解 data- 属性里是 JSON 字符串——它们会盲目缩进、换行、加空格，直接破坏 JSON 有效性。
真正容易被忽略的是：JSON 在 HTML 里的“存在形式”决定了它能不能被安全美化。单行属性值必须原样保留，type="application/json" 标签内容可以且应该美化，而任何试图让工具“智能判断哪里该美哪里不该美”的配置，长期看都在埋协作雷。
