Blog Logo

ESLint rules for Chakra UI

# eslint-plugin-chakra-ui [![npm](]( [![license](]( 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 dont test 4.3 or below but it probably works. Youll 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 `.eslintrc` configuration file: ```json { parser: @typescript-eslint/parser, plugins: [chakra-ui] } ``` Now you can add chakra-ui rules: ```json { 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. ## Contributing See [contributing guide]( ## Prior Art This plugin is inspired by [eslint-plugin-tailwind-css](