{"id":19815,"library":"eslint-plugin-jsx-control-statements","title":"ESLint Plugin JSX Control Statements","description":"ESLint plugin providing linting rules for JSX control statement components like <If>, <Choose>, <For>, <When>, <Otherwise>, and <With>. Current stable version is 3.0.0. Designed for use with eslint-plugin-react, it helps enforce best practices when using conditional and loop JSX syntax. The plugin comes with a set of rules to catch common mistakes such as missing required attributes, incorrect nesting, and it also provides an environment to declare these components as globals. Use the recommended config or manually enable rules along with the jsx-control-statements environment. Requires ESLint >=6.0.0.","status":"active","version":"3.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/vkbansal/eslint-plugin-jsx-control-statements","tags":["javascript","eslint-plugin","eslintplugin","eslint","react","jsx-control-statements"],"install":[{"cmd":"npm install eslint-plugin-jsx-control-statements","lang":"bash","label":"npm"},{"cmd":"yarn add eslint-plugin-jsx-control-statements","lang":"bash","label":"yarn"},{"cmd":"pnpm add eslint-plugin-jsx-control-statements","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency: plugin requires ESLint >=6.0.0","package":"eslint","optional":false}],"imports":[{"note":"The plugin is not imported in source files; it's configured in ESLint's config file.","wrong":"// Do not import the plugin directly in code; it's an ESLint plugin loaded via config.","symbol":"plugin","correct":"// In .eslintrc: { \"plugins\": [\"jsx-control-statements\"] }"},{"note":"The recommended config requires both 'plugins' and 'extends' entries.","wrong":"// Wrong: using \"extends\": [\"eslint:recommended\", \"plugin:jsx-control-statements/recommended\"] is fine, but forgetting the plugin entry breaks.","symbol":"recommended config","correct":"// .eslintrc: { \"extends\": [\"plugin:jsx-control-statements/recommended\"] }"},{"note":"The environment is namespaced under the plugin name.","wrong":"// Wrong: using env: { \"jsx-control-statements\": true } without the full path.","symbol":"env","correct":"// .eslintrc: { \"env\": { \"jsx-control-statements/jsx-control-statements\": true } }"}],"quickstart":{"code":"// Install:\n// npm install eslint eslint-plugin-react eslint-plugin-jsx-control-statements --save-dev\n// .eslintrc.json:\n{\n  \"plugins\": [\"react\", \"jsx-control-statements\"],\n  \"extends\": [\"plugin:react/recommended\", \"plugin:jsx-control-statements/recommended\"],\n  \"rules\": {\n    \"react/jsx-no-undef\": [2, { \"allowGlobals\": true }]\n  },\n  \"env\": {\n    \"jsx-control-statements/jsx-control-statements\": true\n  }\n}\n// Now lint a file with <If condition={true}><span>Hello</span></If>","lang":"javascript","description":"Shows minimal ESLint configuration to enable the plugin and its recommended rules, including the environment to avoid no-undef errors for control components."},"warnings":[{"fix":"Set rule: \"react/jsx-no-undef\": [2, { \"allowGlobals\": true }]","message":"After eslint-plugin-react v7.0.0, the rule react/jsx-no-undef does not check globals by default. You must enable it with allowGlobals: true.","severity":"gotcha","affected_versions":">=7.0.0"},{"fix":"Set \"no-undef\": 0 and enable \"jsx-control-statements/jsx-jcs-no-undef\": 1","message":"The no-undef ESLint built-in rule conflicts with jsx-jcs-no-undef. You must disable no-undef if using jsx-jcs-no-undef.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"If using alternative config, verify the env is no longer needed manually.","message":"Version 3.0.0 changed how the recommended config works. It now sets the environment automatically.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Ensure you follow the new JSON configuration with plugins array.","message":"The deprecated eslintConfig format from previous major versions no longer works. Use the plugin format.","severity":"deprecated","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run npm install eslint-plugin-jsx-control-statements and add \"plugins\": [\"jsx-control-statements\"]","cause":"The plugin is not installed or not listed in the plugins array.","error":"Definition for rule 'jsx-control-statements/jsx-if-require-condition' was not found."},{"fix":"Enable the environment: \"env\": { \"jsx-control-statements/jsx-control-statements\": true } OR set \"react/jsx-no-undef\": [2, { \"allowGlobals\": true }]","cause":"The no-undef rule is enabled but globals are not declared.","error":"'If' is not defined  no-undef"},{"fix":"Add \"parserOptions\": { \"ecmaFeatures\": { \"jsx\": true } } or use babel-eslint parser.","cause":"ESLint is not configured for JSX parsing.","error":"Parsing error: Unexpected token <"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}