XState VS Code extension

The XState VS Code extension enhances the XState development experience by providing VS Code users with autocomplete, typegen, linting, and a visual editor inside VS Code.

Installation

1. Open the command palette with shift + cmd/ctrl + p.
2. Search for the Install Extensions command and hit enter to open the Extensions search.
3. Search for XState to find the XState VS Code extension and install the extension using the Install button.
4. Ensure you have VS Code setup to insert spaces; we have noticed problems when tabs are used for indentation.

Once installed, you can run XState: Open Visual Editor from the command palette to open any machine at your cursor’s location.

If you have code lens enabled (this can be enabled using editor.codeLens setting), ‘Open Visual Editor’ will also float above each createMachine call.

You can also download the VS Code extension from the VS Code marketplace or download the VS Code extension from the Open VSX marketplace.

Features

• Visually edit machines. Edit any XState machine with drag-and-drop using the integrated Stately Visual editor.
• Autocomplete. Intelligent suggestions for transition targets and initial states.
• Linting. Highlights errors and potential bugs in your XState machine definitions.
• Jump to definition. Navigate around machines easily with jump to definition on targets, actions, guards, actors and more.

TypeScript typegen

You can automatically generate intelligent typings for XState with our VS Code extension and command line interface. Read more about how to use typegen, and our recommended best practices, on the Typegen page.

xsm snippet

Use the xsm snippet to generate the code required for your state machine quickly. Watch the ‘XState + VS Code: xsm snippet’ video (1m23s) for a demo.

Refactors

When hovering over a named action, guard or actor in a machine, press the lightbulb icon to view available refactors.

Ignoring machines

If you’d like to ignore linting/autocomplete on a machine, add an // xstate-ignore-next-line comment on the line above the machine:

// xstate-ignore-next-line
createMachine({});

const machine =
/** @xstate-layout N4IgpgJg5mDOIC5QFEA... */
createMachine({...});