NPM module @babbel/eslint-config

Hierarchical ESLint configuration collection that intends to be simple to use, layered, and shared with others. (project maintainers)

Table of Contents

• ESLint Configurations
• Base Configuration Assumptions
• Example Usage
  • Browser Environment
  • Node.js Environment
  • Browser Environment That Uses React, TypeScript, Jest, and a Custom Rule
• Making Your Own Config From the Base Config 🎓
• Changing This Library

ESLint Configurations

There are multiple configurations you can use in your projects listed below. These are meant to be used in combination with one another. Please note that the base configuration is used by all the others, so there's no need to include that in your configuration unless it's the only one you're using.

The configuration names specified below should be used as items in the extends array in your ESLint configuration file. Each configuration string is clickable to bring you to the configuration details.

It is recommended to not use the browser, isomorphic, and/or node configs simultaneously

• @babbel/eslint-config: base configuration that all configurations inherit from
• @babbel/eslint-config/browser: for browser environments (should always be last in your "extends" array)
• @babbel/eslint-config/bun: for Bun environments (should always be last in your "extends" array)
• @babbel/eslint-config/isomorphic: for isomorphic environments; in other words, using the browser and Node.js simultaneously on the same code (should always be last in your "extends" array)
• @babbel/eslint-config/jest: for testing environments using Jest
• @babbel/eslint-config/jsdoc: for documentation enforcement using JSDoc
• @babbel/eslint-config/jsdoc-typescript: for documentation enforcement using JSDoc and TypeScript
• @babbel/eslint-config/node: for Node.js environments (should always be last in your "extends" array)
• @babbel/eslint-config/playwright: for testing environments using the Playwright test runner (not jest-playwright)
• @babbel/eslint-config/preact: for Preact environments
• @babbel/eslint-config/preact-typescript: for Preact environments using TypeScript
• @babbel/eslint-config/react: for React environments
• @babbel/eslint-config/react-typescript: for React environments using TypeScript
• @babbel/eslint-config/typescript: for TypeScript environments

Base Configuration Assumptions

• Airbnb style guide configurations used as a guide

• Extends the recommended configuration of the following plugins:

  • eslint-plugin-eslint-comments (documentation)
  • eslint-plugin-import (documentation)
  • eslint-plugin-regexp (documentation)
  • eslint-plugin-unicorn (documentation)

• Native ES module-style imports and exports

  • Imports

    • File extensions required like in the spec (e.g. import { some } from './thing.mjs';)

    • Imports declared at the top of each file in ordered groups separated by an empty line

      1. External (e.g. NPM packages) and Node.js built-in (e.g. node:fs) imports
      2. Internal imports (e.g. from your src/ directory)
      3. Type imports (e.g. import type ...)

      // External Imports
      import { copyFile } from 'node:fs/promises';
      import React from 'react';
      
      // Internal Imports
      import { logger } from './logger.mjs';
      
      // Type Imports
      import type { APIGatewayProxyEvent, APIGatewayProxyStructuredResultV2 } from 'aws-lambda';
      import type { LoginResponse } from './types.mts';

  • Exports

    • Use named exports not default exports
    • Exports all in a single declaration at the bottom of each file (e.g. export { ... })

• Prettier for file formatting; ESLint does not check for formatting

Example Usage

Here are a few common use cases to get you familiar with using this collection. The following examples should be added to your .eslintrc.json file at the root of your repository.

Browser Environment

{ "extends": ["@babbel/eslint-config/browser"] }

Yep. That's it. 😀

Or if you want to add some custom rules:

{
  "extends": ["@babbel/eslint-config/browser"],
  "rules": {
    /* add your custom rules here */
  }
}

Node.js Environment

{ "extends": ["@babbel/eslint-config/node"] }

I think you're getting the hang of it now...

Browser Environment That Uses React, TypeScript, Jest, and a Custom Rule

{
  "extends": ["@babbel/eslint-config/react-typescript", "@babbel/eslint-config/browser"],
  "rules": {
    "no-console": "off"
  },
  "overrides": [
    {
      "files": ["**/*.test.ts"],
      "extends": "@babbel/eslint-config/jest"
    }
  ]
}

Making Your Own Config From the Base Config 🎓

{
  "extends": ["@babbel/eslint-config"],
  "rules": {
    /* add all your custom rules here */
  }
}

The config export @babbel/eslint-config maps to the base config file lib/eslintBaseConfig.json. You can see how this works by looking for the "." entry in the exports section of this project's package.json; that section defines all the config exports rather than using proxy files (e.g. index.js) at the root of the repository.

For example, if you want to add an export called @babbel/eslint-config/example, you would do the following:

• Create a new ESLint configuration file called ./lib/eslintExampleConfig.json and set your preferred settings within.
• For the /example package export to work, we have to add a new entry in the "exports" section in package.json. For this example, we'll add

{
  "exports": {
    ...
    "example": "./lib/eslintExampleConfig.json",
    ...
  }
}

• File a pull request and wait for a project maintainer to review it. As a reminder, be sure that your new configuration extends eslintBaseConfig.json or a more specific configuration, otherwise the acceptance of your code contributions may be delayed.

Changing This Library

Maintenance of this library requires an exact version of Bun to be installed, specifically the one listed in the packageManager field of package.json. Because there are no well-established version managers for Bun (e.g. like nvm for Node.js), a package.json script was added to overwrite the currently-installed version of Bun with the expected version for this project; Bun's entire install is a single binary, so doing so is a safe operation.

Execute the install script by running

bun run --silent install:bun:expected-version