miyagi for VS Code

Please refer to the miyagi docs for setting up and configuring a miyagi project.

[!TIP] The extension is only activated if a miyagi configuration file is found when a workspace is opened.

When first setting up a new miyagi project, reload the VS Code window after creating the configuration file and installing dependencies.

Features

Create components
Lint components
Generate mocks
File links
- Schema and mock links
- Template links
Code completion
- Template completion
Command palette

Create components

Create new components by right-clicking on any folder inside your components folder and selecting “miyagi ➝ New Component”.

VS Code explorer context menu with the “New Component” entry highlighted.

Lint components

Lint components by right-clicking any component folder and selecting “miyagi ➝ Lint Component”.

VS Code explorer context menu with the “Lint Component” entry highlighted.

Generate mocks

Create automatic dummy mock data by right-clicking any component folder and selecting “miyagi ➝ Generate Mocks”.

File links

Schema and mock links

Linked $ref and $tpl file references in mocks and schemas.

JSON schema file opened in VS Code with a $ref link underlined and with instructions on how to follow the link.

Template links

(Twig-only)

Linked template file references in Twig templates.

Twig template file opened in VS Code with an include whose path is underlined and with instructions on how to follow the link.

Code completion

Template completion

(Twig-only)

Properties from schemas are provided as autocomplete items for IntelliSense.

The trigger characters | (all types) and . (only object and array types) can be used to confirm an item and automatically insert the trigger character. The | is used to chain Twig filters. The . is used to access Twig object keys or array indexes.

Twig template file opened in VS Code showing autocomplete items created from an accompanying schema file.

Command palette

These global commands are accessible in the command palette:

Command	Description
New Component	Create a new component by manually entering a path.
Lint All Components	Lint the entire miyagi project.
Reload	Manually trigger a miyagi config reload.

Note: The extension automatically reloads when the miyagi config changes. Only use the “Reload” command if the extension stops working.

VS Code window with an open command palette filtered to all available miyagi commands.

miyagi

Fynn Becker