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

Opinionated Eslint configuration with Prettier, React and TypeScript support
https://github.com/tidusia/eslint-config

Last synced: about 1 month ago
JSON representation

Opinionated Eslint configuration with Prettier, React and TypeScript support

• Host: GitHub
• URL: https://github.com/tidusia/eslint-config
• Owner: tidusia
• Created: 2020-11-23T19:42:53.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2021-12-27T15:47:57.000Z (about 3 years ago)
• Last Synced: 2024-12-14T22:04:13.181Z (about 1 month ago)
• Language: JavaScript
• Size: 518 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# Opinionated Eslint config to work with Prettier, React and TypeScript

![Github actions](https://github.com/tidusia/eslint-config/actions/workflows/release.yml/badge.svg)

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

## The problem

I love high code quality standards, but setting up and maintaining configuration takes a long time for each project.

One day, I found [eslint-config-wesbos](https://github.com/wesbos/eslint-config-wesbos) from Wes Bos.

I loved the idea : a unique place to share my favorite eslint configuration of the moment.

One place for all the rules, one place to maintain them. Easy to distribute as a npm package for each project.

## Installing

1. If you don't already have a `package.json` file, create one with `npm init`.

2. Then we need to install everything needed by the config:

```

npx install-peerdeps --dev @tidusia/eslint-config

```

3. You can see in your package.json there are now a big list of devDependencies.

4. Create a `.eslintrc` file in the root of your project's directory (it should live where package.json does). Your `.eslintrc` file should look like this:

```js

{

  "extends": [

    "@tidusia/eslint-config"

  ]

}

```

Tip: You can alternatively put this object in your `package.json` under the property `"eslintConfig":`. This makes one less file in your project.

5. You can add two scripts to your package.json to lint and/or fix:

```json

"scripts": {

  "lint": "eslint . --ignore-path .gitignore",

  "lint:fix": "eslint . --fix --ignore-path .gitignore"

},

```

6. Now you can manually lint your code by running `npm run lint` and fix all fixable issues with `npm run lint:fix`. You probably want your editor to do this though.

## Settings

If you'd like to overwrite eslint or prettier settings, you can add the rules in your `.eslintrc` file. The [ESLint rules](https://eslint.org/docs/rules/) go directly under `"rules"`.

```js

{

  "extends": [

    "@tidusia/eslint-config"

  ],

  "rules": {

    "no-console": 2,

  }

}

```

After that, create your own [prettier configuration](https://prettier.io/docs/en/install.html) or check out my [shared prettier config](https://github.com/tidusia/prettier-config) for a quick start.

## With Create React App

1. Run `npx install-peerdeps --dev @tidusia/eslint-config`

1. Crack open your `package.json` and replace `"extends": "react-app"` with `"extends": "@tidusia/eslint-config"`

## With Gatsby

1. Run `npx install-peerdeps --dev @tidusia/eslint-config`

1. If you have an existing `.prettierrc` file, delete it.

1. follow the `Installing` steps above