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.
- Open the command palette with
- Search for the Install Extensions command and hit enter to open the Extensions search.
- Search for XState to find the XState VS Code extension and install the extension using the Install button.
- 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
- 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.
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 to generate the code required for your state machine quickly. Watch the ‘XState + VS Code: xsm snippet’ video (1m23s) for a demo.
When hovering over a named action, guard or actor 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: