JSON

JSON 格式常用于数据存储和配置文件。 WebStorm 可帮助您处理 JSON 文件——检查其语法和格式。在常见类型的配置文件中，WebStorm 会根据 JSON Schema 验证代码并提供代码补全，后者是一种用于描述此类文件结构和内容的特殊格式。

WebStorm 集成了一套适用于大多数常见格式的已注册架构。您也可以使用来自 JSON Schema Store 的架构或自定义 JSON 架构。

启用 JSON5

WebStorm 可识别多个常用 JSON 标准，包括 JSON5。 WebStorm 默认将具有 json5 扩展名的文件视为 JSON5 文件，并支持其中的新语法。

将 JSON5 语法扩展应用于所有 JSON 文件

在设置对话框（Ctrl+Alt+S ）中，转到编辑器 | 文件类型。
在已识别的文件类型列表中，选择 JSON5。
在文件名模式区域，单击并在打开的添加通配符对话框中键入 *.json。

使用来自 JSON Schema Store 的架构

WebStorm 可自动下载并使用来自 JSON Schema Store 的架构，该商店托管了许多常用配置文件的架构文件。只要您打开一个文件，如果其名称与某个已提供的架构相关联（例如 tsconfig.json ），WebStorm 就会下载并使用该架构。所应用架构的名称显示在状态栏中。

从 JSON Schema Store 下载的 JSON 架构，所应用架构的名称显示在状态栏中

如果您的配置文件具有自定义名称，或您正在处理一个临时文件，请单击状态栏上的无 JSON 架构并从列表中选择所需的架构。 WebStorm 会将当前文件与所选架构关联，并将此架构映射添加到 JSON 架构映射页面中的映射列表中。

或者，单击新建架构映射打开 JSON 架构映射页面，并配置新的架构关联。

默认情况下，已启用从 JSON Schema Store 自动下载架构。如果之前已关闭，您随时可以重新启用。

自动从 JSON Schema Store 下载架构

在设置对话框（Ctrl+Alt+S ）中，转到语言与框架 | 架构与 DTD | 远程 JSON 架构。
选中允许从远程来源下载 JSON 架构和使用 schemastore.org JSON 架构目录复选框。

WebStorm 集成了一些常见的架构。尽管这些架构会定期自动更新，但仍可能存在过期的情况。

使用集成架构的最新版本

在设置对话框（Ctrl+Alt+S ）中，转到语言与框架 | 架构与 DTD | 远程 JSON 架构。
选中始终下载最新版本的架构复选框。

使用自定义 JSON 架构

除了集成的已注册架构和来自 JSON Schema Store 的架构之外，WebStorm 还允许您创建自己的架构或使用其他存储中的自定义架构。您可以创建或下载所需架构并将其存储在项目根目录下，或者指定资源的 URL，以便 WebStorm 能够自动下载该架构。

自定义架构必须符合 JSON Schema 标准。目前，WebStorm 支持 2020-12 及之前版本的架构。

创建自定义 JSON 架构关联

在设置对话框（Ctrl+Alt+S ）中，转到语言与框架 | 架构和DTD | JSON 架构映射。
或者，单击状态栏中的无 JSON 架构，然后选择新建架构映射。在这种情况下，WebStorm 会自动将该文件包含在相关文件、文件夹与模式列表中。
在显示所有已配置 Schema 的中间窗格中，单击工具栏上的，并指定映射名称。
在架构文件或 URL 字段中，指定已创建或下载的 Schema 文件的位置，或所需 schema 所在的 URL。 Schema 文件的名称或对应的 URL 地址会显示在架构文件或 URL 字段中。
如果指定的是 URL，请确保已选中允许从远程来源下载 JSON 架构复选框（位于远程 JSON 架构页面）。
指定 Schema 所遵循的 Schema 规范版本。
创建要针对该 Schema 进行验证的文件或文件夹的列表。根据该列表，WebStorm 会在内部检测待验证的文件。
该列表可以包含特定文件名称、整个目录名称以及文件名模式。请使用以下规则来指定文件名模式：
- role-* 匹配所有名称以 role- 开头的文件。
- role-*/**/*.yaml 匹配所有名称中包含 role、 / 和 / 的 .yaml 文件。
- role-**.yaml 匹配所有名称以 role- 开头的 .yaml 文件。
要向列表添加条目，请单击。
指定文件或文件夹路径，或输入文件模式。指定相对于项目根目录的路径。
如果是在为文件选择新建架构映射时打开 JSON 架构映射页面，则该文件已添加至列表。

