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 v6 or higher is supported. v5 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 .eslintrc.js configuration file. You also need to set project and tsconfigRootDir in parserOptions to enable TypeScript information.

module.exports = {
  parser: "@typescript-eslint/parser",
  plugins: ["chakra-ui"],
  parserOptions: {
    project: true,
    tsconfigRootDir: __dirname,
  },
};

Now you can add chakra-ui rules:

module.exports = {
  // ...
  rules: {
    "chakra-ui/props-order": "error",
    "chakra-ui/props-shorthand": "error",
    "chakra-ui/require-specific-component": "error",
  },
};

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.