eslint-plugin-react-import

Warning

🚧 Work in progress 🚧

Check #1

ESLint plugin to ensure consistent react imports

Warning

This plugin supports eslint >= 9 and only exposes flat configs

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