ESLint Plugin for Chakra UI
npm install eslint-plugin-chakra-ui

ESLint rules for Chakra UI.
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.
You'll first need to install ESLint.
``sh`
npm i eslint --save-dev
Next, install eslint-plugin-chakra-ui, @typescript-eslint/parser.
`sh`
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.
`js
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:
`js`
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:
`js`
export default {
// ...
rules: {
...chakraUiPlugin.configs.recommended,
},
};
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.
See contributing guide.
This plugin is inspired by eslint-plugin-tailwind-css.