ESLint Configuration

ESLint statically analyzes your code to quickly find problems. It is built into most text editors and you can run ESLint as part of your continuous integration pipeline. - https://eslint.org/

This is the shared ESLint configuration used at Boehringer Ingelheim for code styling.

Usage

Install the package

npm install --save-dev @boehringer-ingelheim/eslint-config

Add the configuration

Create or update the .eslintrc.js file in your projects root directory accordingly.

module.exports = {
  extends: ['@boehringer-ingelheim/eslint-config/base/strict'],
};

Extend or Override configuration

This is not recommended as the goal is to have similar code stylings in all projects, but if for some reason you need to add or change the configuration, it is possible in the following way:

module.exports = {
  extends: ['@boehringer-ingelheim/eslint-config/base/strict'],
  rules: {
    'no-empty-function': 'off',
  },
};

More Information: ESLint - Configuration Files

Run

npx eslint .

Shared Configurations

Opinionated Options that differ from the standard/recommended eslint configurations.

@boehringer-ingelheim/eslint-config/base

module.exports = {
  extends: ['@boehringer-ingelheim/eslint-config/base'],
};

This shared ESLint configuration is set up for TypeScript projects that adhere to modern JavaScript standards. It uses the latest version of TypeScript (ES2022) and extends several plugins and recommended rules to enforce best practices and catch potential errors.

The following plugins are used in this configuration:

• @typescript-eslint/eslint-plugin
• eslint-plugin-import
• eslint-plugin-sonarjs

Additionally, the eslint-plugin-perfectionist is used to automatically fix sorting issues.

This configuration also sets up the TypeScript parser @typescript-eslint/parser and eslint-import-resolver-typescript. The TypeScript project file ./tsconfig.json is set as default value for the project option in the parser configuration. If this is not the case, this must be changed accordingly:

module.exports = {
  parserOptions: {
    // Use `tsconfing.dev.json` as typescript project configuration, see: https://typescript-eslint.io/architecture/parser/#project
    project: './tsconfig.dev.json',
  },
};

@boehringer-ingelheim/eslint-config/base/local

module.exports = {
  extends: ['@boehringer-ingelheim/eslint-config/base/strict', '@boehringer-ingelheim/eslint-config/base/local'],
};

This shared ESLint configuration configures or disables some rules for a better performance locally. With the help of is-ci those configs only apply to environments outside the CI pipelines.

@boehringer-ingelheim/eslint-config/base/strict

module.exports = {
  extends: ['@boehringer-ingelheim/eslint-config/base/strict'],
};

This shared ESLint configuration extends the @boehringer-ingelheim/eslint-config/base configuration and adds additional strict linting rules from the @typescript-eslint/eslint-plugin plugin. These strict rules aim to enforce a high standard of code quality and improve code maintainability.

@boehringer-ingelheim/eslint-config/react

module.exports = {
  extends: ['@boehringer-ingelheim/eslint-config/base/strict', '@boehringer-ingelheim/eslint-config/react'],
};

This shared ESLint configuration is specifically tailored for React projects, and extends @boehringer-ingelheim/eslint-config/base. It uses the browser environment, and includes recommended configurations for the following plugins:

• eslint-plugin-jsx-a11y
• eslint-plugin-react
• eslint-plugin-react-hooks
• eslint-plugin-typescript-enum

The configuration sets several custom rules, including @typescript-eslint/ban-types and @typescript-eslint/consistent-type-definitions, as well as rules for organizing and formatting import statements.

@boehringer-ingelheim/eslint-config/playwright

module.exports = {
  extends: ['@boehringer-ingelheim/eslint-config/base/strict', '@boehringer-ingelheim/eslint-config/playwright'],
};

This shared ESLint configuration is designed to enforce best practices and recommendations when writing tests with Playwright. It extends the eslint-plugin-playwright configuration and adds the following rules:

• playwright/prefer-to-be: enforces the use of .toBe() instead of .toEqual() when testing for equality.
• playwright/prefer-to-have-length: enforces the use of .toHaveLength() instead of .toEqual(n) when testing the length of an object.
• playwright/require-top-level-describe: requires tests to be organized into top-level describe() blocks.

@boehringer-ingelheim/eslint-config/prettier-disable

module.exports = {
  extends: [
    '@boehringer-ingelheim/eslint-config/base/strict',
    // Following needs eslint-plugin-prettier to be installed as described by https://github.com/prettier/eslint-plugin-prettier
    // Should be second to last
    'plugin:prettier/recommended',
    // Should be last
    '@boehringer-ingelheim/eslint-config/prettier-disable'
  ],
};

This shared ESLint configuration is wrapper around eslint-config-disable, which is used to turn off all rules that are unnecessary or might conflict with Prettier. This wrapper reenables a few rules that can be used with our shared configurations as we are using specific options of those rules which are compatible with Prettier (see Special Rules). Following rules are reenabled:

• curly with the (default) option "all": Enforce consistent brace style for all control statements
• no-confusing-arrow with allowParens false and onlyOneSimpleParam true: Disallow arrow functions where they could be confused with comparisons.

Local Development

Install Dependencies

npm install

Test

npm test

Repair

This command may be useful when obscure errors or issues are encountered. It removes and recreates dependencies of your project.

npm run repair

Release

Fully automated version management and package publishing via semantic-release. It bumps the version according to conventional commits, publishes the package to npm and release a new version to GitHub.

Automatic Release (GitHub Action) [Recommended]

Make sure that the secrets GITHUB_TOKEN and NPM_TOKEN are available in GitHub repository.

npm run release:ci

Manual Release

Make sure that the environment variables GITHUB_TOKEN and NPM_TOKEN are set or declared in .env and a productive build was previously created via npm run build.

npm run release

Roadmap

• Shared configuration: Angular
• Shared configuration: Node.js
• Test Cases
• "Flat" Config

Show your support

Give a ⭐️ if this project helped you!

License

Copyright © 2023 Boehringer Ingelheim.
This project is MIT licensed.

Resources

• https://eslint.org/
• https://typescript-eslint.io/
• https://react-typescript-cheatsheet.netlify.app/
• https://prettier.io/
• https://conventionalcommits.org/en/v1.0.0/
• https://semantic-release.gitbook.io/
• https://semver.org/