Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

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

Eslint config for typescript based projects
https://github.com/sprylab/eslint-config-sprylab

eslint jest react react-native reactjs typescript

Last synced: about 2 months ago
JSON representation

Eslint config for typescript based projects

Host: GitHub
URL: https://github.com/sprylab/eslint-config-sprylab
Owner: sprylab
Created: 2020-11-30T13:11:21.000Z (about 4 years ago)
Default Branch: master
Last Pushed: 2023-03-07T05:59:49.000Z (almost 2 years ago)
Last Synced: 2024-04-27T05:04:10.781Z (9 months ago)
Topics: eslint, jest, react, react-native, reactjs, typescript
Language: JavaScript
Homepage:
Size: 326 KB
Stars: 4
Watchers: 5
Forks: 1
Open Issues: 5
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md

Awesome Lists containing this project

README

# Eslint Config Sprylab

This is an eslint config used at Sprylab GmbH for typescript, react and react-native based projects.

## Installation

```bash
yarn add --dev @sprylab/eslint-config
```

```bash
npm i --save-dev @sprylab/eslint-config
```

Also make sure to have `prettier` and of course `typescript` and `eslint` installed as well.
Then add the following config to your extend array in your eslint config file.

```js
module.exports = {
extends: [
'@sprylab/eslint-config', // this is the base
/*
for react: '@sprylab/eslint-config/react'
for native: '@sprylab/eslint-config/native'
*/
],
parserOptions: {
project: './tsconfig.json', // should be the path to the projects tsconfig.json
},
}
```

**IMPORTANT**:

- For this config to work you need to have a tsconfig.json file at the repo root level, and then you have to set the parserOptions.project to point to your tsconfig file. [see the @typescript-eslint plugin docs](https://www.npmjs.com/package/@typescript-eslint/eslint-plugin).
- You also need to have @babel/core installed [see the @babel eslint parser docs](https://www.npmjs.com/package/@babel/eslint-parser)
- for the best experience you should have a prettier config file at the repo root as well, otherwise the eslint-config-prettier will use its builtin defaults.
- if you use path aliases, (e.g. use "@" as a path alias to /src etc.), you will probably need to setup a path resolver for the eslint-plugin-import package or turn off some of its rules. There is a resolver for [node](https://www.npmjs.com/package/eslint-import-resolver-node), [typescript](https://www.npmjs.com/package/eslint-import-resolver-typescript), [babel](https://www.npmjs.com/package/eslint-import-resolver-babel-module), [webpack](https://www.npmjs.com/package/eslint-import-resolver-webpack) etc.

## Configuration

This package includes three distinct configs:

### base

- @typescript, @babel, es2021, node globals and testing-library.

```js
extends: [
'@sprylab/eslint-config',
],
```

### react

- base config, browser globals, react, react-hooks and testing-library/react.

```js
extends: [
'@sprylab/eslint-config/react',
]
```

### native

- native -> react config + react native

```js
extends: [
'@sprylab/eslint-config/native',
]
```

## Plugins included

This config includes and configures the following eslint plugins / parsers:

### Parsers

For javascript files (\*.js(x)):

- `@babel/eslint-parser`
- `@babel/eslint-plugin`

For typescript files only (\*.ts(x)):

- `@typescript-eslint/eslint-plugin`
- `@typescript-eslint/parser`

### Plugins

#### Base

plugins shared by all configs / overrides

- `eslint-config-prettier`
- `eslint-plugin-prettier`
- `eslint-plugin-import`
- `eslint-plugin-sonarjs`
- `eslint-plugin-sort-imports-es6-autofix`
- `eslint-plugin-comment`

#### Testing

plugins shared across all configs for test files (example.spec.ts) etc.)

- `eslint-plugin-testing-library`
- `eslint-plugin-jest`

#### React and React Native

- `eslint-plugin-react`
- `eslint-plugin-react-hooks`

#### React (exclusive)

- `plugin:jsx-a11y/recommended`

#### React Native (exclusive)

- `eslint-plugin-react-native`

## Recommendations

- add a pre-commit eslint check using [husky](https://www.npmjs.com/package/husky) and [lint-staged](https://github.com/okonet/lint-staged) to your `package.json` file, for example:

```json
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{md,json,yml,yaml}": [
"prettier --write"
],
"*.{js,jsx,ts,tsx}": [
"eslint --fix"
]
}
```

- add `package.json` eslint scripts:

```json
"scripts": {
"check:script": "eslint --fix-dry-run './{src,__tests__}/**/*.{js,ts,tsx}'",
"lint:script": "eslint --fix './{src,__tests__}/**/*.{js,ts,tsx}'",
}
```

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

_{Na'aman Hirschfeld}
💻 📖 🎨 🔧 🚧

_{Schwarzkopf Balázs}
📖

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! See our [contribution guidelines](CONTRIBUTING.md)!