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

# Eslint Config React TS

This package provides `eslint` config for the `react` projects use the typescript.

> 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-reactts 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-reactts';

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

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

```json
{
  "scripts": {
    "lint": "eslint \"src/**/*.{ts,tsx}\"",
    "lint:fix": "pnpm lint --fix"
  }
}
```

#### 4. `tsconfig.eslint.json` and `tsconfig.json`.

- Search for the `tsconfig.eslint.json` file from the folder containing the `eslint.config.js` file up to the root folder.
- if `tsconfig.eslint.json` file is not found. The `tsconfig.json` file in the current folder will be used.
- If you have a `tsconfig.json` file and its `include` paths include all the files you'd like to lint, you can directly use that file without using the `tsconfig.eslint.json` file.

### 5. Monorepo

- Should only create a `tsconfig.eslint.json` in root monorepo.
- `parserOptions.project` supports `['./tsconfig.eslint.json', './packages/*/tsconfig.json', './apps/*/tsconfig.json']`.

## Configuration your `VScode`.

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

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

```js
{
  "eslint.experimental.useFlatConfig": true,
  // if the `eslint.config.js` file is in 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"]
  }
}
```