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";

⭐ 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";