javascript-typescript-conventions

Files (1)

• SKILL.md

SKILL.md (first lines)

# JavaScript/TypeScript Conventions

## Quick Start

```typescript
// Variables and constants - camelCase
const maxRetries = 3;
const defaultTimeout = 30;
const campaignsPerPage = 10;

// Function parameters and return types - camelCase
function processUserData(userName: string, userId: number): void {
    const isActive = true;
    const totalAmount = 100;
}

// Component names - PascalCase
function ActiveBadge({ count }: Props) { ... }
export function CampaignCard({ campaign }: CampaignCardProps) { ... }

// Type names - PascalCase
type CampaignData = {
    name: string;
    location: string;
};

interface Props {
    count: number;
}

// Environment variables - SCREAMING_SNAKE_CASE
const appName = import.meta.env.VITE_APP_NAME;
```

## Casing Rules

### Variables, Parameters, and Constants

Use **camelCase** for:
- Variable declarations
- Function parameters
- Constant values (even though they're declared with `const`)

```typescript
// Good
const maxRetries = 3;
const defaultTimeout = 30;
const campaignsPerPage = 10;

function processUserData(userName: string, userId: number): void {
    const isActive = true;
}

// Bad
const MAX_RETRIES = 3;  // Only use for environment variables
const default_timeout = 30;  // Don't use snake_case
```

### Component Names

Use **PascalCase** for:
- React components (both functions and classes)
- Component file names (e.g., `LoginCard.tsx`)

```typescript
// Good
function ActiveBadge({ count }: Props) { ... }
export function CampaignCard({ campaign }: CampaignCardProps) { ... }

// Bad
function activeBadge({ count }: Props) { ... }
function loginCard() { ... }
```

### Type Names

Use **PascalCase** for:
- TypeScript types (`type`)
- Interfaces
- Enum values

```typescript
// Good
type CampaignData = {
    name: string;
    location: string;
};

interface Props {
    count: number;
}

// Bad
type campaignData = { ... };
type user_props = { ... };
```

### Environment Variables

Use **SCREAMING_SNAKE_CASE** only for environment variables, particularly those accessed via `import.meta.env`:

```typescript
// Good
const appName = import.meta.env.VITE_APP_NAME;
const apiKey = import.meta.env.VITE_API_KEY;

// Bad (regular constants should be camelCase)
const APP_NAME = import.meta.env.VITE_APP_NAME;
```

## Naming Best Practices

### Variables and Functions

- Use descriptive, semantic names
- Prefer nouns for variables, verbs for functions
- Avoid single letters except in loops

```typescript

From ceilidhboy/skills, MIT.

More from ceilidhboy/skills