eslint-plugin-chakra-ui

0.12.0 verified Sat Apr 25 auth: no javascript

ESLint plugin providing Chakra UI-specific linting rules including props ordering, shorthand enforcement, and component substitution. Current stable version 0.12.0 supports flat ESLint config, requires @typescript-eslint/parser v8+ and ESLint >=6, and works with TypeScript 4.4+. It uses TypeScript type information to detect Chakra components, so it integrates with typed linting. Unlike generic prop-sorting plugins, it understands Chakra's semantic prop groupings and shorthand mappings. The plugin is actively maintained with frequent releases and all rules are auto-fixable. It depends on Chakra UI's knowledge base but not on the library itself, making it suitable for any codebase using Chakra UI components.

Common errors

error Error: Failed to load parser '@typescript-eslint/parser' ↓

cause Missing @typescript-eslint/parser dependency.

fix

npm install @typescript-eslint/parser --save-dev

error Error: Parsing error: "project" has been set in the parser options. However, the "parser" property has not been set. ↓

cause Flat config missing parser in languageOptions.

fix

Add parser: '@typescript-eslint/parser' to languageOptions.

error TypeError: Cannot read properties of undefined (reading 'recommended') ↓

cause Trying to access configs from CommonJS require incorrectly.

fix

Use default import: import chakraUiPlugin from 'eslint-plugin-chakra-ui'; then chakraUiPlugin.configs.recommended.

Warnings

breaking Version 0.10.0 drops support for typescript-eslint v5. Requires v6+. ↓

fix Upgrade @typescript-eslint/parser and @typescript-eslint/eslint-plugin to v6 or higher.

breaking Version 0.9.0 changes property sorting order, potentially breaking existing style fixes. ↓

fix Review and update snapshots; run eslint --fix to apply new order.

gotcha Plugin requires @typescript-eslint/parser even for JavaScript files, as it uses TypeScript type information. ↓

fix Install @typescript-eslint/parser and configure parserOptions.project and tsconfigRootDir.

deprecated Flat config (eslint.config.js) is preferred; .eslintrc configs are legacy and may not be supported in future versions. ↓

fix Migrate to flat config using eslint.config.js and import plugin as default.

gotcha Rules may not work as expected if the component is not recognized as a Chakra component (e.g., due to re-exports). ↓

fix Ensure components are imported from '@chakra-ui/react' or similar known sources.

Install

npm install eslint-plugin-chakra-ui

yarn add eslint-plugin-chakra-ui

pnpm add eslint-plugin-chakra-ui

Imports

default
wrong
```
const chakraUiPlugin = require('eslint-plugin-chakra-ui')
```
correct
```
import chakraUiPlugin from 'eslint-plugin-chakra-ui'
```
ESM default import is needed for flat config. CommonJS require still works but is not recommended for flat config.

configs

wrong

const { configs } = require('eslint-plugin-chakra-ui')

correct

import { configs } from 'eslint-plugin-chakra-ui'

To access recommended configs, import directly from the plugin.

rules
```
import { rules } from 'eslint-plugin-chakra-ui'
```
Access individual rules if needed, but typically rules are used via a plugin prefix.

Quickstart

Shows flat ESLint config setup with @typescript-eslint/parser and recommended rules for Chakra UI.

import parser from '@typescript-eslint/parser';
import chakraUiPlugin from 'eslint-plugin-chakra-ui';

export default [
  {
    plugins: {
      'chakra-ui': chakraUiPlugin,
    },
    languageOptions: {
      parser,
      parserOptions: {
        project: ['./tsconfig.json'],
        tsconfigRootDir: import.meta.dirname,
      },
    },
    rules: {
      ...chakraUiPlugin.configs.recommended,
    },
  },
];