WebStorm 2018.2 Help

JSON

The JSON format is commonly used for storing data and for configuration files. WebStorm helps you work with JSON files - it checks their syntax and formatting. In popular types of configuration files, WebStorm provides code completion, thanks to the JSON Schema, which is a special format for describing the structure and contents of such files. You can also use custom JSON Schemas to enable code completion in your JSON files and validate them.

Enabling JSON5

WebStorm recognizes all JSON standards including JSON5.

Configuration file that uses JSON5 with the default extension .json5
By default, you can use this new syntax only in files with the json5 extension, but you can extend it to all json files.

  1. In the Settings/Preferences dialog (Ctrl+Alt+S), click File Types under Editor. The File Types page opens.

  2. In the Recognized File Types list, select JSON5.

  3. In the Registered Patterns area, click Add and type *.json in the Add Wildcard dialog that opens.

Using schemas from JSON Schema Store

WebStorm can automatically download and use schemas from the JSON Schema Store that hosts schema files for many popular configuration files. As soon as you open a file whose name is associated with one of the available schemas (for example, composer.json), WebStorm downloads and uses this schema for it. The name of the applied schema is shown on the Status bar.

JSON schema downloaded from JSON Schema Store, the name of the applied schema is shown in the Status bar
If your configuration file has a custom name, click No JSON schema on the Status bar and select the required schema from the list or click New Schema Mapping to open the JSON Schema Mappings page and configure a new custom schema.
No JSON schema for the current file

By default, automatic download of Schemas from the JSON Schema Store is enabled. If for some reason it was turned off, you can enable it again at any time.

Using custom JSON schemas

Besides schemas from JSON Schema Store, WebStorm lets you configure and use custom schemas from other storages. You can download the required schema and store it under the project root or specify the URL of the resource so WebStorm can download the schema automatically.

To configure a custom JSON Schema

  1. In the Settings/Preferences dialog (Ctrl+Alt+S), click Schemas and DTDs under Languages and Frameworks, and then click JSON Schema Mappings. The JSON Schema Mappings page opens.

  2. In the central pane, that shows all your previously configured custom Schemas, click Add on the toolbar.

  3. Specify the name of the Schema and the Schema Specification version with which your Schema complies. In the Schema file or URL field, specify the location of a previously downloaded Schema file or type the URL at which the required schema is available.

  4. Create a list of files or folders that you want to be validated against this Schema. The list may contain the names of specific files, the names of entire directories, and filename patterns. Based on the list, WebStorm internally detects the files to be validated. Each file is validated only once. For example, if a file with the specified name is stored in a directory from the list or its name matches a pattern, the file is still validated only once.

    To add an item to the list, click Add mapping and specify the path to a file or folder or type a file pattern.

To enable automatic download of JSON schemas from remote sources

  1. In the Settings/Preferences dialog (Ctrl+Alt+S), click Schemas and DTDs under Languages and Frameworks, and then click Remote JSON Schemas.

  2. Select the Allow downloading JSON schemas from remote sources.

    When this checkbox is cleared, any network activity around JSON Schemas is disabled:

    • Neither user-defined schema mappings nor the $schema property leads to downloading anything.

    • The Catalog isn't downloaded either.

  3. To use JSON Schema Store, select the Use schemastore.org JSON Schema catalog checkbox.

    When this checkbox is cleared, automatic mappings via SchemaStore API are disabled and no schemas will be assigned automatically using catalog.json.

    You can provide your own mappings using remote URLs. The mapped Schemas will be downloaded and the JSON Schema selector will show the list of schemastore schemas. However schemas from the JSON Schema Store won't be mapped automatically.

Handling Conflicts Among Scopes of Schemas

A conflict arises when a file, or a folder, or a pattern belongs to the scopes of two or more schemas. WebStorm analyzes scopes in two modes:

  • Static Analysis detects conflicts in scopes of custom schemas. If a conflict is detected, WebStorm displays a warning in the Schema Details pane. To view the overlapping scopes, click the Show details link. WebStorm shows a pop-up message where the conflicting scopes and schemas are listed:

    Notification about conflicting schema scopes in Settings/Preferences dialog

  • Dynamic Analysis detects conflicts in scopes of both system and custom schemas. This type of analysis is started when you open a file that belongs to a certain scope. If a conflict is detected, WebStorm displays a warning at the top of the editor tab:

    Notification about conflicting schema scopes in the  editor
    Click the link to open the JSON Schema Mappings page and edit the scope of the conflicting custom schema. Note that you cannot edit the scope of system schemas.

Last modified: 19 November 2018