eslint-plugin-react-import v1.1.1

eslint-plugin-react-import

ESLint plugin to ensure consistent react imports

!WARNING This plugin supports eslint 8 but do not expose legacy configs. See the guide below use this plugin with legacy config

Rules

💼 Configurations enabled in.\ ✅ Set in the recommended configuration.\ 🔧 Automatically fixable by the --fix CLI option.

Installation

npm i --save-dev eslint eslint-plugin-react-import

yarn add --dev eslint eslint-plugin-react-import

pnpm add --save-dev eslint eslint-plugin-react-import

Configuration

!TIP For a working example check tests/fixtures folders

Javascript

// eslint.config.js
import eslintPluginReactImport from 'eslint-plugin-react-import';
export default [
  // other configs
  // ...
  eslintPluginReactImport.configs.recommended,
];

Typescript

!NOTE In order to replace all type occurrences typescript parser should be used

// eslint.config.js
import eslintPluginReactImport from 'eslint-plugin-react-import';
import typescriptEslintParser from '@typescript-eslint/parser';

export default [
  // other configs
  // ...
  {
    ...eslintPluginReactImport.configs.recommended,
    languageOptions: {
      ...eslintPluginReactImport.configs.recommended.languageOptions,
      parser: typescriptEslintParser,
    },
  },
];

Configuration (legacy eslintrc)

For legacy config there is no exported config. Since this plugin include one rule you just need to add the plugin name to plugins list and configure the rules:

module.exports = {
  root: true,
  plugins: [
    // Other plugins...
    'react-import',
  ],
  // Remember to change parser if you are using ts
  parser: '@typescript-eslint/parser',
  parserOptions: {
    // ...
  },
  rules: {
    // Configure the rule
    'react-import/consistent-syntax': ['error', 'namespace'],
  },
};