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”.

Lint components

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

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.

Template links

(Twig-only)

Linked template file references in Twig templates.

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.

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.

Sponsors