ESLint Rules

yasml provides a ESLint rule package that will help you write your state in a more performant way.

By enabling this rule you can ensure that your state is written in a way that will not cause unnecessary re-renders.

Note: You don’t need this ESLint plugin if you use the Vite codegen plugin. The codegen generates the useSelector arguments for you at build time, so there’s nothing for the rule to enforce. See CodeGen with Vite for details.

Installation

npm install --save-dev @thirtytech/eslint-plugin-yasml @typescript-eslint/parser @typescript-eslint/eslint-plugin

Usage

{
  "parser": "@typescript-eslint/parser",
  "root": true,
  "parserOptions": {
    "ecmaVersion": 2018,
    "project": true
  },
  "rules": {
    "@thirtytech/yasml/match-export-parameters": "warn"
  },
  "extends": [
    "eslint:recommended",
    "plugin:@thirtytech/yasml/recommended"
  ],
  "plugins": ["@typescript-eslint", "@thirtytech/yasml"]
}

You’ll add the yasml plugin to the list of utilized plugins and then apply the rule using the rules configuration section.

By convention ESLint plugins strip out the eslint-plugin from the package name. So don’t be confused why the package is called @thirtytech/eslint-plugin-yasml but the rule is called @thirtytech/yasml/match-export-parameters.

Severity and auto-fix

The rule is reported as a warning by default, so it won’t fail your build or block a commit. It also ships a code fix, which means your editor can offer a quick auto-complete to rewrite the useSelector call with the correct arguments — or you can apply it across the project with eslint --fix.