eslint-plugin-chakra-ui
v0.11.0
Published
ESLint Plugin for Chakra UI
Downloads
25,079
Maintainers
Readme
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 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.
Contributing
See contributing guide.
Prior Art
This plugin is inspired by eslint-plugin-tailwind-css.