@transferwise/eslint-config

:shirt: Wise ESLint config with Prettier

This is an extensible ESLint config used at Wise :money_with_wings:

It uses Create React App's as a base, has Prettier baked in, and overrides some rules we've seen ourselves having to change often :heart:

We also use the Rush Stack ESLint patch so that consumers don't need to install this config's ESLint dependencies as peer dependencies - as used by eslint-config-next and eslint-config-react-app.

Usage

1. Install with peer dependencies

yarn add eslint @transferwise/eslint-config -D

You will also need jest and typescript installed, even if you aren't using them.

2. Extend your config with @transferwise

.eslintrc.js

module.exports = {
  extends: '@transferwise',
};

Your own config can extend and override it however you want. If you find yourself changing a certain rule often, consider contributing.

3. Lint and format

For the best developer experience, all of the following are recommended.

Linting and fixing lint errors in package.json scripts

Example:

  "lint": "eslint '**/*.{ts,tsx,js,jsx}' --ignore-path .gitignore",
  "lint:fix": "yarn lint --fix"

Auto-formatting in IDE

VS Code

1. Install ESLint extension
2. To prevent clashes, turn off the formatter and enable ESLint auto-fix on save:

settings.json

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
  ]

Auto-formatting on commit

1. Install required packages:
   yarn add --dev lint-staged husky
2. Configure husky

   npm set-script prepare "husky install"
   npm run prepare
   npx husky add .husky/pre-commit "yarn lint-staged"
   

3. Add the following config to package.json

     "lint-staged": {
       "*.{ts,tsx,js,jsx}": [
         "yarn lint:fix"
       ]
     },
   

4. (Optional) Set up Prettier separately to use our configuration

The ESLint config already auto-formats JS files based on Prettier rules, so you only need this when your editor does not support ESLint auto-fixing or you want to use Prettier with file types other than JS.

To use the configuration, add the following line to your package.json:

package.json

  "prettier": "@transferwise/eslint-config/.prettierrc.js"

Read more about shared configs here, especially if you need to extend/override the default configuration.

Contributing

If you think a rule should be added or changed, create a pull request. The change will be discussed, and if people agree, it can be merged. Every merge automatically releases to GitHub and npm.

Bear in mind that you'll need to bump the version in package.json (major for breaking rules, minor for additions, patch for bugfixes) and add a CHANGELOG.md entry.