@justia/eslint-config-rts/README.md

Justia's ESLint configuration for React and TypeScript projects

<!-- UPDATE-PACKAGES:START - Do not remove or modify this section -->

# `@justia/eslint-config-rts` ![version 3.0.2](https://img.shields.io/badge/version-3.0.2-blue?style=flat-square) <!-- omit from toc -->

> Justia's ESLint configuration for React and TypeScript projects

<!-- UPDATE-PACKAGES:END -->

This package is a combination of [`@justia/eslint-config-react`](https://github.com/justia/front-end-projects/tree/develop/packages/eslint-config-react) and [`@justia/eslint-config-ts`](https://github.com/justia/front-end-projects/tree/develop/packages/eslint-config-ts) with small modifications to **React** and **prettier** rules to support the combination of React and TypeScript.

## Install

Install the correct versions of the peer dependencies, which are listed by the command:

```shell
npm info "@justia/eslint-config-rts@latest" peerDependencies
```

If using **npm 5+**, use this shortcut

```shell
npx install-peerdeps --dev @justia/eslint-config-rts
```

If using npm < 5, Linux/OSX users can run

```shell
(
export PKG=@justia/eslint-config-rts;
npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)
```

Which produces and runs a command like:

```shell
npm install --save-dev @justia/eslint-config-rts eslint@^#.#.# prettier@^#.#.# eslint-config-prettier@^#.#.# eslint-plugin-import@^#.#.# eslint-plugin-prettier@^#.#.# eslint-plugin-promise@^#.#.# eslint-plugin-jsx-a11y@^#.#.# eslint-plugin-react@^#.#.# eslint-plugin-react-hooks@^#.#.# @typescript-eslint/parser@^#.#.# @typescript-eslint/eslint-plugin@^#.#.#
```

## Usage

This configuration contains all of our ESLint rules, including ECMAScript 6+, TypeScript and formatting styles. It requires the following external packages:

- `eslint`
- `prettier`
- `eslint-config-prettier`
- `eslint-plugin-import`
- `eslint-plugin-prettier`
- `eslint-plugin-promise`
- `eslint-plugin-jsx-a11y`
- `eslint-plugin-react`
- `eslint-plugin-react-hooks`
- `@typescript-eslint/parser`
- `@typescript-eslint/eslint-plugin`

After installation of packages and its peer dependencies, add the following configuration to your ESLint configuration file:

```json
{
    "extends": ["@justia/eslint-config-rts"],
    "parserOptions": {
        "project": "./tsconfig.json"
    }
}
```

Alter your `eslint` command to include `ts` files:

```shell
eslint --ext .js,.jsx,.ts,.tsx ./
```

### VS Code Issue

For those how use VS Code, it is possible you are getting the following error message:

> Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
> The file does not match your project config: .eslintrc.js.
> The file must be included in at least one of the projects provided.

To fix it you will need to add a ESLint-specific TypeScript configuration file (`tsconfig.eslint.json`):

```json
{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "noEmit": true
    },
    "include": [
        ".eslintrc.js",
        // Also re-add the patterns you define in the original `include` key.
    ]
}
```

Then change the `parserOptions.project` to `tsconfig.eslint.json`.