npm package: @maxwaiyaki/eslint-prettier-config
Description: Workpay's default ESLint and Prettier configuration
Author: Maxwell
Latest version: 1.0.0

# eslint-config

Workpay's [`ESLint`](https://eslint.org/) and Prettier[`Prettier`](hhttps://prettier.io/).

> This package hasn't been published to npm yet, the below instructions will work once the package is published. 

## Installation

This package has several [peer dependencies](https://docs.npmjs.com/files/package.json#peerdependencies).

Run `npm info "@workpay/eslint-prettier-config@latest" peerDependencies` to list the peer dependencies and versions.

1. Install all dependencies

    - **Option 1:** With `npx`

      ```sh
      npx install-peerdeps --dev @workpay/eslint-prettier-config
      ```

      **Note:** `npx` is a package runner that comes with npm 5.2 and higher that makes installing peer dependencies easier

    - **Option 2:** Without `npx`

      ```sh
      npm install --save-dev @workpay/eslint-prettier-config eslint babel-eslint prettier eslint-config-prettier eslint-plugin-react eslint-plugin-import eslint-config-airbnb eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-plugin-prettier

      # or

      yarn add --dev @workpay/eslint-prettier-config eslint babel-eslint prettier eslint-config-prettier eslint-plugin-react eslint-plugin-import eslint-config-airbnb eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-plugin-prettier
      ```

1. Create an `.eslintrc` file at the root of your project with the following:

    ```json
    {
      "extends": "@workpay/eslint-prettier-config"
    }
    ```

## Configurations

  #### Using Create React App?


  Until recently Create React App didn't give you an easy way to extend the default ESLint configuration short of ejecting. This was particularly problematic as ESLint is run during production builds (with `react-scripts build`), and lint errors would actually result in build failures.

  It now supports an [experimental method to extend ESLint](https://create-react-app.dev/docs/setting-up-your-editor/#experimental-extending-the-eslint-config). Here's how it works with this configuration:

1. Extend the base config (`react-app`) in your ESLint configuration:

    ```json
    {
      "extends": ["react-app", "@workpay/eslint-prettier-config"]
    }
    ```

2. Set the `EXTEND_ESLINT` environment variable in your `.env` file (for local development) and in your hosting providers environment variables configuration (for remote builds):

    ```
    EXTEND_ESLINT=true
    ```

  This will ensure that the same ruleset is enforced for local development and production builds.

## Pre-commit Hook

> Make sure you project utilizes the src folder structure popularlized by create-react-app

As another line of defense, if you want ESLint to automatically fix your errors on commit, you can use [`lint-staged`](https://github.com/okonet/lint-staged) with [`husky`](https://github.com/typicode/husky), which manages git hooks.

1. `yarn add -D lint-staged husky`

2.  In your `package.json`

    ```json
    {
      "lint-staged": {
        "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
          "eslint --fix",
          "prettier --write"
        ]
      },
      "husky": {
        "hooks": {
          "pre-commit": "lint-staged"
        }
      }
    }
    ```
## Overriding Rules

If you'd like to override any rules, you can add the rules to your `.eslintrc` file.

```json
{
  "extends": "@workpay/eslint-prettier-config",
  "rules": {
    "no-console": "off"
  }
}
```