使用 Visual Studio Code 编辑 JSON

JSON 是一种常见于配置文件(例如package.json或 )的数据格式project.json。我们还在 Visual Studio Code 中广泛使用它作为我们的配置文件。打开以 结尾的文件时.json,VS Code 提供的功能可以使写入或修改文件内容变得更简单。

VS Code 中的 JSON

IntelliSense 和验证

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

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

智能感知

包和项目依赖关系

我们还为特定值集提供 IntelliSense,例如 、 和 中的包和项目package.json依赖project.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 with Comments (jsonc) 模式。此模式用于 VS Code 配置文件,例如settings.jsontasks.json、 或launch.json在带有注释的 JSON模式下,您可以使用单行 ( //) 以及/* */JavaScript 中使用的块注释 ( )。该模式还接受尾随逗号,但不鼓励使用,并且编辑器将显示警告。

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

JSON 架构和设置

为了理解 JSON 文件的结构,我们使用JSON 模式。JSON 模式描述 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.json和 )的架构tsconfig.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 架构中的示例:

JSON 架构中的默认片段

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

  • label并将description显示在完成选择对话框中。如果未提供标签,则片段的字符串化对象表示将显示为标签。
  • body是当用户选择完成时被字符串化并插入的 JSON 对象。片段语法可以在字符串文字内部使用来定义制表位、占位符和变量。如果字符串以 开头^,则字符串内容将按原样插入,而不是字符串化。您可以使用它来指定数字和布尔值的片段。

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

在悬停中使用丰富的格式

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

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

{
  "$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 扩展是否从http和获取 JSON 架构https

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