eslint-config-fluxuator

This package includes the shareable ESLint configuration that I use in my projects.

It was inspired by https://github.com/airbnb/javascript and https://github.com/facebook/create-react-app but less opinionated.

Installation (React app)

NOTE: You can also create it in your home directory to enable it globally for all projects.

React App

1. Install this package, ESLint and the necessary dependencies

yarn add -D eslint-config-fluxuator \
              @babel/core@^7.0.0 @babel/eslint-parser@^7.0.0 @babel/preset-react@^7.0.0 \
            eslint@^8.0.0 \
              eslint-plugin-react@^7.0.0 eslint-plugin-react-hooks@^4.0.0 \
            typescript@^5 \
              @typescript-eslint/eslint-plugin@^6 @typescript-eslint/parser@^6

2. Create a file named .eslintrc with following contents in the root folder of your project:

{
  "extends": ["fluxuator"]
}

3. You can override the settings from eslint-config-fluxuator by editing the .eslintrc file. Learn more about configuring ESLint on the ESLint website.

{
  "extends": ["fluxuator"],
  "rules": {
    "some-annoying-rule": "off"
  }
}

4. If you are using the new JSX transform from React 17, add "fluxuator/jsx-runtime" to "extends" to disable the relevant rules.

5. Add a script to you package.json to check your project with Eslint.

{
  "scripts": {
    "lint": "eslint '**/*.{ts,tsx}' --report-unused-disable-directives",
    "lint:fix": "yarn lint --fix --max-warnings 0"
  }
}

React App (Recommended)

You can also enable all recommended rules for your React App with only one config that combines all recommended rules including Prettier, but without testing libraries (should be installed separately)

{
  extends: ['fluxuator/react-recommended'],
}

{
  extends: [
    'fluxuator/react-recommended',
    // "fluxuator/vitest-recommended"
    // "fluxuator/jest-recommended"
  ],
}

NOTE: Requires Prettier to be installed additionally

NodeJS App

1. Install this package, ESLint and the necessary plugins

yarn add -D eslint-config-fluxuator \
            eslint@^8.0.0 \
            typescript@^5 \
              @typescript-eslint/eslint-plugin@^6 @typescript-eslint/parser@^6

2. Create a file named .eslintrc with following contents in the root folder of your project:

{
  "extends": ["fluxuator/node"]
}

3. You can override the settings from eslint-config-fluxuator by editing the .eslintrc file. Learn more about configuring ESLint on the ESLint website.

{
  "extends": ["fluxuator/node"],
  "rules": {
    "some-annoying-rule": "off"
  }
}

NodeJS App (Recommended)

You can also enable all recommended rules for your NodeJS App with only one config that combines all recommended rules including Prettier, but without testing libraries (should be installed separately)

{
  "extends": ["fluxuator/node-recommended", "fluxuator/jest"]
}

NOTE: Requires Prettier to be installed additionally

That's it!

Extensions

Jest

This config also ships with optional Jest rules for ESLint (based on eslint-plugin-jest)

1. Install the ESLint plugin for Jest and Testing Library (if you don't already have them installed).

yarn add -D jest eslint-plugin-jest eslint-plugin-jest-formatting

2. Enable these rules by adding the Jest config to the extends array in your ESLint config.

{
  "extends": ["fluxuator", "fluxuator/jest"]
}

Vitest

In case you are using ViteJS as app builder, it is recommended to use Vitest instead of Jest in your app. This config also ships with optional Vitest rules for ESLint (based on eslint-plugin-vitest)

1. Install the ESLint plugin for Vitest

yarn add -D jest eslint-plugin-vites eslint-plugin-jest-formatting

2. Enable these rules by adding the Jest config to the extends array in your ESLint config.

{
  "extends": ["fluxuator", "fluxuator/vitest"]
}

Testing Library

You can also charge your ESLint with additional power of eslint-plugin-testing-library) rules.

yarn add -D  eslint-plugin-testing-library

and enable additional rules

{
  "extends": ["fluxuator", "fluxuator/vitest", "fluxuator/testing-library"]
}

Prettier

This config also ships with optional Prettier rules for ESLint.

1. Install the Prettier tool (if you don't already have them installed).

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

2. Enable these rules by adding the Prettier config to the extends array in your ESLint config. Make sure to put it last, so it gets the chance to override other configs.

{
  "extends": ["fluxuator", "fluxuator/prettier"]
}

Accessibility Checks

Some basic rules from the eslint-plugin-jsx-a11y plugin are activated:

If you want to enable even more accessibility rules, you can create an .eslintrc file in the root of your project with this content:

{
  "extends": ["fluxuator", "fluxuator/a11y"]
}

MDX rules

This config also ships with optional MDX rules for ESLint (based on eslint-plugin-mdx).

1. Install the ESLint plugin for MDX (if you don't already have it installed).

yarn add -D eslint-plugin-mdx@^1.16.0

2. Enable these rules by adding the MDX config to the extends array in your ESLint config.

{
  "extends": ["fluxuator", "fluxuator/jest", "fluxuator/mdx"]
}