现已推出!阅读关于 11 月份的新功能和修复的更多信息。

使用 Visual Studio Code 编辑 JSON

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

JSON within VS Code

IntelliSense 和验证

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

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

IntelliSense

包和项目依赖

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

快速导航

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

Goto Symbol

悬停

当您将鼠标悬停在具有或没有架构的 JSON 数据的属性和值上时,我们将提供其他上下文。

Hover

格式化

您可以使用 ⇧⌥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 架构。JSON 架构描述了 JSON 文件的形状,以及值集、默认值和描述。VS Code 附带的 JSON 支持支持从草案 4 到草案 7 的所有草案版本,并有限地支持草案 2019-09 和 2020-12。

JSON 架构存储 这样的服务器为大多数常见的基于 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 键会更改 JSON 本身,使用 JSON 的系统可能不会期望,例如,架构验证可能会失败。如果出现这种情况,您可以使用其他映射方法之一。

在用户设置中映射

以下用户 设置 中的摘录显示了如何将 .babelrc 文件映射到位于 https://json.schemastore.org/babelrc 上的 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 模式中的示例

Default snippets in JSON schema

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

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

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

在悬停提示中使用富文本格式

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

如果你希望你的描述支持链接等格式,你可以通过在格式中使用 MarkdownmarkdownDescription 属性来选择使用。

{
  "$schema": "https://json-schema.fullstack.org.cn/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 模式。

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