@wsmd/eslint-config

@wsmd/eslint-config

All-in-one, composable, ESLint configurations with support for:

• Javascript (via Airbnb Javascript style guide)
• React (via Airbnb React style guide)
• TypeScript
• Prettier
• Jest

📖 Table of Contents

• Usage
• Configurations
  • @wsmd/eslint-config/base
  • @wsmd/eslint-config/react
  • @wsmd/eslint-config/typescript
  • @wsmd/eslint-config/prettier
  • @wsmd/eslint-config/jest
  • @wsmd/eslint-config/all
• Composing Multiple Configurations
• Gotchas
  • Order of Configs
  • Custom Rules
• License

Usage

This package consists of various configurations that can be composed together depending on the needs of the project.

To get started, add @wsmd/eslint-config to your project:

# using yarn
yarn add --dev eslint @wsmd/eslint-config

# using npm
npm i --save-dev eslint @wsmd/eslint-config

Then add one or some of the configurations included in this package to your ESLint configuration file depending on the project's needs. For example, this ESLint configuration below adds support for TypeScript, Prettier and Jest:

{
  "extends": [
    "@wsmd/eslint-config/typescript",
    "@wsmd/eslint-config/prettier",
    "@wsmd/eslint-config/jest"
  ]
}

Note that some of configurations require other dependencies to be included in your project as well (npm does not allow optional peer dependencies). For more information, please refer to the documentation of each configuration below.

Configurations

@wsmd/eslint-config/base

This configuration is an extensions of the Airbnb JavaScript style guide targeted for JavaScript projects without React or TypeScript. It also serves as the base configuration for some of the other configurations included in this package.

Under the hood, this configuration extends:

• airbnb-eslint-config-base
• eslint-plugin-import

Usage

{
  "extends": [
    "@wsmd/eslint-config/base",
  ]
}

@wsmd/eslint-config/react

This is an extension of the base configuration targeted for React projects.

Under the hood, this configuration extends:

• @wsmd/eslint-config/base
• eslint-airbnb-config
  • eslint-plugin-react
  • eslint-plugin-jsx-a11y
• eslint-plugin-react-hooks

Usage

{
  "extends": [
    "@wsmd/eslint-config/react",
  ]
}

@wsmd/eslint-config/typescript

This configuration adds support for TypeScript projects by specifying the TypeScript ESLint Parser (@typescript-eslint/parser) as the code parser. It also applies a set of rules specific to TypeScript.

It can also be used alongside @wsmd/eslint-config/base or @wsmd/eslint-config/react.

Under the hood, this configuration extends:

• @typescript-eslint/recommended
• plugin:import/typescript

Usage

{
  "extends": [
    "@wsmd/eslint-config/typescript",
  ]
}

If you are including this configuration in your project, make sure you have typescript installed a dependency.

@wsmd/eslint-config/prettier

This configuration enforces Prettier formatting via ESLint. This includes:

• Disabling all ESLint rules that may conflicts with prettier formatting.
• Reporting prettier violations as ESLint issues.

It does not extend any of the other configurations in this package. However, please note that it must be applied after all other configurations.

Usage

{
  "extends": [
    /* other eslint configurations... */
    "@wsmd/eslint-config/prettier"
  ]
}

If you are including this configuration in your project, make sure you have prettier installed a dependency.

@wsmd/eslint-config/jest

This configuration configures the ESLint environment to be compatible with Jest. It also extends the style and recommended rules included in eslint-plugin-jest.

It does not extend any of the other configurations in this package.

Usage

{
  "extends": [
    "@wsmd/eslint-config/jest",
  ]
}

@wsmd/eslint-config/all

This configuration is a convenient configuration that extends all the other configurations above.

By extending it, ESLint support will enforce rules from the Airbnb JavaScript and React style guide, and have support for TypeScript, Jest, and Prettier.

Usage

{
  "extends": [
    "@wsmd/eslint-config/all",
  ]
}

Composing Multiple Configurations

The idea of this package is to allow the composition of multiple configurations to better fit the project needs as opposed to a catch-all configuration that could potentially slow down the linting process if most of the rules are not needed.

{
  "extends": [
    "@wsmd/eslint-config/base",
    "@wsmd/eslint-config/react", // `react` already includes `base`
    "@wsmd/eslint-config/typescript",
    "@wsmd/eslint-config/prettier",
    "@wsmd/eslint-config/jest"
  ]
}

Gotchas

Order of Configs

If you are composing multiple configurations, note that the configurations must be listed in the following order:

The base/react configs come first, followed by the typescript config, then followed by the prettier config.

Custom Rules

This config builds on top of popular style guides and recommended rule sets of various plugins. However, it was originally built as a sharable ESLint configuration for my personal projects. This means that there are a small number of rule overrides that I have applied as well.

You can still override these rules and customize others in your ESLint config file:

{
  "extends": [
    "@wsmd/eslint-config/base",
    "@wsmd/eslint-config/typescript",
    "@wsmd/eslint-config/prettier",
    "@wsmd/eslint-config/jest"
  ],
  "rules": {
    // override rules here
  }
}

License

MIT