Editing JSON with Visual Studio Code

    For properties and values, both for JSON data with or without a schema, we offer up suggestions as you type with IntelliSense. You can also manually see suggestions with the Trigger Suggestions command (kb(editor.action.triggerSuggest)). We also perform structural and value verification based on an associated JSON schema giving you red squiggles.

    We also offer IntelliSense for specific value sets such as package and project dependencies in package.json, project.json, and bower.json.

    Quick navigation

    JSON files can get large and we support quick navigation to properties using the Go to Symbol command (kb(workbench.action.gotoSymbol)).

    When you hover over properties and values for JSON data with or without schema, we will provide additional context.

    Hover

    Formatting

    You can format your JSON document using kb(editor.action.formatDocument) or Format Document from the context menu.

    JSON with Comments

    In addition to the default JSON mode following the , VS Code also has a JSON with Comments (jsonc) mode. This mode is used for the VS Code configuration files such as settings.json, tasks.json, or launch.json. When in the JSON with Comments mode, you can use single line (//) as well as block comments (/* */) as used in JavaScript. The current editor mode is indicated in the editor’s Status Bar. Click on the mode indicator to change the mode and to configure how file names and extensions are associated to modes.

    To understand the structure of JSON files, we use JSON schemas. JSON schemas describe the shape of the JSON file, as well as value sets, default values, and descriptions. The JSON support shipped with VS Code supports JSON Schema Draft 7.

    Servers like provide schemas for most of the common JSON-based configuration files. However, schemas can also be defined in a file in the VS Code workspace, as well as the VS Code settings files.

    The association of a JSON file to a schema can be done either in the JSON file itself using the $schema attribute, or in the User or Workspace settings (File > Preferences > Settings) under the property json.schemas.

    VS Code extensions can also define schemas and schema mapping. That’s why VS Code already knows about the schema of some well-known JSON files such as package.json, bower.json, and tsconfig.json.

    Mapping in the JSON

    In the following example, the JSON file specifies that its contents follow the CoffeeLint schema.

    Note that this syntax is VS Code-specific and not part of the . Adding the $schema key changes the JSON itself, which systems consuming the JSON might not expect, for example, schema validation might fail. If this is the case, you can use one of the other mapping methods.

    Mapping in the User Settings

    The following excerpt from User shows how .babelrc files are mapped to the babelrc schema located on .

    1. "json.schemas": [
    2.     {
    3.         "fileMatch": [
    4.             "/.babelrc"
    5.         "url": "http://json.schemastore.org/babelrc"
    6.     }

    Mapping to a schema defined in settings

    To map a schema that is defined in the User or Workspace settings, use the schema property. In this example, a schema is defined that will be used for all files named .myconfig.

    1. "json.schemas": [
    2.     {
    3.         "fileMatch": [
    4.             "/.myconfig"
    5.         ],
    6.         "schema": {
    7.             "type": "object",
    8.             "properties": {
    9.                 "name" : {
    10.                     "type": "string",
    11.                     "description": "The name of the entry"
    12.                 }
    13.             }
    14.         }
    15.     }
    16. ]

    Mapping a schema in an extension

    Schemas and schema associations can also be defined by an extension. Check out the jsonValidation contribution point.

    The file match syntax supports the ‘*‘ wildcard. Also, you can define exclusion patterns, starting with ‘!’. For an association to match, at least one pattern needs to match and the last matching pattern must not be an exclusion pattern.

    Define snippets in JSON schemas

    JSON schemas describe the shape of the JSON file, as well as value sets and default values, which are used by the JSON language support to provide completion proposals. If you are a schema author and want to provide even more customized completion proposals, you can also specify snippets in the schema.

    The following example shows a schema for a key binding settings file defining a snippet:

    1. {
    3.     "items": {
    4.         "type": "object",
    5.         "required": ["key"],
    6.         "defaultSnippets": [
    7.             {
    8.                 "label": "New keybinding",
    9.                 "description": "Binds a key to a command for a given state",
    10.                 "body": { "key": "$1", "command": "$2", "when": "$3" }
    11.             }
    12.         ],
    13.         "properties": {
    14.             "key": {
    15.                 "type": "string"
    16.             }
    17.             ...
    18.         }
    19.     }
    20. }

    This is an example in a JSON schema:

    Use the property defaultSnippets to specify any number of snippets for the given JSON object.

    • label and description will be shown in the completion selection dialog. If no label is provided, a stringified object representation of the snippet will be shown as label instead.

    Note that defaultSnippets is not part of the JSON schema specification but a VS Code-specific schema extension.

    Offline mode

    A warning triangle will show in the status bar when the current editor would like to use schemas that can not be downloaded.