# @workpay/eslint-config

> Workpay's base ESLint and Prettier configuration

Latest version **0.1.0** (published 2020-11-10) · ISC license · 0 weekly downloads

## Install

```sh
npm install @workpay/eslint-config
pnpm add @workpay/eslint-config
yarn add @workpay/eslint-config
bun add @workpay/eslint-config
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2020-11-10 |
| First published | 2020-11-10 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 12.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Workpay Africa |
| Maintainers | maxwellwaiyaki, abbykamau, davidworkpay, kaybarax, workpayadmin |
| Keywords | eslint, eslintconfig, config, javascript, workpay, react |

## Links

- npm: https://www.npmjs.com/package/@workpay/eslint-config
- Homepage: https://gitlab.com/tozzaplus_systems/workpay-eslint-prettier-config
- Issues: https://gitlab.com/tozzaplus_systems/workpay-eslint-prettier-config/-/issues
- npm.io page: https://npm.io/package/@workpay/eslint-config

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2020-11-10

## README

# No-Sweat Eslint and Prettier Setup

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

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

## What it does
* Lints JavaScript based on the latest industry standards.
* Fixes issues and formatting errors with Prettier.
* Lints + Fixes inside of html script tags.
* Lints + enforces best practices in React via `eslint-config-airbnb`

## Installation

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

Run `npm info "@workpay/eslint-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-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-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 eslint-plugin-html

      # or

      yarn add -D @workpay/eslint-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 eslint-plugin-html
      ```

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

    ```json
    {
      "extends": "@workpay/eslint-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-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-config",
  "rules": {
    "no-console": "off"
  }
}
```

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