HTML中混用JSON应置于<script type="application/json">内，否则美化工具和DevTools易解析异常；动态注入时需先JSON.stringify()再HTML实体转义，避免特殊字符引发解析错误。
HTML 中混用 JSON 数据本身不会和美化工具冲突，但格式不规范、位置不当或未转义，会让 prettier、js-beautify 甚至浏览器 DevTools 的 JSON 查看器出错或显示异常——这不是工具坏了，是 HTML 和 JSON 的边界被模糊了。
JSON 放在 <script type="application/json"> 里最安全
这是标准做法，也是所有美化工具（包括 VS Code 插件、Chrome 的 Sources 面板）能正确识别并格式化的前提。其他写法容易被当成普通文本或 JS 代码处理。
常见错误现象：
- 直接写在
<script>标签里（没设type），被解析为 JS，报Unexpected token { - 塞进
<div>或<meta>，美化工具完全忽略，复制出来还是单行 - JSON 里含未转义的
<、&，导致 HTML 解析失败，后续内容错位
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
<script type="application/json" id="config">
{
"theme": "dark",
"features": ["sidebar", "toc"],
"api": {
"timeout": 5000
}
}
</script>
这样，prettier 会保留缩进；Chrome 点开 Elements → 选中该 script 标签 → 右键 “Store as global variable”，再 console.log(JSON.stringify(temp1, null, 2)) 就能人工验证格式是否完好。
JSON.stringify() 输出到 HTML 前必须转义
如果你用 JS 动态注入 JSON 到 HTML（比如拼接字符串塞进 innerHTML），JSON.stringify() 生成的内容不能直接放进去——它不处理 HTML 特殊字符。
使用场景：服务端渲染后前端再读取、模板引擎输出 JSON 到页面变量。
容易踩的坑：
- 直接
document.getElementById('data').innerHTML = JSON.stringify(obj)→ 若obj.name = "A & B"，结果变成"A & B"被双重解析 - 用
textContent替代innerHTML，但没注意父容器是否带white-space: pre，导致换行丢失
推荐做法（服务端或构建时）：
先 JSON.stringify()，再对结果做 HTML 实体转义（如 Node.js 用 he.escape()，前端可用 DOMPurify.sanitize() 或简单正则 .replace(/&/g, '&').replace(/, '<')），最后放进 <script type="application/json">。
美化工具对内联 JSON 的支持差异大
不是所有工具都默认处理 application/json 类型 script 中的内容。比如：
-
prettier：需配置"htmlWhitespaceSensitivity": "ignore"并确保文件后缀是.html，否则可能把 JSON 当成 JS 处理 -
js-beautifyCLI 默认不扫描 script 标签内容，得加--html参数并指定--html-xml-mode - VS Code 的
esbenp.prettier-vscode插件，对 HTML 文件中的 JSON script 是支持的，但若 JSON 含注释（非标准）会直接报错退出
性能影响很小，但兼容性要注意：老版本 Prettier（html-webpack-plugin 若开启 minify，默认会删掉 JSON 中的空格和换行——必须手动关掉：minify: { removeComments: false, collapseWhitespace: false }。
真正麻烦的从来不是“能不能美化”，而是“谁在什么时候以什么方式读取这段 JSON”——服务端、浏览器、调试工具、CI 检查脚本，各自对格式的容忍度不同。一个换行、一个未闭合引号、一处 & 没转义，就可能让某个环节静默失败。
