Frontend Code Quality

Frontend Code Quality

This skill defines the quality standards specific to frontend applications.

Linting & Formatting

We use ESLint 9 with a shared configuration (@eridu/eslint-config).

• Command: pnpm lint (runs eslint . --fix)
• Rules:
  • No any types.
  • React Hooks rules enforced (react-hooks/rules-of-hooks, react-hooks/exhaustive-deps).
  • Standard imports sorting.

Testing

We use Vitest for unit and component testing.

• Command: pnpm test
• Environment: happy-dom
• Testing Library: @testing-library/react for component interactions.

Component Test Example

import { render, screen } from '@testing-library/react';
import { Button } from '@eridu/ui/components/button';

test('renders button', () => {
  render(<Button>Click me</Button>);
  expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument();
});

Absolute Imports

Always configure and use absolute imports to avoid messy relative paths like ../../../component. This makes it easier to move files around without breaking imports.

Configuration (tsconfig.json):

"compilerOptions": {
  "baseUrl": ".",
  "paths": {
    "@/*": ["./src/*"]
  }
}

Usage:

// ✅ GOOD: Absolute import
import { Button } from '@/components/Button';
import { useAuth } from '@/hooks/useAuth';

// ❌ BAD: Relative import
import { Button } from '../../../components/Button';

Benefits:

• Files can be moved without updating imports
• Clear distinction between workspace packages (@eridu/ui) and source code (@/*)
• More readable and maintainable

File Structure & Naming

Naming Conventions

• Components: PascalCase (e.g., UserProfile.tsx)
• Hooks: camelCase with use prefix (e.g., useAuth.ts)
• Utilities: camelCase (e.g., formatDate.ts)
• Routes: File-based routing conventions of TanStack Router (e.g., posts/$postId.tsx)
• Folders: kebab-case (e.g., user-profile/, auth-forms/)

Enforcing Naming Conventions

Use ESLint to enforce consistent file naming:

// .eslintrc.cjs
'check-file/filename-naming-convention': [
  'error',
  {
    '**/*.{ts,tsx}': 'KEBAB_CASE',
  },
  {
    ignoreMiddleExtensions: true,
  },
],
'check-file/folder-naming-convention': [
  'error',
  {
    'src/**/': 'KEBAB_CASE',
  },
],

Component Best Practices

Colocation

Keep components, functions, styles, and state as close as possible to where they are used. This improves:

• Code readability and maintainability
• Performance (reduces unnecessary re-renders)
• Developer experience (easier to find related code)

// ✅ GOOD: Component-specific hook colocated
// src/features/dashboard/components/UserStats.tsx
import { useUserStats } from './useUserStats';

export function UserStats() {
  const stats = useUserStats();
  return <div>{/* ... */}</div>;
}

// ❌ BAD: Hook in global hooks folder when only used here
import { useUserStats } from '@/hooks/useUserStats';

Avoid Large Components with Nested Render Functions

Extract UI units into separate components instead of using nested render functions.

// ❌ BAD: Nested render function
function Dashboard() {
  function renderUserList() {
    return <ul>{/* ... */}</ul>;
  }
  
  return <div>{renderUserList()}</div>;
}

// ✅ GOOD: Separate component
function UserList() {
  return <ul>{/* ... */}</ul>;
}

function Dashboard() {
  return (
    <div>
      <UserList />
    </div>
  );
}

Limit Props

If a component accepts too many props, consider:

• Splitting into multiple components
• Using composition (children/slots)
• Grouping related props into objects

// ❌ BAD: Too many props
function UserCard({ name, email, avatar, role, department, location, phone }) {
  // ...
}

// ✅ GOOD: Grouped props
interface User {
  name: string;
  email: string;
  avatar: string;
  role: string;
  department: string;
  location: string;
  phone: string;
}

function UserCard({ user }: { user: User }) {
  // ...
}

General Best Practices

1. Strict Props: Define specific interfaces for props, avoid any or broad object types.
2. Server State separation: Use TanStack Query for server data; use React.useState/useReducer only for local UI state.
3. Composition over Inheritance: Build complex UIs by composing small, focused components.
4. Consistent Code Style: Use ESLint and Prettier to enforce consistency across the codebase.

Checklist

• pnpm lint passes without errors.
• pnpm test passes.
• Component names match their filenames.
• Complex logic extracted to custom hooks.