@revolut/eslint-config-react

Revolut eslint config for react web applications

Usage no npm install needed!

<script type="module">
  import revolutEslintConfigReact from 'https://cdn.skypack.dev/@revolut/eslint-config-react';
</script>

README

@revolut/eslint-config-react

Note that this config already included in @revolut/cra-overrides so if you're using yarn v1 and not npm you should be good to go from the version >=1.0.0

Before installation make your .eslintrc.json, .eslintrc into .eslintrc.js and paste that in

require('@revolut/eslint-config-react')

module.exports = {
  extends: ['@revolut/react'],
}

What is this patch? Read here.

Standalone installation (if you're not using @revolut/cra-overrides)

Add these dependencies to the package.json with constraints below. Although, try to avoid major bumps.

    "eslint": "^8.6.1",
    "@revolut/eslint-config-react": "^1.0.0"
    "prettier": "^2.5.1"

You can search and replace >= symbol with ^ :)

If you're using @revolut/cra-overrides

Having @revolut/cra-overrides should be sufficient. Version 1.0.0 and onward. Don't forget to bump prettier so you have >2

Further migration guide (for users of 0.x.x or @revolut/cra-override@0.x.x or any version of revolut-react-scripts)

yarn, npm @revolut/cra-overrides users

  1. Bump @revolut/cra-overrides to version 1.0.0 or higher
  2. Add SKIP_PREFLIGHT_CHECK=true as ESLint will be bumped above version 6 up to >=7.3.1 and CRA will complain (this is temporary until CRA updated)
  3. Add resolutions to enforce particular versions of the eslint plugins, parsers etc. (this is temporary until CRA updated)
{
  "resolutions": {
    "eslint": "8.6.0" // Whatever is the latest 7
  }
}

Standalone or pnpm users (yes, even if you're using @revolut/cra-overrides with pnpm)

You can check this PR for full example

  1. Remove all eslint related stuff from package.json
  2. Copy paste these instead of them. (update to the latest on the day of reading that)
{
  "devDependencies": {
    "eslint": "8.6.0",
    "@revolut/eslint-config-react": "1.0.0",
    "prettier": "2.5.1"
  }
}

Common steps

  1. Run
npx eslint ./src --ext js,jsx,ts,tsx --fix --rule 'jest-dom/prefer-to-have-attribute: off' --rule 'jest-dom/prefer-to-have-text-content: off' --rule 'jest-dom/prefer-empty: off' --rule 'jest-dom/prefer-enabled-disabled: off' --rule 'jest-dom/prefer-enabled-disabled: off' --rule 'jest-dom/prefer-checked: off' --rule 'testing-library/prefer-find-by: off' --rule 'jest-dom/prefer-focus: off'
  1. Change your eslint /src --ext js,jsx,ts,tsx --max-warnings 0 to eslint /src --ext js,jsx,ts,tsx.
  2. Make sure your lint-staged setup tho still have zero tolerance to warnings, to foster gradual adoption of new rules.
  3. Ensure no errors left, only warnings.
  4. If there is a few simple errors fix them straight away. If there is a lot of them, make them warnings and create a task in JIRA to clean them up later.

Warning

jest-dom and testing-library plugins rarely have some false positives. Also, their fixes are destructive sometimes. (all bugs mostly reported) You can and should apply auto-fixes file by file, it helps A LOT, but never on whole codebase as it will lead to broken tests and a lot of unused variables etc. (if rules auto-fixes are still not fixed, if they are fixed, please contribute to this README!)