启用从远程来源自动下载 JSON 架构

在设置对话框（Ctrl+Alt+S ）中，转到语言与框架 | 架构与 DTD | 远程 JSON 架构。
选择允许从远程来源下载 JSON 架构。
清除此复选框后，任何与 JSON Schema 相关的网络活动，包括 JSON Schema Store 中的 schema，将被禁用。

禁用 JSON 架构

若要为某个文件禁用 schema，请单击状态栏中的 JSON 架构小部件，然后在弹出列表中选择忽略文件的 JSON 架构。
或者，选择编辑架构映射并编辑 schema 的范围。例如，可以编辑相应的模式，或在显式指定了文件名的情况下将该文件从列表中移除。
最后，您可以选择新建架构映射并配置 schema 关联，如上所述。
若要恢复当前文件与某个 schema 的关联，请单击状态栏中的无 JSON 架构，然后在弹出列表中选择停止忽略文件的 JSON 架构。
要为整个当前项目禁用自定义 schema，请打开设置对话框（Ctrl+Alt+S ），转到语言与框架 | 架构和DTD | JSON 架构映射，在中间窗格中选择 schema 关联，然后单击工具栏上的。

处理架构作用域间的冲突

如果某个文件、文件夹或模式属于两个或多个 schema 的作用域，WebStorm 会检测到该冲突并在编辑器及 JSON 架构映射页面（设置对话框中）显示警告。

在编辑器中打开属于多个作用域的文件时，会显示警告。

在 JSON 架构映射页面（设置对话框）中，当多个映射的作用域重叠时会显示警告。

在 JSON 架构中使用 HTML 描述

默认情况下，WebStorm 在显示 JSON schema 定义的文档弹窗时会对 HTML 字符进行转义。

假设 schema 使用了 description 属性：

                {
                    "id":  "http://some.site.somewhere/entry-schema#",
                    "$schema":  "https://json-schema.org/draft/2020-12/json-schema-core",
                    "type":  "object",
                    "required":  [ "options" ],
                    "properties":  {
                        "options":  {
                            "type":  "array",
                            "description": "Interesting details: Fresh New Awesome",
                            "minItems":  1,
                            "items":  { "type":  "string" },
                            "uniqueItems":  true
                        },
                        "readonly":  { "type":  "boolean" }
                    }
                }
            
  

则快速文档弹窗将如下所示：

对具有 description 属性的 JSON 架构定义的文档中没有格式化效果

若希望文档采用更美观的格式并支持丰富的 HTML 标记，可将 HTML 描述存储在 x-intellij-html-description 扩展属性中，而非 description：

{
  "id":  "http://some.site.somewhere/entry-schema#",
  "$schema":  "https://json-schema.org/draft/2020-12/json-schema-core",
  "type":  "object",
  "required":  [ "options" ],
  "properties":  {
    "options":  {
      "type":  "array",
      "x-intellij-html-description": "<p><b>Interesting</b> <i>details:</i></p>\n
                    <ul><li>Fresh</li><li>New</li><li>Awesome</li></ul>\n
                    <div style='background-color: #fff77c'>Choose schema with HTML description =)</div>",
      "minItems":  1,
      "items":  { "type":  "string" },
      "uniqueItems":  true
    },
    "readonly":  { "type":  "boolean" }
  }
}
                
  

现在快速文档弹窗效果如下：

对具有 x-intellij-html-description 属性的 JSON 架构定义的文档中使用 HTML 描述

配置语法高亮显示

您可以根据自己的偏好和习惯配置 JSON 语法高亮显示。

在设置对话框（Ctrl+Alt+S ）中，转到编辑器 | 颜色方案 | JSON。
选择配色方案，接受从默认设定继承的高亮显示设置，或按颜色和字体中描述进行自定义。

最后修改日期： 2025年 9月 26日