@cloudflight/eslint-plugin-react

The Cloudflight ESLint Plugin for React provides multiple configurations of ESLint rules recommended by Cloudflight.

You can find the directory of all rules including their reasoning here.

Dependencies

The following dependencies are required:

"eslint": ">=9.0.0 < 10.0.0"

Usage

In your package.json add the following:

"devDependencies": {
    ...
    "@cloudflight/eslint-plugin-react": "<version>",
    ...
}

Now open your eslint.config.mjs and add one of the configurations:

import { cloudflightReactConfig } from '@cloudflight/eslint-plugin-react';
import { includeIgnoreFile } from '@eslint/compat';
import { dirname, normalize, resolve } from 'node:path';
import { fileURLToPath } from 'node:url';

const directory = dirname(fileURLToPath(import.meta.url));
const gitignorePath = normalize(resolve(directory, '.gitignore'));

export default [
    includeIgnoreFile(gitignorePath),
    ...cloudflightReactConfig({
        rootDirectory: import.meta.dirname,
    }),
];

See Custom Configuration for more complicated project setups.

When executing your next eslint . it will now validate your code against the cloudflight-recommended rules.

Formatting

This package also includes configs for formatting typescript.

In your package.json add the following:

"devDependencies": {
    ...
    "@cloudflight/eslint-plugin-react": "<version>",
    ...
  }

Create a new file called eslint.format.mjs and add the following:

import { cloudflightReactFormatConfig } from '@cloudflight/eslint-plugin-react';
import { includeIgnoreFile } from '@eslint/compat';
import { dirname, normalize, resolve } from 'node:path';
import { fileURLToPath } from 'node:url';

const directory = dirname(fileURLToPath(import.meta.url));
const gitignorePath = normalize(resolve(directory, '.gitignore'));

export default [
    includeIgnoreFile(gitignorePath),
    ...cloudflightReactFormatConfig({
        rootDirectory: import.meta.dirname,
    }),
];

With the command eslint -c eslint.format.mjs . your project can be checked for formatting violations.

Pre-Commit Hook

The reason we created another eslint config file just for formatting instead of adding it to the existing one is to separate between linting and formatting, which are two different concerns. Furthermore, with the separation we also gain the ability to fix the formatting automatically before commit. Automatically fixing linting bugs with eslint --fix is not recommended, since it changes the intent of the code.

To automatically format your code before committing, set up husky and lint-staged with the following content in your package.json.

{
    // ...
    "lint-staged": {
        "*.ts": "eslint -c eslint.format.mjs --fix"
    }
}