eslint-plugin-chakra-ui

ESLint rules for Chakra UI.

Requirement

This plugin depends on TypeScript to check whether the component is a Chakra component or not. You need to install @typescript-eslint/parser but you can still write vanilla JavaScript.

TypeScript 4.4 or higher is supported. We don't test 4.3 or below but it probably works.

typescript-eslint v8 or higher is supported. v7 or below is NOT supported.

Installation

You'll first need to install ESLint.

npm i eslint --save-dev

Next, install eslint-plugin-chakra-ui, @typescript-eslint/parser.

npm install eslint-plugin-chakra-ui @typescript-eslint/parser --save-dev

Then set the parser property and add chakra-ui to the plugins property of your eslint.congig.{js,mjs,cjs} configuration file. You also need to set project and tsconfigRootDir in parserOptions to enable TypeScript information.

import parser from "@typescript-eslint/parser";
import chakraUiPlugin from "eslint-plugin-chakra-ui";

export default {
  plugins: {
    "chakra-ui": chakraUiPlugin,
  },
  languageOptions: {
    parserOptions: {
      parser,
      project: ["./tsconfig.json"],
      tsconfigRootDir: __dirname, // or import.meta.dirname
    },
  },
};

Now you can add chakra-ui rules:

export default {
  // ...
  rules: {
    "chakra-ui/props-order": "error",
    "chakra-ui/props-shorthand": "error",
    "chakra-ui/require-specific-component": "error",
  },
};

You can also load rules in bulk by accessing recommended:

export default {
  // ...
  rules: {
    ...chakraUiPlugin.configs.recommended,
  },
};

Supported Rules

Every rule is fixable with eslint --fix.

• props-order: Enforces order of properties to be semantical
• props-shorthand: Enforces the usage of shorthand property or vice-versa
• require-specific-component: Enforces the usage of specific Chakra components instead of Box components with an attribute.

Contributing

See contributing guide.

Prior Art

This plugin is inspired by eslint-plugin-tailwind-css.