如何在 VSCode 中运行并格式化 JSON 配置文件

大枫酱_9937

大枫酱_9937

2026-06-21

473人浏览

原创

vscode格式化json文件无需插件,只需确保语言模式为json且语法合法,按shift+alt+f(win/linux)或shift+option+f(macos)即可生效;常见问题多因语言模式错误(如plain text)或语法不合法(单引号、注释、中文引号、零宽字符)导致。

如何在 vscode 中运行并格式化 json 配置文件

VSCode 不能“运行”JSON 文件——它不是可执行代码,而是数据交换格式。所谓“运行”,实际指验证语法合法性、格式化为可读结构、或配合 schema 实现字段级补全与校验。

为什么 Format Document 按钮是灰色的

灰色 = VSCode 不识别当前文件为 JSON。它根本没加载 JSON 语言服务,所有功能都不可用。

  • 右下角状态栏显示的是 Plain Text、JSON with Comments 或 JavaScript —— 点击它,手动选 JSON(不是 JSONC)
  • 文件没有 .json 后缀(比如叫 config、data 或 .env.json)——用快捷键 Ctrl+K M(Win/Linux)或 Cmd+K M(macOS),输入 json 回车
  • json.format.enable 被设为 false(极少见,但有人误关)——在设置中搜该配置项,确认值为 true

格式化失败的真正原因不是插件,而是语法非法

VSCode 内置 JSON 格式化器只处理合法 JSON。一旦解析失败,它连缩进都不做,直接报错或静默失效。

chartjs-reporter
chartjs-reporter

此技能用于在用户需要将结构化数据(查询结果、CSV 摘要、JSON 记录或 Python 字典/列表)转换为独立的 HTML 页面时使用。

下载
  • 用了单引号:'name': 'alice' → 必须改成双引号:"name": "alice"
  • 含中文引号:“key” → 替换为英文双引号:"key"
  • 带注释:// comment 或 /* ... */ → JSON 标准不支持;如需保留,切到 JSONC 模式,但此时内置格式化器不生效
  • 存在零宽字符(尤其从微信、PDF、邮件复制)——可用正则 /[\u200b-\u200f\u202a-\u202f\u2060-\u206f\ufeff]/g 全局替换为空

怎么让 JSON 自动格式化且不踩坑

启用 editor.formatOnSave 很方便,但容易在编辑中途触发报错(比如删了逗号还没补上)。关键在于控制作用域和行为边界。

  • 在 settings.json 中加这两行即可生效(无需插件):
    "editor.formatOnSave": true
    "json.format.enable": true
  • 想保留大数组的手动换行(避免格式化后挤成一行)——设 "json.format.keepLines": true
  • 若装了 Prettier,它默认不处理 .json 文件;要么加配置:"prettier.disableLanguages": ["json"],要么显式指定:"[json]": {"editor.defaultFormatter": "vscode.json-language-features"}
  • 缩进空格数由 json.tabSize 控制(优先于全局 editor.tabSize),设为 4 就输出 4 空格

校验 ≠ 格式化,别指望格式化按钮修语法

按 Shift+Alt+F 只美化结构,不修复缺失引号、漏逗号、括号不匹配等错误。这些必须靠校验发现。

  • 确保 json.validate.enable 为 true(默认开启)
  • 错误会以红色波浪线标出,位置比报错文字更准;常见提示如 Invalid character、Expected comma or }
  • 整段变灰或无高亮?可能是 BOM 头(\uFEFF)——打开开发者工具(Ctrl+Shift+I),看 Console 里 JSON.parse() 的原始报错
  • 加 "$schema" 字段能激活字段补全和语义提示,例如:"$schema": "https://json.schemastore.org/package.json"

最常被忽略的不是设置,是语言模式切换动作本身——粘贴完一段 JSON,顺手点一下右下角选 JSON,比查报错快十倍。

相关专题

更多
js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

2023.06.20

4376

8

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

2023.07.28

1355

5

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.03

1758

5

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

2023.08.17

9943

11

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

2023.09.01

980

4

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.04

2704

5

Js中concat和push的区别
Js中concat和push的区别

Js中concat和push的区别:1、concat用于将两个或多个数组合并成一个新数组,并返回这个新数组,而push用于向数组的末尾添加一个或多个元素,并返回修改后的数组的新长度;2、concat不会修改原始数组,是创建新的数组,而push会修改原数组,将新元素添加到原数组的末尾等等。本专题为大家提供concat和push相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.14

1549

5

js截取字符串的方法介绍
js截取字符串的方法介绍

JavaScript字符串截取方法,包括substring、slice、substr、charAt和split方法。这些方法可以根据具体需求,灵活地截取字符串的不同部分。在实际开发中,根据具体情况选择合适的方法进行字符串截取,能够提高代码的效率和可读性 。

2023.09.21

4649

3

js生成随机数方法
js生成随机数方法

JavaScript生成随机数的方法,包括使用Math.random()方法生成指定范围内的随机整数、生成随机字符串和生成随机颜色。根据具体需求,可以选择适合的方法来生成随机数,以实现各种功能 。

2023.09.25

2695

5

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程