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

Add plugins section and specify ESLint-plugin-JSX-Control-Statements as a plugin. Also add If and For to globals.

{
  "plugins": [
    "jsx-control-statements"
  ],
  "globals": {
      "If": true,
      "For": true
  }
}

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

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

Finally, enable all of the rules that you would like to use.

{
  "rules": {
    "jsx-control-statements/jsx-choose-not-empty": 1,
    "jsx-control-statements/jsx-for-require-each": 1,
    "jsx-control-statements/jsx-for-require-index": 1,
    "jsx-control-statements/jsx-for-require-of": 1,
    "jsx-control-statements/jsx-for-single-child": 1,
    "jsx-control-statements/jsx-if-require-condition": 1,
    "jsx-control-statements/jsx-if-single-child": 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
  }
}

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-index: Warn if For tag is missing index attribute. And also marks the variable as defined.
• jsx-for-require-of: Warn if For tag is missing of attribute.
• jsx-for-single-child: Warn if For tags does not have single child.
• jsx-if-require-condition: Warn if If tag is missing condition attribute.
• jsx-if-single-child: Warn if If and Else tags does not have single child.
• 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.

Credits

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

License

MIT License. Copyright(c) Vivek Kumar Bansal