javascript-standards

JavaScript/TypeScript Coding Standards

New Project Preferences

When starting new frontend projects, prefer:

• React 18 with TypeScript
• Vite for development server
• Parcel for production bundling
• shadcn/ui for components
• Tailwind CSS 3 for styling

General Preferences

• TypeScript over JavaScript for new code
• ESM over CommonJS (import/export not require)
• Prettier for formatting, ESLint for linting
• Strict TypeScript ("strict": true in tsconfig)

Style Guide

Formatting (Prettier defaults)

• Line length: 80-100 characters
• Single quotes for strings
• Semicolons: consistent (prefer with)
• Trailing commas: ES5 or all
• 2 space indentation

Naming Conventions

// Files: kebab-case or PascalCase for components
user-service.ts
UserProfile.tsx

// Variables and functions: camelCase
const activeUsers = [];
function getUserById(userId: string): User {}

// Classes and types: PascalCase
class UserService {}
interface UserProfile {}
type UserId = string;

// Constants: SCREAMING_SNAKE_CASE or camelCase
const MAX_RETRY_ATTEMPTS = 3;
const defaultTimeout = 30000; // also acceptable

// React components: PascalCase
function UserCard({ user }: UserCardProps) {}
const ProfileHeader: React.FC<Props> = () => {};

// Boolean variables: is/has/should prefix
const isActive = true;
const hasPermission = false;
const shouldRefetch = true;

TypeScript

Type Definitions

// Prefer interfaces for objects that can be extended
interface User {
  id: string;
  email: string;
  name: string;
  createdAt: Date;
}

// Use type for unions, intersections, mapped types
type UserId = string | number;
type UserWithPosts = User & { posts: Post[] };
type Readonly<T> = { readonly [K in keyof T]: T[K] };

// Avoid `any` - use `unknown` for truly unknown types
function parseJSON(json: string): unknown {
  return JSON.parse(json);
}

// Use generics for reusable types
function first<T>(arr: T[]): T | undefined {
  return arr[0];
}