@workpay/eslint-config v0.1.0

No-Sweat Eslint and Prettier Setup

Workpay's ESLint and Prettier Prettier 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.

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

1. Install all dependencies

   • Option 1: With npx

     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

     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

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

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

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

   {
     "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 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-config",
  "rules": {
    "no-console": "off"
  }
}