如何在VSCode中一键格式化JSON字符串并进行美化-VSCode-PHP中文网

vscode 默认不支持json字符串内联格式化，需先识别为json再格式化：纯片段用临时.json文件法，代码内联json用prettier配置json-stringify并手动选中含引号的完整字符串。

如何在vscode中一键格式化json字符串并进行美化

VSCode 默认不支持 JSON 字符串内联格式化

直接选中一段 JSON 字符串（比如 {"name":"Alice","age":30}）按 Shift+Alt+F，VSCode 会提示“没有可用的格式化程序”——因为默认的 JSON 语言模式只对 .json 文件生效，不处理字符串内容。你得先让编辑器“认出这是 JSON”，再触发格式化。

用正则临时转成 .json 文件再格式化（最稳）

适用于粘贴过来的原始 JSON 字符串、日志里截取的片段、或 API 返回体。核心思路：把字符串包裹成合法 JSON 文件结构，借力 VSCode 自带的 JSON 格式化能力。

复制你的 JSON 字符串，例如：{"users":[{"id":1,"active":true}],"total":1}
新建一个临时文件，后缀为 .json（如 temp.json）
粘贴进去，全选 → 按 Ctrl+H 打开替换面板，启用正则（.* 按钮），输入：

^"(.*)"$

替换为：

$1

→ 这一步是去掉首尾引号（如果字符串本身被双引号包围）。若原始内容无引号（如直接是 {...}），跳过此步。

Wjs Uploading Video

将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

下载

保存文件 → 按 Shift+Alt+F 格式化 → 再手动复制回原位置

装 Prettier + 配置 JSON-in-String 支持（适合高频使用）

如果你常要格式化嵌在 JS/TS/HTML 中的 JSON 字符串（比如 const data = '{"id":1,"name":"test"}';），Prettier 是更可持续的方案，但需明确启用 json-stringify 规则。

安装扩展：Prettier（作者：Esben Petersen）
在工作区根目录加 .prettierrc，内容为：

{
  "parser": "json-stringify",
  "tabWidth": 2,
  "useTabs": false
}

选中字符串（包括外层引号），右键 → Format Selection With... → 选 Prettier
注意：必须选中引号内的完整 JSON 内容，且确保字符串是合法 JSON（不能有 JS 注释、单引号等）

快捷键冲突与语言模式陷阱

即使装了 Prettier，按 Shift+Alt+F 仍可能失败——VSCode 会根据当前语言模式决定调用哪个格式化器。JS 文件里默认走 JavaScript 格式化器，不会自动切到 Prettier 的 json-stringify。

确认当前文件语言模式右下角显示的是 JSON 或 JavaScript，不是 Plain Text
在 JS 文件中，务必用鼠标选中整个 JSON 字符串（含引号），再执行格式化；只选花括号内部会失败
如果 Format Selection 不生效，检查设置：editor.formatOnSave 是文件级开关，对选中区域无效

真正省事的一键操作并不存在，关键在区分场景：纯 JSON 片段走临时文件法，代码内联 JSON 走 Prettier + 手动选中。别指望 VSCode 自动猜你想要格式化哪一段字符串。