npm package: @febase/eslint-config-react
Description: Shared eslint react config
Author: 2tl
Latest version: 1.6.0

# Eslint Config React JS

This package provides `eslint` config for the `reactjs` projects.

> Only support the new [Eslint flat config](https://eslint.org/docs/latest/use/configure/configuration-files-new).

## Prettier and Linters

1. [Prettier Config](https://www.npmjs.com/package/@febase/prettier-config): `Prettier` config for the `Front-end` projects.
2. [Prettier Config](https://www.npmjs.com/package/@febase/prettier-config-svelte): `Prettier` config for the `Svelte` projects.
3. [Eslint Config Base](https://www.npmjs.com/package/@febase/eslint-config-base): `Eslint` config for the `Javascript` projects.
4. [Eslint Config Typescript](https://www.npmjs.com/package/@febase/eslint-config-ts): `Eslint` config for the `Typescript` projects.
5. [Eslint Config React JS](https://www.npmjs.com/package/@febase/eslint-config-react): `Eslint` config for the `React JS` projects.
6. [Eslint Config React TS](https://www.npmjs.com/package/@febase/eslint-config-reactts): `Eslint` config for the `React TS` projects.
7. [Eslint Config Next JS](https://www.npmjs.com/package/@febase/eslint-config-next): `Eslint` config for the `Next JS` projects.
8. [Eslint Config Next TS](https://www.npmjs.com/package/@febase/eslint-config-nextts): `Eslint` config for the `Next TS` projects.
9. [Eslint Config Lit JS](https://www.npmjs.com/package/@febase/eslint-config-lit): `Eslint` config for the `Lit JS` projects.
10. [Eslint Config Lit TS](https://www.npmjs.com/package/@febase/eslint-config-litts): `Eslint` config for the `Lit TS` projects.
11. [Eslint Config Node ESM](https://www.npmjs.com/package/@febase/eslint-config-node-esm): `Eslint` config for the `Node Esm` projects.
12. [Eslint Config Svelte JS](https://www.npmjs.com/package/@febase/eslint-config-svelte): `Eslint` config for the `Svelte` projects.
13. [Eslint Config Svelte TS](https://www.npmjs.com/package/@febase/eslint-config-sveltets): `Eslint` config for the `Svelte TS` projects.

> and more to come.

## Usage

#### 1. Install package

```sh
pnpm add -D @febase/eslint-config-react eslint
```

#### 2. Add config to your `eslint.config.js`. Please read more about [Eslint Flat Config](https://eslint.org/docs/latest/use/configure/configuration-files-new).

```js
import { config } from '@febase/eslint-config-react';

export default [...config];
```

If you only want to use standalone `react config`.

```js
import { reactConfig } from '@febase/eslint-config-react';

export default [reactConfig];
```

#### 3. Add script to your `package.json`.

```json
{
  "scripts": {
    "lint": "eslint \"src/**/*.{js,jsx}\"",
    "lint:fix": "pnpm lint"
  }
}
```

## Configuration your `VScode`.

In root your project's folder. Create `.vscode` folder with structure:

```sh
.vscode
  - settings.json
```

```js
{
  "eslint.experimental.useFlatConfig": true,
  // if mono-repo please remove comment of the below line.
  // "eslint.workingDirectories": [{ "pattern": "./apps/*/" }, { "pattern": "./packages/*/" }],
  "eslint.options": {
    "overrideConfigFile": "eslint.config.js"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}
```

## Setup git hooks

- Install packages and global setup `husky`, `lint-staged`.

```sh
pnpm add -D husky lint-staged
pnpm dlx husky install
pnpm pkg set scripts.prepare="husky install"
pnpm dlx husky add .husky/pre-commit "pnpm dlx lint-staged"
```

- Add the following to your `package.json`:

```json
{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": ["pnpm format", "pnpm lint:fix"],
    "*.{json,css,md,html}": ["pnpm format"]
  }
}
```