@transferwise/eslint-config

:shirt: TransferWise ESLint config with Prettier

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

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

Usage

1. Install with peer dependencies

npx install-peerdeps --dev @transferwise/eslint-config

(if it doesn't work, update npm)

2. Extend your config with @transferwise

.eslintrc

{
  "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 formatting in package.json scripts

Example:

  "test": "npm run lint && ...other test commands...",
  "lint": "eslint '**/*.{js,jsx}'", // runs on all js and jsx files, add {ts,tsx} for TypeScript
  "format": "npm run 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

  "javascript.format.enable": false,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    // "typescript",
    // "typescriptreact",
  ],
  "eslint.autoFixOnSave": true,

Auto-formatting on commit

1. Install required packages:
   npm install --save-dev lint-staged husky
2. Add the following config: package.json

  "lint-staged": {
    "*.{js,jsx}": [ // add {ts,tsx} for TypeScript
      "eslint --fix",
      "git add"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }

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.