@volvo-cars/eslint-config

@volvo-cars/eslint-config

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

• error :stop: - rules that prevent problems that risk causing bugs or performance issues in production.
• warn :warning: - 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

Setup scripts

Run eslint, failure should prevent merge to master.

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

Run eslint to check for ignored rules with severity error, something that should be discouraged but not necessarily prevented.

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

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'

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'