IDE extensions

Find more about our XState VSCode extension below. We plan to make extensions for more IDEs (Integrated Development Environments) in the future.

The XState VSCode extension enhances the XState development experience by providing VSCode users with features like visual editing, autocomplete, typegen and linting.

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 VSCode extension and install the extension using the Install button.

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 VSCode extension from the VSCode marketplace or download the VSCode extension from the Open VSX marketplace.

• 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, services and more.

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

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

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

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