JavaScript·TypeScript 공통 스타일 가이드입니다. 모든 규칙은 ESLint·Prettier로 자동 강제됩니다.
도구 체인
구분 | 도구 |
언어 | TypeScript 6.0 (strict) |
Lint | ESLint v10 (flat config) + eslint-plugin-import-x |
Format | Prettier 3 |
Git Hooks | Husky 9 + lint-staged |
Commit | commitlint + Conventional Commits |
자주 쓰는 명령:
pnpm lint # ESLint (--fix 로 자동 수정)
pnpm format # Prettier
Bash
복사
•
pre-commit 훅(lint-staged)이 스테이지된 파일에 eslint --fix + prettier --write를 적용합니다.
•
--no-verify로 훅을 우회하지 않습니다. (긴급 hotfix 예외)
Formatter — Prettier
.prettierrc:
{
"semi": false,
"tabWidth": 2,
"singleQuote": true,
"printWidth": 100,
"trailingComma": "none"
}
JSON
복사
Import 정렬
ESLint(import-x)가 아래 순서로 그룹을 강제하고, 그룹 사이에 빈 줄 1개를 둡니다. (그룹 내부는 알파벳 순)
1.
builtin — 런타임 내장 모듈 (fs, path …)
2.
external — npm 패키지
3.
internal — 프로젝트 alias
4.
parent / sibling / index — 상대 경로 (../, ./)
5.
type — import type { … }
네이밍 가이드라인
타입 | 네이밍 | Example |
컴포넌트 | PascalCase | CapWords |
패키지 | PascalCase | CapWords |
클래스 | PascalCase | CapWords |
예외(Exception) | PascalCase | CapWords |
함수 | camelCase | camelCase() |
상수 | UPPER_CASE | CAPS_WITH_UNDER |
변수 | camelCase | camelCase |
메서드 | camelCase | camelCase() |
함수/메서드 매개변수 | camelCase | camelCase |
파일·폴더 명명
•
파일: kebab-case.<역할>.ts (예: user.service.ts)
•
폴더: kebab-case
•
클래스·인터페이스·타입: PascalCase
•
변수·함수·메서드: camelCase
•
상수: UPPER_SNAKE_CASE
변수 선언 — let, const 사용, 한 번에 하나씩
•
var보다 let, const를 사용합니다.
•
한 번의 선언에서 하나의 변수만 선언합니다.
const num1 = 0
const num2 = 0
const num3 = 0
// (O)
const num1, num2, num3 = 0
const num1 = num2 = num3 = 0
// (X)
JavaScript
복사
조건문 — ==, != 대신 ===, !== 사용
•
명시적 타입 검증: ===, !==는 타입 변환을 하지 않아 코드의 의도를 명확히 표현합니다.
•
버그 예방: 암시적 타입 변환으로 인한 버그를 줄입니다. 예) 0 == false는 true지만 0 === false는 false.
•
가독성: 의도하지 않은 타입 변환을 방지해 코드가 더 직관적입니다.