setup

Project Setup Rules

ESLint Configuration

Always setup ESLint with proper JSON configuration including import sorting and grouping rules for React projects.

Required ESLint Rules:

• Import sorting and grouping (external, internal, relative)
• React-specific linting rules
• TypeScript support
• Consistent code formatting

ESLint Configuration Example:

{
  "extends": [
    "eslint:recommended",
    "@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:import/recommended",
    "plugin:import/typescript"
  ],
  "plugins": [
    "react",
    "react-hooks",
    "@typescript-eslint",
    "import"
  ],
  "rules": {
    "import/order": [
      "error",
      {
        "groups": [
          "builtin",
          "external",
          "internal",
          "parent",
          "sibling",
          "index"
        ],
        "newlines-between": "always",
        "alphabetize": {
          "order": "asc",
          "caseInsensitive": true
        },
        "pathGroups": [
          {
            "pattern": "react",
            "group": "external",
            "position": "before"
          },
          {
            "pattern": "@/**",
            "group": "internal"
          }
        ],
        "pathGroupsExcludedImportTypes": ["react"]
      }
    ],
    "import/no-unresolved": "error",
    "import/no-duplicates": "error",
    "react/react-in-jsx-scope": "off",
    "react/prop-types": "off",
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off"
  },
  "settings": {
    "react": {
      "version": "detect"
    },
    "import/resolver": {
      "typescript": {
        "alwaysTryTypes": true
      }
    }
  }
}

Import Order Examples:

• ❌ Mixed imports: import { useState } from 'react'; import { Button } from './Button'; import axios from 'axios';
• ✅ Grouped imports:

// External libraries
import axios from 'axios';
import React, { useState } from 'react';

// Internal modules
import { Button } from '@components/Button';
import { API_SERVICE } from '@services/api';

// Relative imports
import './Component.styles.scss';