ESLint + Prettier Config for React

Shareable config for ESLint and Prettier, aimed primarily to be used in React projects.

Overview

This configuration extends Airbnb ESLint config, with eslint-config-airbnb/hooks enabled, and Prettier integration via the ESLint plugin. Additionally, a few default rules are overridden to provide a more relaxed development experience in Next.js applications out of the box.

The goal of this configuration is to get code linting and formatting up and running as quickly as possible in a modern development environment, without sacrificing cleanliness and readability, and having to configure ESLint + Prettier from scratch every time.

Installation

To install the package, run:

$ npm install -D eslint-config-acme

This will install the shared config, as well as its peer dependencies:

• eslint
• eslint-config-airbnb
• eslint-config-prettier
• eslint-import-resolver-custom-alias
• eslint-plugin-import
• eslint-plugin-jsx-a11y
• eslint-plugin-react
• eslint-plugin-react-hooks
• eslint-plugin-sort-destructure-keys
• eslint-plugin-tailwindcss
• prettier
• @ianvs/prettier-plugin-sort-imports
• prettier-plugin-packagejson
• prettier-plugin-tailwindcss

NOTE: if you are on NPM <7, you will need to install these manually:

$ npx install-peerdeps -D eslint-config-acme

Usage

To start using this shared config, add eslint-config-acme (or just acme) to either your package.json:

// package.json
{
  "eslintConfig": {
    "extends": ["acme"]
  }
}

or the .eslintrc configuration file:

// .eslintrc
{
  "extends": ["acme"]
}

NOTE: The new flat config format is not yet supported, as there is an upstream dependency for its support in eslint-config-airbnb.

Import Alias

This config provides a default import alias resolver for eslint-plugin-import to support shorthand imports of local modules:

{
  "import/resolver": {
    "eslint-import-resolver-custom-alias": {
      "alias": {
        "~": "./src",
        "@": "./src",
        "#": "./src",
        "src": "./src"
      },
      "extensions": [".js", ".jsx", ".ts", ".tsx"]
    }
  }
}

This maps any of the above shorthands (~, @, #, src) to the ./src directory in your project, and allows you to write imports like this anywhere in your code:

import Foo from '~/components/Foo';
// or
import Foo from '@/components/Foo';
// or
import Foo from '#/components/Foo';
// or
import Foo from 'src/components/Foo';

instead of relative paths:

import Foo from '../../components/Foo';

Use this alongside absolute imports and module path aliases in Next.js.

These aliases can also be customized in your local configuration file, if needed:

// .eslintrc
{
  "extends": ["acme"],
  "settings": {
    "import/resolver": {
      "eslint-import-resolver-custom-alias": {
        "alias": {
          "lib": "./lib",
          "src": "./some/other/src"
        },
        "extensions": [".js", ".jsx", ".ts", ".tsx", ".mdx"]
      }
    }
  }
}

Import Sorting

Import statement sorting is enabled via @ianvs/prettier-plugin-sort-imports, with the following default importOrder set:

{
  "importOrder": [
    "<TYPES>",
    "<TYPES>^[.]",
    "",
    "<BUILT_IN_MODULES>",
    "",
    "^react$",
    "<THIRD_PARTY_MODULES>",
    "",
    "^(src|~|@|#)(/.*)$",
    "",
    "^[.]"
  ]
}

This will take import statements like these:

import foo from '@/foo';
import main from '../index';
import fs from 'node:fs';
import { bar } from './bar';
import { module } from 'package-name';

And turn them into this:

import fs from 'node:fs';

import { module } from 'package-name';

import foo from '@/foo';

import main from '../index';
import { bar } from './bar';

See the plugin docs for more information on how to customize this option.

Prettier

This config supports Prettier integration out of the box. Rules that may conflict with ESLint are disabled via eslint-config-prettier.

Shared Config

This package provides a shared Prettier config for use alongside ESLint.

To enable, create a Prettier config file (.prettierrc, .prettierrc.js, etc.), and import the shared Prettier config.

JSON:

// .prettierrc
'eslint-config-acme/prettier';

CommonJS:

// .prettierrc.js
/** @type {import("prettier").Config} */
const acme = require('eslint-config-acme/prettier');

module.exports = acme;

If you'd like to override any of the default options, you can use the spread operator (...) to extend the default config:

// .prettierrc.js
/** @type {import("prettier").Config} */
const acme = require('eslint-config-acme/prettier');

const config = {
  ...acme,
  singleQuote: false,
};

module.exports = config;

Adding Scripts

Add the following to your package.json file to define a script that will lint all known files and output the results:

// package.json
{
  "scripts": {
    "lint": "eslint --ignore-path .gitignore ."
  }
}

Or, if using Next.js:

// package.json
{
  "scripts": {
    "lint": "next lint"
  }
}

To fix all automatically-fixable issues, you can add the following script to your package.json as well (in addition to above):

// package.json
{
  "scripts": {
    "lint:fix": "npm run lint -- --fix"
  }
}

Note that you can update the above scripts as you see fit, this is just an example. See ESLint CLI reference for more details.

Author

Mykhaylo Ryechkin

License

MIT