eslint-plugin-jsx-control-statements

ESLint-plugin-JSX-control-statements

Installation

Install ESLint either locally or globally.

$ npm install eslint

If you installed ESLint globally, you have to install React plugin globally too. Otherwise, install it locally.

$ npm install eslint-plugin-jsx-control-statements

Configuration (Simple)

Add plugins section and specify ESLint-plugin-JSX-Control-Statements as a plugin and plugin:jsx-control-statements/recommended to "extends"

{
  "plugins": [
    "jsx-control-statements"
  ],
  "extends": ["plugin:jsx-control-statements/recommended"]
}

If it is not already the case you must also configure ESLint to support JSX.

{
  "ecmaFeatures": {
    "jsx": true
  }
}

Configuration (Advanced)

The plugin comes with a number of rules and an environment that sets the control statements (<If>, <For> etc) as global variables:

{
  "rules": {
    "jsx-control-statements/jsx-choose-not-empty": 1,
    "jsx-control-statements/jsx-for-require-each": 1,
    "jsx-control-statements/jsx-for-require-of": 1,
    "jsx-control-statements/jsx-if-require-condition": 1,
    "jsx-control-statements/jsx-otherwise-once-last": 1,
    "jsx-control-statements/jsx-use-if-tag": 1,
    "jsx-control-statements/jsx-when-require-condition": 1,
    "jsx-control-statements/jsx-jcs-no-undef": 1,
    "no-undef": 0 // Replace this with jsx-jcs-no-undef
  },
  env: {
    "jsx-control-statements/jsx-control-statements": true
  }
}

List of supported rules

• jsx-choose-not-empty: Warn when Choose tag is empty or does not have at least one When tag as child.
• jsx-for-require-each: Warn if For tag is missing each attribute. And also marks the variable as defined.
• jsx-for-require-of: Warn if For tag is missing of attribute.
• jsx-if-require-condition: Warn if If tag is missing condition attribute.
• jsx-otherwise-once-last: Warn when Otherwise tag is used more than once inside Choose and is not last child.
• jsx-use-if-tag: Use If tag instead of ternary operator.
• jsx-when-require-condition: Warn if When tag is missing condition attribute.
• jsx-jcs-no-undef: Replaces the built-in no-undef rule with one that is tolerant of variables expressed in <For> (each and index attributes). Note that to stop getting errors from no-undef you have to turn it off and this on.

Credits

Thanks to @yannickcr for his awesome eslint-plugin-react.

License

MIT License. Copyright(c) Vivek Kumar Bansal

Changelog

v2.1.0

Added

• Added jsx-jcs-no-undef rule that replaces the built-in no-undef rule with one that is tolerant of variables expressed in <For>.