Code Quality & Linting

To maintain a robust and predictable codebase for the TEIRAC project management platform, this project enforces strict linting and type-checking standards. The configuration is built around ESLint Flat Config and TypeScript, ensuring that the dashboard, analytics, and project modules follow consistent patterns.

Linting Architecture

The project utilizes ESLint 9+ with the Flat Config system. The configuration is centralized in eslint.config.js and applies to all TypeScript files within the src directory.

Key Plugins & Rules

The following plugins are integrated to ensure React and TypeScript best practices:

• @eslint/js: Provides the base recommended rules for JavaScript.
• typescript-eslint: Enables linting for TypeScript-specific syntax and type safety.
• eslint-plugin-react-hooks: Enforces the Rules of Hooks, critical for the complex state management found in the Dashboard and Project modules.
• eslint-plugin-react-refresh: Validates that components are compatible with Vite’s Fast Refresh for a seamless development experience.

Base Configuration

The current configuration targets .ts and .tsx files with the following setup:

// eslint.config.js
export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      js.configs.recommended,
      tseslint.configs.recommended,
      reactHooks.configs.flat.recommended,
      reactRefresh.configs.vite,
    ],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
  },
])

TypeScript & Type Safety

TEIRAC leverages TypeScript's strict mode to prevent runtime errors in data-heavy views. Type definitions are localized to the components and pages where they are used to ensure high cohesion.

Core Interfaces

Critical data structures like Projects and User Profiles are strictly typed to match the Supabase schema:

interface Project {
    id: string;
    name: string;
    spi?: number;
    budget_total?: number;
    status: 'on-track' | 'at-risk' | 'delayed' | 'completed';
    // ...
}

Type-Aware Linting (Recommended for Production)

For production-grade development, it is recommended to enable type-aware lint rules. This allows ESLint to catch bugs based on the actual types in your code rather than just syntax.

To enable this, update your eslint.config.js language options:

languageOptions: {
  parserOptions: {
    project: ['./tsconfig.node.json', './tsconfig.app.json'],
    tsconfigRootDir: import.meta.dirname,
  },
},

Enforcement and Execution

Running the Linter

You can check the codebase for linting errors using the Vite-integrated scripts. Run the following command in your terminal:

# Check for linting errors
npm run lint

# Most editors (VS Code, IntelliJ) will automatically 
# highlight errors based on the eslint.config.js file.

React Compiler

The React Compiler is currently disabled to maintain optimal build performance. If you intend to enable it for automated memoization, follow the official React Compiler installation guide and ensure your components follow the "Rules of React."

Formatting Standards

While ESLint handles code quality, it is recommended to use a formatter (such as Prettier) alongside it. The project emphasizes:

• Sora/DM Mono Font Integration: Consistency in UI typography.
• Standardized Spacing: 2-space or 4-space indentation as defined by the editor config.
• Strict UI Component Typing: Ensuring all props for components like KPICard or StatusBadge are explicitly defined.