# eslint-config-react-moonstone

> ESLint config for React TypeScript projects

Latest version **1.3.0** (published 2022-07-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install eslint-config-react-moonstone
pnpm add eslint-config-react-moonstone
yarn add eslint-config-react-moonstone
bun add eslint-config-react-moonstone
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.0 |
| Published | 2022-07-12 |
| First published | 2022-06-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 12 |
| Unpacked size | 9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Muhammad Afifudin |
| Maintainers | afifu |
| Keywords | eslint, config, react, javascript, typescript, linter, airbnb |

## Links

- npm: https://www.npmjs.com/package/eslint-config-react-moonstone
- Repository: https://github.com/afiiif/eslint-config-react-moonstone
- Homepage: https://github.com/afiiif/eslint-config-react-moonstone#readme
- Issues: https://github.com/afiiif/eslint-config-react-moonstone/issues
- npm.io page: https://npm.io/package/eslint-config-react-moonstone

## Dependencies (12)

- [eslint-plugin-jest](https://npm.io/package/eslint-plugin-jest.md) ^26.5.3
- [eslint-plugin-react](https://npm.io/package/eslint-plugin-react.md) ^7.30.0
- [eslint-config-airbnb](https://npm.io/package/eslint-config-airbnb.md) ^19.0.4
- [eslint-plugin-import](https://npm.io/package/eslint-plugin-import.md) ^2.26.0
- [eslint-plugin-sonarjs](https://npm.io/package/eslint-plugin-sonarjs.md) ^0.13.0
- [eslint-plugin-unicorn](https://npm.io/package/eslint-plugin-unicorn.md) ^43.0.0
- [eslint-config-prettier](https://npm.io/package/eslint-config-prettier.md) ^8.5.0
- [eslint-plugin-jsx-a11y](https://npm.io/package/eslint-plugin-jsx-a11y.md) ^6.5.1
- [eslint-plugin-testing-library](https://npm.io/package/eslint-plugin-testing-library.md) ^5.5.1
- [eslint-config-airbnb-typescript](https://npm.io/package/eslint-config-airbnb-typescript.md) ^17.0.0
- [eslint-plugin-simple-import-sort](https://npm.io/package/eslint-plugin-simple-import-sort.md) ^7.0.0
- [eslint-import-resolver-typescript](https://npm.io/package/eslint-import-resolver-typescript.md) ^3.1.1

## Recent versions

- 1.3.0 (latest) — 2022-07-12
- 1.2.1 — 2022-07-01
- 1.2.0 — 2022-06-30
- 1.1.0 — 2022-06-18
- 1.0.1 — 2022-06-18
- 1.0.0 — 2022-06-17

## README

# eslint-config-react-moonstone

ESLint config for React TypeScript projects.

This config extends [eslint-config-airbnb-typescript](https://www.npmjs.com/package/eslint-config-airbnb-typescript) and [eslint-config-prettier](https://www.npmjs.com/package/eslint-config-prettier).
It provides some useful plugins which will improve your code quality.

## Installation

```sh
npm install -D eslint-config-react-moonstone
# or with yarn
yarn add -D eslint-config-react-moonstone
```

### Install peer dependencies

```sh
npm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser
# or with yarn
yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser
```

## Setup

### 1) Configure ESLint

Extend your `.eslintrc`, with `react-moonstone`.

```json
{
  "extends": ["react-moonstone"]
}
```

Or if you have another config, you can set it like this,

```json
{
  "extends": ["react-moonstone", "next/core-web-vitals"]
}
```

The order of the array items depends on your needs.

> Read more about [ESLint configuration file](https://eslint.org/docs/user-guide/configuring/configuration-files).

### 2) Configure the ESLint TypeScript parser

- Set [parser](https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/parser#usage) to `@typescript-eslint/parser`.
- Set [parserOptions.project](https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/parser#parseroptionsproject) to the path of your `tsconfig.json` or `tsconfig.eslint.json` (see [FAQ](#faq) below).

For example:

```diff
{
  "extends": ["react-moonstone"],
+ "parser": "@typescript-eslint/parser",
+ "parserOptions": {
+   "project": "./tsconfig.json"
+ }
}
```

### FAQ

If you got this error when running ESLint: _"The file must be included in at least one of the projects provided"_, this means you are attempting to lint a file that `tsconfig.json` doesn't include.

A common fix is to create a `tsconfig.eslint.json` file, which extends your `tsconfig.json` file and includes all files you are linting.

```json
{
  "extends": "./tsconfig.json",
  "include": ["**/*.ts", "**/*.tsx", "**/*.js", ".eslintrc.js"]
}
```

Then update your ESLint config file:

```diff
"parserOptions": {
-  "project": "./tsconfig.json"
+  "project": "./tsconfig.eslint.json"
}
```

---

## Note

**[eslint-config-react-moonstone](https://www.npmjs.com/package/eslint-config-react-moonstone)** will include these packages:

- ESLint Plugins/Resolver
  - [eslint-plugin-react](https://www.npmjs.com/package/eslint-plugin-react)
  - [eslint-plugin-import](https://www.npmjs.com/package/eslint-plugin-import)
  - [eslint-plugin-jsx-a11y](https://www.npmjs.com/package/eslint-plugin-jsx-a11y)
  - [eslint-plugin-jest](https://www.npmjs.com/package/eslint-plugin-jest)
  - [eslint-plugin-testing-library](https://www.npmjs.com/package/eslint-plugin-testing-library)
  - [eslint-plugin-simple-import-sort](https://www.npmjs.com/package/eslint-plugin-simple-import-sort)
  - [eslint-plugin-sonarjs](https://www.npmjs.com/package/eslint-plugin-sonarjs)
  - [eslint-plugin-unicorn](https://www.npmjs.com/package/eslint-plugin-unicorn)
  - [eslint-import-resolver-typescript](https://www.npmjs.com/package/eslint-import-resolver-typescript)
- ESLint Configs
  - [eslint-config-airbnb](https://www.npmjs.com/package/eslint-config-airbnb)
  - [eslint-config-airbnb-typescript](https://www.npmjs.com/package/eslint-config-airbnb-typescript)
  - [eslint-config-prettier](https://www.npmjs.com/package/eslint-config-prettier)

👆 Therefore, you don't have to install them.

---
_Source: https://npm.io/package/eslint-config-react-moonstone · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._