@bsokol/eslint-config

I created this library to make it easier for me to stand up a new project. It uses sensible recommended defaults, in addition to some of my personal preferences. You can override the various rules by altering your ESLint config file.

This project uses itself for linting and formatting.

Documentation

The full list of activated rules can be found here.

This library adheres to semantic versioning. This means that any change to a rule could be a breaking change for your projects. Therefore, any rule changes will be published as a new major version.

Prerequisites

You must install the following peer dependencies:

• ESLint @ ^8
• Prettier @ >=2
• TypeScript @ >=4

The exact versions may depend on your existing installation or needs. Here are example commands to install the latest versions:

npm install eslint@^8 prettier typescript --save-dev

yarn add eslint@^8 prettier typescript --dev

Installation

npm install @bsokol/eslint-config --save-dev

yarn add @bsokol/eslint-config --dev

React + TypeScript

This will configure ESLint with the following presets/plugins:

• TypeScript
• Prettier
• React
• React hooks
• JSX a11y
• Browserslist compatibility

The list of configured rules can be found here.

ESLint Configuration

Create a file called .eslintrc.js (or the file format of your choosing) with this config:

module.exports = {
    extends: ['@bsokol/eslint-config/react-typescript'],
};

Node + TypeScript

This will configure ESLint with the following presets/plugins:

• TypeScript
• Node
• Prettier

The list of configured rules can be found here.

ESLint Configuration

Create a file called .eslintrc.js (or the file format of your choosing) with this config:

module.exports = {
    extends: ['@bsokol/eslint-config/node-typescript'],
};

React Native + TypeScript

NOTE: This configuration is EXPERIMENTAL. I haven't had a chance to really use it in a React Native project. The plugin is configured and rules are set to sensible defaults. See the docs for more information on how to change the rules.

This will configure ESLint with the following presets/plugins:

• TypeScript
• Prettier
• React
• React Native rules and globals
• React hooks

The list of configured rules can be found here.

ESLint Configuration

Create a file called .eslintrc.js (or the file format of your choosing) with this config:

module.exports = {
    extends: ['@bsokol/eslint-config/react-native-typescript'],
};

Jest

This will configure ESLint with the following presets/plugins:

• Jest rules & globals

The list of configured rules can be found here.

ESLint Configuration

This preset is an add-on to one of the other preset packages and it assumes your test files will be written in TypeScript. To use this preset, add it to the extends property of your config after the main preset. For example:

module.exports = {
    extends: ['@bsokol/eslint-config/react-typescript', '@bsokol/eslint-config/jest'],
};

Prettier Configuration

By default, Prettier will use its own defaults, but you can override them by creating a Prettier config file. The following is an example configuration.

Create a file called prettier.config.js (or the file format of your choosing) with a config similar to this:

module.exports = {
    tabWidth: 4,
    printWidth: 100,
    trailingComma: 'es5',
    singleQuote: true,
    overrides: [
        {
            files: '*.json',
            options: {
                tabWidth: 2,
            },
        },
    ],
};

See the configuration guide for more configuration options.

Browserslist Configuration

By default, the language features you use in your code will be linted against the available features in the following browserslist configuration ("defaults"):

> 0.5%, last 2 versions, Firefox ESR, not dead

For more advanced setup and overrides, follow the instructions in the browserslist documentation.