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/no-imperative-action": "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:
no-imperative-action	Forbid using action creators imperatively	:heavy_check_mark:

Best Practices

Rule	Description	Recommended
no-inline-implementation	Suggest refactoring guards, actions and services into machine options

Stylistic Issues

Rule	Description	Recommended
event-names	Suggest using MACRO_CASE for events

TODO

• 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.