# eslint-plugin-react-import

[![CI][CIBadge]][CIURL]
[![Code style: prettier][CodeStyleBadge]][CodeStyleURL]
[![Lint: eslint][lintBadge]][lintURL]
[![npm version][npmVersionBadge]][npmVersionURL]
[![issues][issuesBadge]][issuesURL]

[CIBadge]: https://img.shields.io/github/actions/workflow/status/marcalexiei/eslint-plugin-react-import/ci.yml?style=for-the-badge&logo=github&event=push&label=CI
[CIURL]: https://github.com/marcalexiei/eslint-plugin-react-import/actions/workflows/CI.yml/badge.svg
[CodeStyleBadge]: https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge&logo=prettier
[CodeStyleURL]: https://prettier.io
[npmVersionBadge]: https://img.shields.io/npm/v/eslint-plugin-react-import.svg?style=for-the-badge&logo=npm
[npmVersionURL]: https://www.npmjs.com/package/eslint-plugin-react-import
[lintBadge]: https://img.shields.io/badge/lint-eslint-3A33D1?logo=eslint&style=for-the-badge
[lintURL]: https://eslint.org
[issuesBadge]: https://img.shields.io/github/issues/marcalexiei/eslint-plugin-react-import.svg?style=for-the-badge
[issuesURL]: https://github.com/marcalexiei/eslint-plugin-react-import/issues

ESLint plugin to ensure consistent react imports

## Rules

<!-- begin auto-generated rules list -->

💼 Configurations enabled in.\
✅ Set in the `recommended` configuration.\
🔧 Automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/user-guide/command-line-interface#--fix).

| Name                                                 | Description                                                                                                 | 💼  | 🔧  |
| :--------------------------------------------------- | :---------------------------------------------------------------------------------------------------------- | :-- | :-- |
| [consistent-syntax](docs/rules/consistent-syntax.md) | Enforces React import style across your code. Can be customized to use default, namespace, or named import. | ✅  | 🔧  |

<!-- end auto-generated rules list -->

## Installation

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

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

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

## Configuration

> [!TIP]
> For a working example check `tests/fixtures` folders

### Javascript

```js
// 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

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