ESLint Setup Guide

What is ESLint?

ESLint is a static code analysis tool that helps identify and fix problems in JavaScript/TypeScript code. It enforces coding standards, catches common errors, and ensures consistent code style across your project.

Why do we need ESLint?

1. Code Consistency: Maintains consistent coding style across the team
2. Error Prevention: Catches potential errors before runtime
3. Import Organization: Automatically organizes imports in a standardized way
4. Best Practices: Enforces coding best practices and patterns

Prerequisites

• Node.js and yarn installed
• VS Code editor
• A TypeScript React project

Installation Steps

1. VS Code Extension Setup

1. Open VS Code
2. Go to Extensions (View → Extensions or Ctrl+Shift+X)
3. Search for "ESLint"
4. Install the ESLint extension by Microsoft

2. Configure VS Code Settings

1. Open Command Palette (Ctrl+Shift+P or Cmd+Shift+P on Mac)
2. Type "settings json"
3. Select "Preferences: Open Workspace Settings (JSON)"
4. Add the following configuration:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}

3. Project Dependencies

Install required packages:

yarn add -D eslint eslint-plugin-import eslint-import-resolver-typescript

4. ESLint Configuration

Create eslint.config.js in your project root:

import js from "@eslint/js";
import globals from "globals";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";
import tseslint from "typescript-eslint";
import importPlugin from "eslint-plugin-import";

export default tseslint.config(
  { ignores: ["dist"] },
  {
    extends: [js.configs.recommended, ...tseslint.configs.recommended],
    files: ["**/*.{ts,tsx}"],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
      "react-hooks": reactHooks,
      "react-refresh": reactRefresh,
      import: importPlugin,
    },
    rules: {
      "import/order": [
        "error",
        {
          pathGroups: [
            // External packages
            {
              pattern: "@tanstack/**",
              group: "external",
              position: "before",
            },
            {
              pattern: "@apollo/**",
              group: "external",
              position: "before",
            },
            // UI Components
            {
              pattern: "@/vendor/shadcn/components/ui/**",
              group: "internal",
              position: "before",
            },
            // GraphQL operations
            {
              pattern: "@/modules/**/graphql/(queries|mutations|fragments)/**",
              group: "internal",
              position: "after",
            },
            // Types
            {
              pattern: "@/modules/**/type/**",
              group: "internal",
              position: "after",
            },
            // Schema validations
            {
              pattern: "@/modules/**/schema/**",
              group: "internal",
              position: "after",
            },
          ],
          groups: [
            "builtin",
            "external",
            "internal",
            "parent",
            "sibling",
            "index",
          ],
          "newlines-between": "always",
          alphabetize: {
            order: "asc",
            caseInsensitive: true,
          },
        },
      ],
    },
  }
);

Import Order Example

This configuration will organize imports as follows:

// External packages
import { useForm } from "@tanstack/react-form";
import { useMutation } from "@apollo/client";

// UI Components
import { Button } from "@/vendor/shadcn/components/ui/button";

// GraphQL operations
import { SEND_OTP } from "@/modules/auth/graphql/mutations/send-otp";

// Types
import { SendOTPInput } from "@/modules/auth/type/send-otp.type";

// Schema
import { sendOTPSchema } from "@/modules/auth/schema";

Troubleshooting

If imports are not auto-organizing:

1. Ensure ESLint extension is installed and enabled
2. Reload VS Code window (Ctrl+Shift+P → "Reload Window")
3. Check ESLint status in VS Code's bottom bar
4. View ESLint output (Ctrl+Shift+P → "ESLint: Show Output")

Maintenance

• Regularly update ESLint and its plugins using yarn upgrade
• Review and adjust import ordering rules as project structure evolves
• Share configuration updates with team members