@babbel/eslint-config
v2.2.0
Published
Hierarchical ESLint configuration collection that intends to be simple to use, layered, and shared with others
Downloads
1,521
Readme
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
- 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 (notjest-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
- External (e.g. NPM packages) and Node.js built-in (e.g.
node:fs
) imports - Internal imports (e.g. from your
src/
directory) - 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';
- External (e.g. NPM packages) and Node.js built-in (e.g.
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 inpackage.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