0.7.8 • Published 1 year ago
@teamgoodup/eslint-plugin-chakra-ui v0.7.8
teamgoodup-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 teamgoodup-eslint-plugin-chakra-ui
, @typescript-eslint/parser
:
npm install teamgoodup-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-shorthand": "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.
0.7.8
1 year ago