Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/wsmd/eslint-config

All-in-one, composable, ESLint configurations with support for TypeScript, React, Prettier, and Jest
https://github.com/wsmd/eslint-config

eslint eslint-config javascript jest prettier tslint typescript

Last synced: 26 days ago
JSON representation

All-in-one, composable, ESLint configurations with support for TypeScript, React, Prettier, and Jest

Host: GitHub
URL: https://github.com/wsmd/eslint-config
Owner: wsmd
License: mit
Created: 2019-11-24T23:33:23.000Z (almost 5 years ago)
Default Branch: master
Last Pushed: 2023-01-07T12:14:34.000Z (almost 2 years ago)
Last Synced: 2024-09-28T01:21:00.378Z (about 1 month ago)
Topics: eslint, eslint-config, javascript, jest, prettier, tslint, typescript
Language: JavaScript
Homepage:
Size: 247 KB
Stars: 11
Watchers: 2
Forks: 0
Open Issues: 8
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

README

@wsmd/eslint-config

All-in-one, composable, ESLint configurations with support for:

- **Javascript** (via Airbnb Javascript style guide)
- **React** (via Airbnb React style guide)
- **TypeScript**
- **Prettier**
- **Jest**

📖 Table of Contents

- [Usage](#usage)
- [Configurations](#configurations)
- [`@wsmd/eslint-config/base`](#wsmdeslint-configbase)
- [`@wsmd/eslint-config/react`](#wsmdeslint-configreact)
- [`@wsmd/eslint-config/typescript`](#wsmdeslint-configtypescript)
- [`@wsmd/eslint-config/prettier`](#wsmdeslint-configprettier)
- [`@wsmd/eslint-config/jest`](#wsmdeslint-configjest)
- [`@wsmd/eslint-config/all`](#wsmdeslint-configall)
- [Composing Multiple Configurations](#composing-multiple-configurations)
- [Gotchas](#gotchas)
- [Order of Configs](#order-of-configs)
- [Custom Rules](#custom-rules)
- [License](#license)

## Usage

This package consists of various configurations that can be composed together depending on the needs of the project.

To get started, add `@wsmd/eslint-config` to your project:

```sh
# using yarn
yarn add --dev eslint @wsmd/eslint-config

# using npm
npm i --save-dev eslint @wsmd/eslint-config
```

Then add [one or some of the configurations](#configurations) included in this package to your ESLint configuration file depending on the project's needs. For example, this ESLint configuration below adds support for TypeScript, Prettier and Jest:

```js
{
"extends": [
"@wsmd/eslint-config/typescript",
"@wsmd/eslint-config/prettier",
"@wsmd/eslint-config/jest"
]
}
```

Note that some of configurations require other dependencies to be included in your project as well (npm does not allow optional peer dependencies). For more information, please refer to the documentation of each configuration below.

## Configurations

### `@wsmd/eslint-config/base`

This configuration is an extensions of the Airbnb JavaScript style guide targeted for JavaScript projects without React or TypeScript. It also serves as the base configuration for some of the other configurations included in this package.

Under the hood, this configuration extends:

- `airbnb-eslint-config-base`
- `eslint-plugin-import`

#### Usage

```js
{
"extends": [
"@wsmd/eslint-config/base",
]
}
```

### `@wsmd/eslint-config/react`

This is an extension of the [base configuration](#wsmdeslint-configbase) targeted for React projects.

Under the hood, this configuration extends:

- `@wsmd/eslint-config/base`
- `eslint-airbnb-config`
- `eslint-plugin-react`
- `eslint-plugin-jsx-a11y`
- `eslint-plugin-react-hooks`

#### Usage

```js
{
"extends": [
"@wsmd/eslint-config/react",
]
}
```

### `@wsmd/eslint-config/typescript`

This configuration adds support for TypeScript projects by specifying the TypeScript ESLint Parser (`@typescript-eslint/parser`) as the code parser. It also applies a set of rules specific to TypeScript.

It can also be used alongside `@wsmd/eslint-config/base` or `@wsmd/eslint-config/react`.

Under the hood, this configuration extends:

- `@typescript-eslint/recommended`
- `plugin:import/typescript`

#### Usage

```js
{
"extends": [
"@wsmd/eslint-config/typescript",
]
}
```

If you are including this configuration in your project, make sure you have `typescript` installed a dependency.

### `@wsmd/eslint-config/prettier`

This configuration enforces Prettier formatting via ESLint. This includes:

- Disabling all ESLint rules that may conflicts with prettier formatting.
- Reporting prettier violations as ESLint issues.

It does not extend any of the other configurations in this package. However, please note that it must be applied after all other configurations.

#### Usage

```js
{
"extends": [
/* other eslint configurations... */
"@wsmd/eslint-config/prettier"
]
}
```

If you are including this configuration in your project, make sure you have `prettier` installed a dependency.

### `@wsmd/eslint-config/jest`

This configuration configures the ESLint environment to be compatible with Jest. It also extends the style and recommended rules included in `eslint-plugin-jest`.

It does not extend any of the other configurations in this package.

#### Usage

```js
{
"extends": [
"@wsmd/eslint-config/jest",
]
}
```

### `@wsmd/eslint-config/all`

This configuration is a convenient configuration that extends all the other configurations above.

By extending it, ESLint support will enforce rules from the Airbnb JavaScript and React style guide, and have support for TypeScript, Jest, and Prettier.

#### Usage

```js
{
"extends": [
"@wsmd/eslint-config/all",
]
}
```

## Composing Multiple Configurations

The idea of this package is to allow the composition of multiple configurations to better fit the project needs as opposed to a catch-all configuration that could potentially slow down the linting process if most of the rules are not needed.

```js
{
"extends": [
"@wsmd/eslint-config/base",
"@wsmd/eslint-config/react", // `react` already includes `base`
"@wsmd/eslint-config/typescript",
"@wsmd/eslint-config/prettier",
"@wsmd/eslint-config/jest"
]
}
```

## Gotchas

### Order of Configs

If you are composing multiple configurations, note that the configurations must be listed in the following order:

The `base`/`react` configs come first, followed by the `typescript` config, then followed by the `prettier` config.

### Custom Rules

This config builds on top of popular style guides and recommended rule sets of various plugins. However, it was originally built as a sharable ESLint configuration for my personal projects. This means that there are a small number of rule overrides that I have applied as well.

You can still override these rules and customize others in your ESLint config file:

```js
{
"extends": [
"@wsmd/eslint-config/base",
"@wsmd/eslint-config/typescript",
"@wsmd/eslint-config/prettier",
"@wsmd/eslint-config/jest"
],
"rules": {
// override rules here
}
}
```

## License

MIT