Incentro IC - Code Standards - ESLint

💫 Introduction

Shared ESLint configuration for linting files. It enforces our code style, as well as adding additional checks via various plugins:

• typescript-eslint - Typescript support for ESLint
• eslint-plugin-unicorn - A set of useful (and very strict) ESLint rules.
• eslint-plugin-import - Checks around import / export statements.
• eslint-plugin-react - Checks around React components.
• eslint-plugin-react-hooks - Checks around React hooks.
• eslint-plugin-jsx-a11y - Accessibility checks for JSX elements.
• @eslint-community/eslint-plugin-eslint-comments - Checks around comments disabling ESLint rules.
• @vitest/eslint-plugin - Checks around Vitest test files.
• @cspell/eslint-plugin - Checks spelling and grammar.

💾 Installation

To install the package, use the following command:

pnpm add -D eslint @incentro-ic/config-eslint

🪛 Usage

Create an ESLint configuration file and re-export this configuration:

import config from "@incentro-ic/config-eslint";
import { defineConfig } from "eslint/config";

export default defineConfig([
  ...config,
  {
    ignores: [
      // Build output
      "dist/**",

      // Files in the root directory
      "*.*",
    ],
  },
]);

✏️ Adding spell checking

The ESLint config uses an ESLint plugin for CSpell. If it detects a CSpell config file it will use that file to spell check the codebase. Example:

{
  "$schema": "https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json",
  "version": "0.2",
  "language": "en",
  "words": ["incentro"]
}

⚙️ Configs

🏠 Base

This is the base ESLint configuration that is applicable to all projects. This includes a set of general rules for linting Javascript code, without any framework-specific exceptions.

🪛 Usage

import config from "@incentro-ic/config-eslint";
import { defineConfig } from "eslint/config";

export default defineConfig([
  ...config,
  {
    ignores: [
      // Build output
      "dist/**",

      // Files in the root directory
      "*.*",
    ],
  },
]);

🔼 Next.js

This is the ESLint configuration for all Next.js projects. It extends the base configuration and adds rules and exceptions specific to Next.js projects. For example, it adds the Next.js ESLint plugin and allows default exports in files named layout.tsx and page.tsx.

🪛 Usage

export { default } from "@incentro-ic/config-eslint/next";

[!NOTE]

By default, the Next.js ESLint config ignores files in the dist, .next, and root directory. If you need to extend this list of ignored files, take a look at the usage example for the base config for an example on how to add ignored directories.

⭐ Nextra

This is the ESLint configuration for all Nextra projects. It extends the Next.js configuration and adds rules and exceptions specific to Nextra projects. For example, it allows default exports in files named _meta.tsx.

🪛 Usage

export { default } from "@incentro-ic/config-eslint/nextra";

[!NOTE]

By default, the Nextra ESLint config ignores files in the dist, .next, and root directory. If you need to extend this list of ignored files, take a look at the usage example for the base config for an example on how to add ignored directories.