ESLint Plugin JSX Control Statements

3.0.0 verified Sat Apr 25 auth: no javascript

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.

Common errors

error Definition for rule 'jsx-control-statements/jsx-if-require-condition' was not found. ↓

cause The plugin is not installed or not listed in the plugins array.

fix

Run npm install eslint-plugin-jsx-control-statements and add "plugins": ["jsx-control-statements"]

error 'If' is not defined no-undef ↓

cause The no-undef rule is enabled but globals are not declared.

fix

Enable the environment: "env": { "jsx-control-statements/jsx-control-statements": true } OR set "react/jsx-no-undef": [2, { "allowGlobals": true }]

error Parsing error: Unexpected token < ↓

cause ESLint is not configured for JSX parsing.

fix

Add "parserOptions": { "ecmaFeatures": { "jsx": true } } or use babel-eslint parser.

Warnings

gotcha 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. ↓

fix Set rule: "react/jsx-no-undef": [2, { "allowGlobals": true }]

gotcha The no-undef ESLint built-in rule conflicts with jsx-jcs-no-undef. You must disable no-undef if using jsx-jcs-no-undef. ↓

fix Set "no-undef": 0 and enable "jsx-control-statements/jsx-jcs-no-undef": 1

breaking Version 3.0.0 changed how the recommended config works. It now sets the environment automatically. ↓

fix If using alternative config, verify the env is no longer needed manually.

deprecated The deprecated eslintConfig format from previous major versions no longer works. Use the plugin format. ↓

fix Ensure you follow the new JSON configuration with plugins array.

Install

npm install eslint-plugin-jsx-control-statements

yarn add eslint-plugin-jsx-control-statements

pnpm add eslint-plugin-jsx-control-statements

Imports

plugin

wrong

// Do not import the plugin directly in code; it's an ESLint plugin loaded via config.

correct

// In .eslintrc: { "plugins": ["jsx-control-statements"] }

The plugin is not imported in source files; it's configured in ESLint's config file.

recommended config

wrong

// Wrong: using "extends": ["eslint:recommended", "plugin:jsx-control-statements/recommended"] is fine, but forgetting the plugin entry breaks.

correct

// .eslintrc: { "extends": ["plugin:jsx-control-statements/recommended"] }

The recommended config requires both 'plugins' and 'extends' entries.

env

wrong

// Wrong: using env: { "jsx-control-statements": true } without the full path.

correct

// .eslintrc: { "env": { "jsx-control-statements/jsx-control-statements": true } }

The environment is namespaced under the plugin name.

Quickstart

Shows minimal ESLint configuration to enable the plugin and its recommended rules, including the environment to avoid no-undef errors for control components.

// Install:
// npm install eslint eslint-plugin-react eslint-plugin-jsx-control-statements --save-dev
// .eslintrc.json:
{
  "plugins": ["react", "jsx-control-statements"],
  "extends": ["plugin:react/recommended", "plugin:jsx-control-statements/recommended"],
  "rules": {
    "react/jsx-no-undef": [2, { "allowGlobals": true }]
  },
  "env": {
    "jsx-control-statements/jsx-control-statements": true
  }
}
// Now lint a file with <If condition={true}><span>Hello</span></If>