使用Visual Studio Code编辑JSON

JSON 是一种常见于配置文件中的数据格式,例如 package.jsonproject.json。我们在 Visual Studio Code 中也广泛使用它来处理我们的配置文件。当打开以 .json 结尾的文件时,VS Code 提供了功能,使编写或修改文件内容变得更加简单。

VS Code中的JSON

智能感知和验证

对于属性和值,无论是有模式还是无模式的JSON数据,我们在您输入时都会通过IntelliSense提供建议。您还可以使用触发建议命令(⌃Space (Windows, Linux Ctrl+Space))手动查看建议。

我们还基于关联的JSON模式执行结构和值验证,为您提供红色波浪线。要禁用验证,请使用json.validate.enable 设置

智能感知

包和项目依赖

我们还为特定值集提供智能感知,例如package.jsonproject.jsonbower.json中的包和项目依赖项。

快速导航

JSON 文件可能会变得很大,我们支持使用转到符号命令(⇧⌘O (Windows, Linux Ctrl+Shift+O))快速导航到属性。

转到符号

悬停效果

当您悬停在带有或不带有模式的JSON数据的属性和值上时,我们将提供额外的上下文。

悬停

格式化

您可以使用⇧⌥F (Windows Shift+Alt+F, Linux Ctrl+Shift+I)或从上下文菜单中选择格式化文档来格式化您的JSON文档。

折叠

您可以使用行号和行首之间的装订线上的折叠图标来折叠源代码区域。所有对象和数组元素都可以使用折叠区域。

带注释的JSON

除了遵循JSON规范的默认JSON模式外,VS Code还有一个带注释的JSON(jsonc)模式。此模式用于VS Code的配置文件,如settings.jsontasks.jsonlaunch.json。在带注释的JSON模式下,您可以使用单行注释(//)以及JavaScript中使用的块注释(/* */)。该模式还接受尾随逗号,但不鼓励使用,编辑器会显示警告。

当前编辑器模式显示在编辑器的状态栏中。选择模式指示器以更改模式并配置文件扩展名如何与模式关联。您还可以直接修改files.associations 设置,以将文件名或文件名模式关联到jsonc

JSON 模式和设置

为了理解JSON文件的结构,我们使用JSON schemas。JSON schemas描述了JSON文件的形状,以及值集、默认值和描述。VS Code附带的JSON支持支持从草案4到草案7的所有草案版本,对2019-09和2020-12草案的支持有限。

JSON Schema Store这样的服务器为大多数常见的基于JSON的配置文件提供模式。然而,模式也可以在VS Code工作区的文件中定义,以及VS Code设置文件中。

JSON文件与模式的关联可以通过在JSON文件本身中使用$schema属性来完成,或者在用户或工作区的设置中(文件 > 首选项 > 设置)在属性json.schemas下完成。

VS Code 扩展还可以定义模式和模式映射。这就是为什么 VS Code 已经知道一些知名 JSON 文件的模式,例如 package.jsonbower.jsontsconfig.json

JSON中的映射

在以下示例中,JSON文件指定其内容遵循CoffeeLint模式。

{
  "$schema": "https://json.schemastore.org/coffeelint",
  "line_endings": "unix"
}

请注意,这种语法是VS Code特有的,并不是JSON Schema规范的一部分。添加$schema键会改变JSON本身,这可能会让使用JSON的系统感到意外,例如,模式验证可能会失败。如果是这种情况,您可以使用其他映射方法之一。

用户设置中的映射

以下摘录自用户设置,展示了如何将.babelrc文件映射到位于babelrc架构上的https://json.schemastore.org/babelrc

"json.schemas": [
    {
        "fileMatch": [
            "/.babelrc"
        ],
        "url": "https://json.schemastore.org/babelrc"
    }
]

提示: 除了为 .babelrc 定义模式外,还要确保 .babelrc 与 JSON 语言模式相关联。这也可以通过设置中的 files.association 数组设置来完成。

映射到工作区中的模式

要映射位于工作区中的架构,请使用相对路径。在此示例中,工作区根目录中名为 myschema.json 的文件将用作所有以 .foo.json 结尾的文件的架构。

"json.schemas": [
    {
        "fileMatch": [
            "**/*.foo.json"
        ],
        "url": "./myschema.json"
    }
]

映射到在设置中定义的架构

要映射在用户或工作区设置中定义的架构,请使用schema属性。在此示例中,定义了一个架构,该架构将用于所有名为.myconfig的文件。

"json.schemas": [
    {
        "fileMatch": [
            "/.myconfig"
        ],
        "schema": {
            "type": "object",
            "properties": {
                "name" : {
                    "type": "string",
                    "description": "The name of the entry"
                }
            }
        }
    }
]

在扩展中映射模式

模式和模式关联也可以通过扩展来定义。查看 jsonValidation 贡献点

文件匹配语法

文件匹配语法支持 '*' 通配符。此外,您可以定义以 '!' 开头的排除模式。要使关联匹配,至少需要有一个模式匹配,并且最后一个匹配的模式不能是排除模式。

  "json.schemas": [
    {
      "fileMatch": [
        "/receipts/*.json",
        "!/receipts/*.excluded.json"
      ],
      "url": "./receipts.schema.json"
    }
  ]

在JSON模式中定义代码片段

JSON 模式描述了 JSON 文件的结构,以及值集和默认值,这些由 JSON 语言支持用于提供补全建议。如果你是模式作者,并且希望提供更加定制的补全建议,你也可以在模式中指定代码片段。

以下示例展示了一个定义代码片段的键绑定设置文件的模式:

{
    "type": "array",
    "title": "Keybindings configuration",
    "items": {
        "type": "object",
        "required": ["key"],
        "defaultSnippets": [
            {
                "label": "New keybinding",
                "description": "Binds a key to a command for a given state",
                "body": { "key": "$1", "command": "$2", "when": "$3" }
            }
        ],
        "properties": {
            "key": {
                "type": "string"
            }
            ...
        }
    }
}

这是一个JSON模式中的示例:

JSON模式中的默认代码片段

使用属性 defaultSnippets 为给定的 JSON 对象指定任意数量的代码片段。

  • labeldescription 将会显示在补全选择对话框中。如果没有提供 label,代码片段的字符串化对象表示将作为 label 显示。
  • body 是当用户选择完成时被字符串化并插入的 JSON 对象。片段语法 可以在字符串字面量中使用,以定义制表位、占位符和变量。如果字符串以 ^ 开头,则字符串内容将按原样插入,而不是被字符串化。您可以使用此功能来指定数字和布尔值的片段。

请注意,defaultSnippets 不是 JSON 模式规范的一部分,而是 VS Code 特定的模式扩展。

在悬停中使用丰富的格式

VS Code 将使用来自 JSON Schema 规范 的标准 description 字段,以便在悬停和自动完成期间提供有关属性的信息。

如果您希望您的描述支持链接等格式,您可以通过在格式化中使用markdownDescription属性来启用Markdown

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "description": "The name of the entry",
      "markdownDescription": "The name of the entry. [See the documentation](https://example.com)"
    }
  }
}

请注意,markdownDescription 不是 JSON 模式规范的一部分,而是 VS Code 特定的模式扩展。

离线模式

json.schemaDownload.enable 控制 JSON 扩展是否从 httphttps 获取 JSON 模式。

当当前编辑器想要使用无法下载的模式时,状态栏中会显示一个警告三角形。