{"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,"search_vec":"'/parser':35 '0.12.0':26 '4.4':44 '6':39 'activ':79 'auto':89 'auto-fix':88 'base':98 'chakra':4,9,52,68,94,112,121,124 'chakra-ui':123 'codebas':110 'compon':21,53,114 'config':30 'current':23 'depend':92 'detect':51 'enforc':19 'eslint':2,6,29,34,38,116,119 'eslint-plugin':118 'eslint-plugin-chakra-ui':1 'eslintplugin':117 'fixabl':90 'flat':28 'frequent':82 'generic':61 'group':72 'includ':15 'inform':49 'integr':56 'javascript':115 'knowledg':97 'librari':103 'lint':13,59 'maintain':80 'make':105 'map':75 'order':17 'plugin':3,7,65,77,120 'prop':16,63,71 'prop-sort':62 'provid':8 'releas':83 'requir':31 'rule':14,86 'semant':70 'shorthand':18,74 'sort':64 'specif':12 'stabl':24 'substitut':22 'suitabl':107 'support':27 'type':48,58 'typescript':33,43,47 'typescript-eslint':32 'ui':5,11,95,113,122,125 'ui-specif':10 'understand':67 'unlik':60 'use':46,111 'v8':36 'version':25 'work':41","created_at":"2026-04-25T11:19:13.507860+00:00","updated_at":"2026-04-25T11:19:13.507860+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/yukukotani/eslint-plugin-chakra-ui","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/eslint-plugin-chakra-ui","openapi_spec":null,"status_page":null,"smithery":null,"categories":["testing"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-24","install_tag":null}}