no-yan / eslint-plugin-chakra-ui

ESLint plugin for Chakra UI

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.

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 configuration file:

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["chakra-ui"]
}

Now you can add chakra-ui rules:

{
  "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.

Prior Art

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