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.

Name	Description	💼	🔧
consistent-syntax	Enforces React import style across your code. Can be customized to use default or namespace import.	✅	🔧

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'],
  },
};