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.

The following configurations are available:

🏠 Base - @incentro-ic/config-eslint/base
🦁 NestJS - @incentro-ic/config-eslint/nest
🔼 Next.js - @incentro-ic/config-eslint/next
⭐ Nextra - @incentro-ic/config-eslint/nextra
🔴 React Router - @incentro-ic/config-eslint/react-router

💾 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:

eslint.config.js


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:

cspell.config.json


{
  "$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

eslint.config.js


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
      "*.*",
    ],
  },
]);

🦁 NestJS

This is the ESLint configuration for all NestJS projects. It extends the base configuration and adds rules and exceptions specific to NestJS projects. For example, it allow empty classes if they use decorators, because this is a common pattern in NestJS.

🪛 Usage

eslint.config.js


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

Note

By default, the NestJS ESLint config ignores files in the dist 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.

🔼 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

eslint.config.js


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

eslint.config.js


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.

🔴 React Router

This is the ESLint configuration for all React Router projects. It extends the base configuration and adds rules and exceptions specific to React Router projects. For example, it allows default exports in files named root.ts, routes.ts, and other common React Router file names that require default exports. It also allows the “Params” abbreviation because it’s commonly used by code generated by React Router.

🪛 Usage

eslint.config.js


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

Note

By default, the React Router ESLint config ignores files in the dist, .react-router, 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.