eslint-plugin-react-import

ESLint plugin to ensure consistent react imports

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, namespace, or named 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,
    },
  },
];