eslint-plugin-xstate
ESLint plugin to check for common mistakes and enforce good practices when using XState library.
Installation
You'll first need to install ESLint:
$ npm i eslint --save-dev
Next, install eslint-plugin-xstate
:
$ npm install eslint-plugin-xstate --save-dev
Usage
Add xstate
to the plugins section of your .eslintrc
configuration file. You can omit the eslint-plugin-
prefix:
{
"plugins": ["xstate"]
}
Then configure the rules you want to use under the rules section.
{
"rules": {
"xstate/spawn-usage": "error",
"xstate/no-infinite-loop": "error",
"xstate/event-names": "warn",
"xstate/no-inline-implementation": "warn"
}
}
Shareable Configurations
This plugin exports a recommended
configuration which checks for common mistakes. To enable this configuration use the extends
property in your .eslintrc.js
config file:
{
"extends": ["plugin:xstate/recommended"]
}
There is also an all
configuration which includes every available rule. It enforces both correct usage and best XState practices.
{
"extends": ["plugin:xstate/all"]
}
Supported Rules
Possible Errors
Rule | Description | Recommended |
---|
spawn-usage | Enforce correct usage of spawn | :heavy_check_mark: |
no-infinite-loop | Detect infinite loops with eventless transitions | :heavy_check_mark: |
Best Practices
Stylistic Issues
Rule | Description | Recommended |
---|
event-names | Suggest using MACRO_CASE for events | |
TODO
- add test for no-infinite-loop
- add an option to restrict some matchers to the scope of state machine declarations
- detect imperative usage of action creators
- the onDone transition should not be defined on the root node of the machine
- detect incorrect usage of invoke
- detect invalid usage of transition declaration for actions (guarded entry/exit actions must be done with
choose
) - onDone transition declared on a state node instead of within
invoke
. onDone is valid on compound state nodes only.