WebStorm
 
2024.1
Shortcuts: Windows
Get WebStorm
You are viewing the documentation for an earlier version of WebStorm.

YAML

Last modified: 26 May 2024

WebStorm enables you to work with YAML files (.yml, .yaml) and supports the following capabilities:

Let’s explore some YAML-specific features available in the editor.

Anchors and aliases

WebStorm supports working with anchors and aliases. If you specify a new anchor in the YAML file, the editor will show a warning that this anchor is not used by any node.

YAML: unused anchor warning

The editor enables you now to complete aliases for this anchor.

YAML: complete alias

note

You can navigate from aliases to the anchor using the Ctrl0B shortcut.

To quickly find usages of an anchor, place the caret on the anchor and press Ctrl0B.

YAML: navigate to aliases

WebStorm supports the rename refactoring for anchors and aliases: Place the caret on the anchor and press ShiftF6. Alternatively, right-click the anchor and select Refactor | Rename.

https://resources.jetbrains.com/help/img/idea/2024.1/yaml_rename_anchor.png
Gif

Use the Structure tool window (Alt07) to quickly navigate through YAML files. To show or hide elements of reused anchors in the Structure tool window, click View Options use Aliased sub-trees.

YAML structure view

JSON schemas

WebStorm supports code completion and inspections for YAML files using the JSON schema. WebStorm can infer a schema automatically (based on the file location or structure), or you can select it manually. For example, if you have GitHub Actions workflow files in the .github/workflows directory, WebStorm will suggest completing its options based on the github-workflow.json schema automatically loaded from schemastore.org:

YAML: complete based on schema

You can manage loading JSON schemas using the Languages & Frameworks | Schemas and DTDs | Remote JSON Schemas page of the Settings dialog (CtrlAlt0S) .

If necessary, you can specify a path to the required schema file in Languages & Frameworks | Schemas and DTDs | JSON Schema Mappings.

tip

For more information about managing JSON schemas in WebStorm, refer to Using schemas from JSON Schema Store.

Select a JSON schema for a file

You can specify a custom schema for a particular file.

  1. Click the schema switcher in the status bar.

    Select schema for a file

  2. In the list that opens, select one of the suggested schemas or click New Schema Mapping. This will open the JSON Schema Mappings settings where you can specify a local or remote schema for your file.

Get properties from a schema

If WebStorm detects a schema for your YAML file, you can quickly insert all of its properties into that file using a dedicated action, removing the need for manual typing.

  • If a schema contains required properties, and you want to insert only these particular properties, press AltEnter (Show Context Actions) anywhere in a file and select Add missing properties.

  • If you want to insert all properties available in the schema, press AltEnter (Show Context Actions) anywhere in a file and select Fill in all properties from JSON schema.

Use $schema keyword

You can also refer to a schema right in the file itself.

  1. At the top of the file, enter # $schema:.

  2. Start typing the name of a schema file. You'll get completion for the names of schemas loaded from schemastore.org.

    If you want to use a local schema file, specify the path to it relative to the file where you want to use the schema, for example, # $schema: ./my-schema.json. This will enable the same coding assistance that you would have when you use a remote schema, including inspections, completion, and property filling actions.

    https://resources.jetbrains.com/help/img/idea/2024.1/yaml_completion_from_local_schema.png
    Gif

Copying keys

WebStorm provides the ability to copy a full path to a specific option specified in the YAML file. You can do this in two ways:

  • Place a caret to the required key and press CtrlAltShift0C.

  • Hover over the required key, right-click it and select Copy Reference.

YAML: copy references

For example, on the image above, default.server.port will be copied.

tip

You can search for nested YAML keys using flattened syntax. For instance, to find the port value in the example, press Shift twice and type default.server.port.