eslint-plugin-jsx-fragments

Ensure that React is imported whenever the fragment syntax is used

Installation

You'll first need to install ESLint:

$ npm i eslint --save-dev

Next, install eslint-plugin-jsx-fragments:

$ npm install eslint-plugin-jsx-fragments --save-dev

Usage

Add jsx-fragments to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
  "plugins": ["jsx-fragments"]
}

Recommended configuration

The recommended configuration can be used in conjunction with eslint-plugin-react.

{
  "extends": ["plugin:react/recommended", "plugin:jsx-fragments/recommended"]
}

It applies these rules.

{
  "rules": {
    "jsx-fragments/react-in-fragment-scope": "error",
    "jsx-fragments/fragment-uses-react": "error"
  }
}

Manual rule setup

You can also use the rule manually.

{
  "rules": {
    "jsx-fragments/react-in-fragment-scope": 2,
    "jsx-fragments/react-in-fragment-scope": 1
  }
}

Supported Rules

• jsx-fragments/react-in-fragment-scope: Similar to react/react-in-jsx-scope but it ignores custom pragmas and only checks files that contain fragments.