JSON在<script type="application/json">中必须手动美化以利调试和Git对比，而data-属性值严禁换行或空白，否则解析失败；工具无法安全自动识别混合上下文，需人工分区域处理。
HTML 里直接写 JSON 不需要特殊美化工具，但一旦 JSON 出现在 <script> 标签内、或作为 data- 属性值、或嵌在 HTML 模板字符串中，格式混乱就会立刻影响可读性和调试效率——这时候“美化”不是锦上添花，而是排查错误的刚需。
JSON 放在 <script type="application/json"> 里要不要美化？
要，而且必须手动缩进。浏览器不解析该标签内容，但开发者要读、要改、要 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 属性值里不允许换行和多余空白，否则解析失败或被截断。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- ❌ 错误示例：
<div data-config="{\n "theme": "dark"\n}">→ 浏览器会把换行视为空格，最终dataset.config变成"{ \"theme\": \"dark\" "（末尾多空格，JSON.parse 报SyntaxError: Unexpected token） - ✅ 正确做法：保持单行 + 手动转义双引号，或用
JSON.stringify()生成：<div data-config='{"theme":"dark"}'> - ? 小技巧：如果值较复杂，改用
<script type="application/json" id="config-data">存储，再用 JS 读取，避免属性值限制
用 Prettier / js-beautify 美化含内联 JSON 的 HTML 文件，为什么总出问题？
因为这些工具默认按 HTML 规则处理所有内容，不识别 <script type="application/json"> 是 JSON 上下文，也不理解 data- 属性里是 JSON 字符串——它们会盲目缩进、换行、加空格，直接破坏 JSON 有效性。
立即学习“前端免费学习笔记（深入）”；
- ? 解决方案：禁用全局 JSON 美化，改为“按区域处理”——复制 JSON 内容 → 新建临时
.json文件 → 格式化 → 复制回 HTML - ⚙️ 配置建议（VS Code Prettier）：在
.prettierrc中添加"htmlWhitespaceSensitivity": "strict"，并关闭jsonRecursive类似选项（如有） - ? 别依赖“HTML 格式化工具自动修好 JSON”——没有工具能 100% 安全处理混合上下文，人工确认仍是底线
真正容易被忽略的是：JSON 在 HTML 里的“存在形式”决定了它能不能被安全美化。单行属性值必须原样保留，type="application/json" 标签内容可以且应该美化，而任何试图让工具“智能判断哪里该美哪里不该美”的配置，长期看都在埋协作雷。
