Registry / testing / eslint-plugin-chakra-ui

eslint-plugin-chakra-ui

library0.12.0jsnpmunverified

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.

testing

npm install eslint-plugin-chakra-ui

github ↗package ↗

INSTALL

IMPORT

SIG · ESLINT-PLUGIN-CHAK

eslint-plugin-chakra-ui

testingjavascriptv0.12.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import chakraUiPlugin from 'eslint-plugin-chakra-ui'

✗ const chakraUiPlugin = require('eslint-plugin-chakra-ui')

ESM default import is needed for flat config. CommonJS require still works but is not recommended for flat config.

configs

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

✗ const { configs } = require('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.

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, }, }, ];

Debug

Known issues

breakingVersion 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.

affects: >=0.10.0

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

fix

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

affects: >=0.9.0

gotchaPlugin 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.

affects: >=0.1.0

deprecatedFlat 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.

affects: >=0.12.0

gotchaRules 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.

affects: >=0.1.0

Errors

Common errors & fixes

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

Missing @typescript-eslint/parser dependency.

fix

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

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

Flat config missing parser in languageOptions.

fix

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

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

Trying to access configs from CommonJS require incorrectly.

fix

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

Upgrade

Version history

0.12.0latest on npm

Audit

Dependencies

@typescript-eslint/parserrequiredRequired for typed linting; the plugin uses TypeScript type information to identify Chakra components.

eslintrequiredPeer dependency, version >=6 required.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/yukukotani/eslint-plugin-chakra-ui ↗

packagehttps://www.npmjs.com/package/eslint-plugin-chakra-ui ↗