eslint-plugin-xstate

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"
  }
}

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:

Stylistic Issues

Rule	Description	Recommended
event-names	Suggest using MACRO_CASE for events

TODO

• write docs for no-infinite-loop
• add test for no-infinite-loop
• add an option to restrict some matchers to the scope of state machine declarations
• improve event-names to lint type values in event objects
• recommend not using inline implementations of actions, services, guards, activities
• 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)