XState VSCode enhances the XState development experience by providing VSCode users with features like visual editing, autocomplete, typegen and linting.
Visually edit machines
Edit any XState machine with drag-and-drop using the Stately Visual editor.
Intelligent suggestions for transition targets and initial states.
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.
As an experimental feature, we include a snippet with this extension,
You will get an untyped machine if you type
Hints and Tips
If you'd like to ignore linting/autocomplete on a machine, add a
Nesting typegen files
If you're using typegen, you can nest the files in VSCode.
We try to detect if you want to have your typegen files nested. This is set to
If you choose to enable file nesting using the prompt, we will set the file nesting feature in VSCode to
If you choose not to enable it, we will set
You can read about this in more detail in our blog post: Nesting XState typegen files.
Click the lightbulb when hovering an named action, guard or service in a machine to see available refactors.