@maxwaiyaki/eslint-prettier-config v1.0.0

eslint-config

Workpay's ESLint and PrettierPrettier.

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.

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

1. Install all dependencies

   • Option 1: With npx

     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

     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

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

   {
     "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. Here's how it works with this configuration:

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

   {
     "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 with husky, which manages git hooks.

1. yarn add -D lint-staged husky

2. In your package.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.

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