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.
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"
}
}
Every rule is fixable with eslint --fix
.
props-order
: Enforces order of properties to be semanticalprops-shorthand
: Enforces the usage of shorthand property or vice-versarequire-specific-component
: Enforces the usage of specific Chakra components instead of Box components with an attribute.
This plugin is inspired by eslint-plugin-tailwind-css.