{"id":19707,"library":"eslint-plugin-chakra-ui","title":"eslint-plugin-chakra-ui","description":"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.","status":"active","version":"0.12.0","language":"javascript","source_language":"en","source_url":"https://github.com/yukukotani/eslint-plugin-chakra-ui","tags":["javascript","eslint","eslintplugin","eslint-plugin","Chakra UI","chakra-ui"],"install":[{"cmd":"npm install eslint-plugin-chakra-ui","lang":"bash","label":"npm"},{"cmd":"yarn add eslint-plugin-chakra-ui","lang":"bash","label":"yarn"},{"cmd":"pnpm add eslint-plugin-chakra-ui","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for typed linting; the plugin uses TypeScript type information to identify Chakra components.","package":"@typescript-eslint/parser","optional":false},{"reason":"Peer dependency, version >=6 required.","package":"eslint","optional":false}],"imports":[{"note":"ESM default import is needed for flat config. CommonJS require still works but is not recommended for flat config.","wrong":"const chakraUiPlugin = require('eslint-plugin-chakra-ui')","symbol":"default","correct":"import chakraUiPlugin from 'eslint-plugin-chakra-ui'"},{"note":"To access recommended configs, import directly from the plugin.","wrong":"const { configs } = require('eslint-plugin-chakra-ui')","symbol":"configs","correct":"import { configs } from 'eslint-plugin-chakra-ui'"},{"note":"Access individual rules if needed, but typically rules are used via a plugin prefix.","wrong":null,"symbol":"rules","correct":"import { rules } from 'eslint-plugin-chakra-ui'"}],"quickstart":{"code":"import parser from '@typescript-eslint/parser';\nimport chakraUiPlugin from 'eslint-plugin-chakra-ui';\n\nexport default [\n  {\n    plugins: {\n      'chakra-ui': chakraUiPlugin,\n    },\n    languageOptions: {\n      parser,\n      parserOptions: {\n        project: ['./tsconfig.json'],\n        tsconfigRootDir: import.meta.dirname,\n      },\n    },\n    rules: {\n      ...chakraUiPlugin.configs.recommended,\n    },\n  },\n];","lang":"javascript","description":"Shows flat ESLint config setup with @typescript-eslint/parser and recommended rules for Chakra UI."},"warnings":[{"fix":"Upgrade @typescript-eslint/parser and @typescript-eslint/eslint-plugin to v6 or higher.","message":"Version 0.10.0 drops support for typescript-eslint v5. Requires v6+.","severity":"breaking","affected_versions":">=0.10.0"},{"fix":"Review and update snapshots; run eslint --fix to apply new order.","message":"Version 0.9.0 changes property sorting order, potentially breaking existing style fixes.","severity":"breaking","affected_versions":">=0.9.0"},{"fix":"Install @typescript-eslint/parser and configure parserOptions.project and tsconfigRootDir.","message":"Plugin requires @typescript-eslint/parser even for JavaScript files, as it uses TypeScript type information.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Migrate to flat config using eslint.config.js and import plugin as default.","message":"Flat config (eslint.config.js) is preferred; .eslintrc configs are legacy and may not be supported in future versions.","severity":"deprecated","affected_versions":">=0.12.0"},{"fix":"Ensure components are imported from '@chakra-ui/react' or similar known sources.","message":"Rules may not work as expected if the component is not recognized as a Chakra component (e.g., due to re-exports).","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install @typescript-eslint/parser --save-dev","cause":"Missing @typescript-eslint/parser dependency.","error":"Error: Failed to load parser '@typescript-eslint/parser'"},{"fix":"Add parser: '@typescript-eslint/parser' to languageOptions.","cause":"Flat config missing parser in languageOptions.","error":"Error: Parsing error: \"project\" has been set in the parser options. However, the \"parser\" property has not been set."},{"fix":"Use default import: import chakraUiPlugin from 'eslint-plugin-chakra-ui'; then chakraUiPlugin.configs.recommended.","cause":"Trying to access configs from CommonJS require incorrectly.","error":"TypeError: Cannot read properties of undefined (reading 'recommended')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}