: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.

v8.2.0

Copy eslint-config-react-app and remove dependency on flowtype

v8.1.0

Expand peer dependencies to include Typescript 5

v8.0.1

Fix release step

v8.0.0

Update dependencies and use @rushstack/eslint-patch to remove eslint plugin peer dependency

v8 of this config utilises the Rush Stack ESLint patch to "allow a shared ESLint config to bring along its own plugins, rather than imposing peer dependencies on every consumer of the config". This means when installing v8 you can remove all your eslint plugin peer dependencies previously needed.

Besides this, we've made the following changes:

• Remove plugin:unicorn/recommended as it was too opinionated - instead, we enable the plugin only to turn on Unicorn rules on a case-by-case basis
• Add plugin:storybook/recommended which you can read more about here.
• Update eslint-config-prettier which allows us to remove prettier/react, prettier/unicorn and prettier/@typescript-eslint
• Update eslint-plugin-jest which renamed jest/lowercase-name to jest/prefer-lowercase-title
• Move jest and testing-library plugins to only apply to test files, read more here
• Update the files glob patterns for test files and storybook files to match the official glob patterns in Jest and Storybook
• Update all other plugins and configs to their latest versions

v7.4.3

Disable fp mutation rule for React refs

v7.4.2

Disable fp rules in tests

v7.4.1

Disable rule jest/require-top-level-describe

v7.4.0

Don't apply mutation rules for Storybook stories

v7.3.0

Don't apply mutation rules for propTypes and defaultProps

v7.2.0

Adjust peer dependencies

When following installation instructions babel-eslint will now be installed; typescript and jest will not be installed, to prevent accidentally downgrading them.

v7.1.0

Bump @transferwise/eslint-plugin to ensure getServerSideProps is exported from the pages directory

v7.0.0

Use TypeScript, add plugins and rules, update ESLint and other dependencies

v7 of this config relies on TypeScript, as it is recommended for new projects in Wise and easy to add to existing ones. Maintaining a non-TypeScript config in addition would come with maintenance cost. If you don't want to add TypeScript support to your project, feel free to keep using v6.

New plugins and rules are added based on ESLint config extensions in the company's GitHub organisation and industry recommendations for the technologies used in Wise.

Changes

• eslint is updated to v7, other dependencies are updated accordingly
• typescript is used (parser, plugin, regular configuration, and advanced configuration running type checks)
• eslint:recommended is specified as a base
• eslint-config-react-app replaces eslint-config-airbnb, as Airbnb's was too opinionated, resulting in many overrides, and React app's is maintained better (has rules of hooks, etc.)
• eslint-plugin-jsx-a11y is added with strict configuration to enforce stronger accessibility rules
• eslint-plugin-jest is added to enforce best test practices
• eslint-plugin-jest-dom is added to improve DOM assertions
• eslint-plugin-testing-library is added to enforce best React Testing Library practices
• eslint-plugin-unicorn is added to enforce general best practices
• eslint-plugin-sonarjs is added to detect bug-prone code
• @next/eslint-plugin-next is added to introduce Next.js specific rules
• import/order rule is added to clean import order
• importing enzyme will error with a recommendation to use @testing-library/react (disable lines to allow gradual migration)
• importing retranslate will error with a recommendation to use react-intl
• various compatibility extensions are added for TypeScript and Prettier

Most of the existing rules, e.g. prettier's and fp/no-mutation, are kept. The rules that are made redundant by TypeScript (prop types, spreads, etc.) are removed.

Upgrading from v6 to v7

The config comes with many peer dependencies, as plugins cannot be dependencies. Therefore, it's easiest to:

1. Remove all dependencies containing eslint or prettier from package.json.
2. yarn install or npm install.
3. npx install-peerdeps --dev --yarn @transferwise/eslint-config or npx install-peerdeps --dev @transferwise/eslint-config.

There will likely be issues when upgrading:

• if the configuration fails and the Troubleshooting section does not help, open an issue or PR in this repository with details
• if there are too many errors to fix for a rule you agree with, feel free to turn it off in your ESLint config and migrate gradually

Also, take a look at your ESLint disables and try removing them — you might not need some of them, e.g. react/jsx-props-no-spreading.

Troubleshooting

Problem: Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser. Solution: Add the file after The file does not match your project config: to your tsconfig.json includes array.

Problem: @typescript-eslint/no-unused-vars false positive Solution: Add this to package.json:

  "resolutions": {
    "@typescript-eslint/parser": "^4.4.1"
  },

Problem: Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser. The file does not match your project config: foo.ts. The file must be included in at least one of the projects provided. Solution: Make sure your include glob patterns in tsconfig.json are properly formatted, e.g src/**/* instead of src

v6.2.0

Add @transferwise/eslint-plugin and ensure forms have a method attribute

v6.1.0

Customize react/jsx-props-no-spreading

Allow prop spreading for custom React component and explicit spreading.

v6.0.1

Use Yarn

Yarn is used as the package manager instead of npm now.

v6.0.0

Update dependencies

Breaking: prettier and eslint-plugin-react-hooks have had major version number bumps, so there is a good chance that linting and auto-fix behaviours will change due to new / updated rules. Read about changes in Prettier v2.0 on their blog.

v5.0.3

Don't apply mutation rules for getInitialProps

v5.0.2

Don't apply mutation rules for window

v5.0.1

Don't apply mutation rules for propTypes and defaultProps

v5.0.0

Add rules to mitigate pitfalls of object mutation

v4.0.1

Improve readme with script and VS Code settings examples

v4.0.0

Update dependencies

Breaking: As eslint-config-airbnb and eslint-config-prettier were updated with a major change, it means consumers of this package may also break due to rules changed/added.

v3.0.2

Move babel-eslint to dependencies from peerDependencies

v3.0.1

Remove husky and lint-staged from peerDependencies

The ESLint config does not really depend on these tools required for linting on commit (which is optional), therefore they're removed from peerDependencies. README is updated to include the installation command for these.

v3.0.0

Move eslint-config-airbnb and eslint-config-prettier to dependencies from peerDependencies

Addressing https://github.com/transferwise/eslint-config/issues/3. Breaking: consumers should remove these 2 direct dependencies from their package.json

v2.1.0

Ignorejsx-a11y/label-has-for since AirBnb rules are still accounting for both and. Also remove prefer-promise-reject-errors for tests.

v2.0.0

Use jsx-a11y/label-has-associated-control in favour of deprecated jsx-a11y/label-has-for

v1.0.0

Add curly rule for consistency

v0.4.0

Add exception to disable the destructuring-assignment rule for class fields

v0.3.0

Add default prettier config

• consumers can now use the shared prettier config separately from ESLint as well
• run eslint on the config files themselves, to stay consistent with the rules and formatting

v0.2.3

Use prettier/react config to support eslint-plugin-react

• extending prettier/react overrides some rules to support eslint-plugin-react, used in eslint-config-airbnb

v0.2.2

Use plugin:prettier/recommended config to extend config and apply plugin

• extending plugin:prettier/recommended config extends the prettier config and applies the plugin in a single step

v0.2.1

Fix Contributing heading in readme to follow link

• the link and heading are both Contributing now

v0.2.0

Add husky and lint-staged to peer dependencies, update readme

• husky and lint-staged are added to peerDependencies for easier usage
• badges, easy installation with install-peerdeps, usage details, and contribution have been added to readme

v0.1.0

Initial release

Check the index.js under the tag to see the rules.