Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

eslint-plugin-jsx-control-statements

vkbansal63.2kMIT3.0.0

jsx-control-statements specific linting rules for ESLint

eslint-plugin, eslintplugin, eslint, react, jsx-control-statements

readme

ESLint-plugin-JSX-control-statements

NPM version Build Status Dependency Status Coverage Status Code Climate

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-for-require-body": 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
  }
}

Important:

After version 7.0.0 of eslint-plugin-react the rule react/jsx-no-undef it's not checking globals by default anymore. So you need to enable this to avoid lint errors telling that "If", "Choose", etc. are not defined. To fix this add to your rules:

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

 }

List of supported rules

Credits

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

License

MIT License. Copyright(c) Vivek Kumar Bansal

changelog

Changelog

All the changes can be found below. Order used:

  • Added
  • Changed
  • Deprecated
  • Removed
  • Fixed
  • Security

v3.0.0

Added

  • Rule for <For/> body prop

Security

  • Updated packages to latest versions.

v2.2.1

Added

  • add plugin to the recommended config

Fixed

  • Updated Readme: Add important information to avoid lint errors after a break change on eslint-plugin-react lib.

v2.2.0

Added

  • Support for With control statement

v2.1.1

Fixed

  • Fixed error when using nested For loops.

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

v2.0.1

Fixed

  • Fixed working on node v0.10 and v0.12.

v2.0.0

Removed

  • removed jsx-for-single-child (Multiple children are now supported).
  • removed jsx-if-single-child (Multiple children are now supported).
  • removed jsx-for-require-index.
  • removed lodash dependency.

v1.0.2

Fixed

  • Fixed: Allow JSX Expression to be used as child inside If and For tags.

v1.0.1

Changed

  • Internal: Refactor code.

Fixed

  • Fix build on node v0.x and iojs.

v1.0.0

Added

  • Rule jsx-for-require-each.
  • Rule jsx-for-require-index.
  • Rule jsx-for-require-of.

Changed

  • Renamed jsx-if-condition to jsx-if-require-condition.

0.2.0

Added

  • Rule: jsx-for-single-child.
  • Rule: jsx-use-if-tag.

0.1.1

Fixed

  • Fix false negatives in jsx-if-single-child.

0.1.0

Initial release

Added

  • Rule: jsx-if-condition.
  • Rule: jsx-if-single-child.