@volvo-cars/eslint-config

@volvo-cars/eslint-config

Questions? Ask in Slack #vcc-ui

ESlint configuration for TypeScript and JavaScript projects at Volvo Cars.

Helps you fix common issues and maintain best practices. Code formatting should be done using Prettier with the default settings and is not handled with ESlint.

Types of rules

• :no_entry_sign: error - rules that prevent problems that risk causing bugs or performance issues in production.
• :warning: warn - stylistic rules that make code more readable, consistent and maintainable, or rules only targeting tests or documentation.

Prevent warnings from being merged to the main branch with the --max-warnings 0 command line flag. Warnings are OK to disable with eslint-disable if there is good reason.

Lint errors should not be disabled with inline comments, except as a temporary measure after enabling new stricter rules.

Install

yarn add @volvo-cars/eslint-config

Scripts

Recommended scripts for your package.json.

Run eslint, failure should prevent merge to master/main.

  "lint": "eslint --max-warnings 0 --ext .js,.jsx,.ts,.tsx .",

Run eslint to check for ignored rules with severity error. Should be discouraged but not necessarily prevented.

  "lint:ignored-errors": "eslint --report-unused-disable-directives --no-inline-config --quiet --ext .js,.jsx,.ts,.tsx .",

Configuration

Create a .eslintrc.yaml file in the root of your project.

All projects

These rules are not very opinonated and should be used for all JavaScript projects at Volvo Cars.

Includes eslint:recommended rules, confusing browser globals and a few rules to enforce using modern language features.

extends:
  - '@volvo-cars/eslint-config'

With React

Adds most recommended rules from eslint-plugin-react and eslint-plugin-react-hooks.

extends:
  - '@volvo-cars/eslint-config'
+ - '@volvo-cars/eslint-config/react'

Import sorting

@volvo-cars/eslint-config/import-sort includes eslint-plugin-import rules for consistent placement and sorting of import statements. Keeping the list of imports sorted and formatted in an automatic, deterministic way reduces potential merge conflicts and the cognitive load of managing imports. With Visual Studio Code features such as editor.foldingImportsByDefault and Auto Imports, import statements is something you rarely need to deal with manually.

extends:
  - '@volvo-cars/eslint-config'
  - '@volvo-cars/eslint-config/react'
+ - '@volvo-cars/eslint-config/import-sort'

Jest and Testing Library

If your project is using the Jest test runner or the Testing Library. Adds eslint-plugin-jest and eslint-plugin-testing-library with some rules for files matching typical test file patterns.

extends:
  - '@volvo-cars/eslint-config'
  - '@volvo-cars/eslint-config/react'
  - '@volvo-cars/eslint-config/import-sort'
+ - '@volvo-cars/eslint-config/jest'
+ - '@volvo-cars/eslint-config/testing-library'

Vitest

If your project is using the Vitest test runner, adds eslint-plugin-vitest with some rules for files matching typical test file patterns, like the setup for Jest above. It's also compatible with @volvo-cars/eslint-config/testing-library.

extends:
  - '@volvo-cars/eslint-config'
  - '@volvo-cars/eslint-config/react'
  - '@volvo-cars/eslint-config/import-sort'
+ - '@volvo-cars/eslint-config/vitest'

Storybook

If your project is using Storybook.

extends:
  - '@volvo-cars/eslint-config'
  - '@volvo-cars/eslint-config/react'
  - '@volvo-cars/eslint-config/import-sort'
  - '@volvo-cars/eslint-config/jest'
  - '@volvo-cars/eslint-config/testing-library'
+ - '@volvo-cars/eslint-config/storybook'

With Next.js

Includes the Next.js eslint plugin.

extends:
  - '@volvo-cars/eslint-config'
  - '@volvo-cars/eslint-config/react'
  - '@volvo-cars/eslint-config/import-sort'
  - '@volvo-cars/eslint-config/jest'
  - '@volvo-cars/eslint-config/testing-library'
  - '@volvo-cars/eslint-config/storybook'
+ - '@volvo-cars/eslint-config/next'

Monorepos

Add a single version of @volvo-cars/eslint-config in the root workspace, and a .eslintrc.yaml file in the root of the repo:

root: true
extends:
  - '@volvo-cars/eslint-config'
  - '@volvo-cars/eslint-config/monorepo'
  - '@volvo-cars/eslint-config/react'
  - '@volvo-cars/eslint-config/import-sort'
  - '@volvo-cars/eslint-config/jest'

Add separate .eslintrc.yaml files to each application folder, e.g. for a Next.js application:

extends:
  - '@volvo-cars/eslint-config/next'

Gradually enabling stricter rules with supress-eslint-errors

Updating @volvo-cars/eslint-config to a newer version or enabling your own stricter rules can be a challenge in a large code base where you don't want to change a lot of code at once. ESLint provides autofixers for a lot of issues, but generally not if the code change is deemed potentially unsafe. For this reason @volvo-cars/eslint-config includes an additional script that adds eslint-disable rules to the files with any remaining issues. Example:

// TODO: Fix eslint issues the next time this file is edited.
/* eslint-disable no-sparse-arrays, react/display-name */

Recommended actions for a configuration change:

1. Update the ESLint configuration or packages
2. Run yarn run eslint --ext .js,.jsx,.ts,.tsx --fix
3. Run yarn run supress-eslint-errors .
4. Enable PR annotations in CI.

Another option is to temporarily disable rules in your configuration, but only for the specific files or folders where you still have errors. These changes risk being more permanent though, because you don't have the PR annotations reminding you. In .eslintrc.yaml.

overrides:
  - files:
      # Rules temporarily disabled after updating the eslint config.
      # Remove an pattern from here to enable all rules again.
      - 'src/some-old-feature-were-not-touching/**'
    rules:
      'no-unused-vars': 'off'

CI checks

Recommended GitHub Action steps for pull requests. Will fail for lint warnings or errors, and produce GitHub PR annotations for ignored lint errors.

      - name: Lint
        run: |
          yarn run eslint \
            --ext .js,.jsx,.ts,.tsx \
            --max-warnings 0 \
            .

      - name: Get changed files
        id: changes
        if: ${{ github.event_name == 'pull_request' }}
        run: |
          git fetch --no-tags --depth=200 origin master
          # Put file names in a single-line string. Actions output doesn't support multi-line strings.
          echo "::set-output name=changed-files::$(git diff --name-only --diff-filter=ACMR origin/master... | tr '\n' '|' | sed 's| |\\ |g')"

      - name: Pull request annotations for disabled eslint errors
        if: ${{ github.event_name == 'pull_request' }}
        continue-on-error: true
        run: |
          echo "${{ steps.changes.outputs.changed-files }}" | tr '|' '\n' | grep -E '\.(tsx|ts|js|jsx)$' \
            | xargs yarn run eslint \
              --quiet \
              --report-unused-disable-directives \
              --no-inline-config \
              --no-error-on-unmatched-pattern \
              --ext .js,.jsx,.ts,.tsx