Anthony Fu의 JavaScript/TypeScript 프로젝트 도구 및 규칙

코딩 관행

코드 구성

• 단일 책임: 각 소스 파일은 명확하고 집중된 범위/목적을 가져야 합니다.
• 큰 파일 분할: 파일이 너무 커지거나 여러 관심사를 처리할 때는 분할하세요.
• 타입 분리: 항상 타입과 인터페이스를 types.ts 또는 types/*.ts로 분리하세요.
• 상수 추출: 상수를 전용 constants.ts 파일로 옮기세요.

실행 환경

• 동형 코드 선호: 가능하면 Node, 브라우저, 워커에서 모두 작동하는 런타임 독립적인 코드를 작성하세요.
• 명확한 런타임 표시: 코드가 환경에 특화된 경우 파일 상단에 주석을 추가하세요:

// @env node
// @env browser

TypeScript

• 명시적 반환 타입: 가능하면 반환 타입을 명시적으로 선언하세요.
• 복잡한 인라인 타입 회피: 복잡한 타입은 전용 type 또는 interface 선언으로 추출하세요.

주석

• 불필요한 주석 회피: 코드는 자명해야 합니다.
• '어떻게'가 아닌 '왜'를 설명: 주석은 코드가 무엇을 하는지가 아니라 이유나 의도를 설명해야 합니다.

테스트 (Vitest)

• 테스트 파일: foo.ts → foo.test.ts (동일 디렉토리)
• describe/it API 사용 (test 대신)
• 복잡한 출력에는 toMatchSnapshot 사용
• 언어별 스냅샷에는 명시적 경로와 함께 toMatchFileSnapshot 사용

---

도구 선택

@antfu/ni 명령어

명령어	설명
ni	종속성 설치
ni <pkg> / ni -D <pkg>	종속성 / 개발 종속성 추가
nr <script>	스크립트 실행
nu	종속성 업그레이드
nun <pkg>	종속성 제거
nci	클린 설치 (pnpm i --frozen-lockfile)
nlx <pkg>	패키지 실행 (npx)

TypeScript 설정

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  }
}

ESLint 설정

// eslint.config.mjs
import antfu from '@antfu/eslint-config'

export default antfu()

작업을 완료할 때 pnpm run lint --fix를 실행하여 코드 서식을 지정하고 코딩 스타일을 수정하세요.

자세한 구성 옵션: antfu-eslint-config

Git 훅

{
  "simple-git-hooks": {
    "pre-commit": "pnpm i --frozen-lockfile --ignore-scripts --offline && npx lint-staged"
  },
  "lint-staged": { "*": "eslint --fix" },
  "scripts": {
    "prepare": "npx simple-git-hooks"
  }
}

pnpm 카탈로그

버전 관리를 위해 pnpm-workspace.yaml에서 명명된 카탈로그를 사용하세요:

카탈로그	목적
prod	프로덕션 종속성
inlined	번들러 인라인 종속성
dev	개발 도구 (린터, 번들러, 테스트)
frontend	프론트엔드 라이브러리

기본 카탈로그는 사용하지 마세요. 카탈로그 이름은 프로젝트 요구 사항에 따라 조정할 수 있습니다.

---

참고 자료

주제	설명	참고
ESLint 설정	프레임워크 지원, 포매터, 규칙 재정의, VS Code 설정	antfu-eslint-config
프로젝트 설정	.gitignore, GitHub Actions, VS Code 확장	setting-up
앱 개발	Vue/Nuxt/UnoCSS 규칙 및 패턴	app-development
라이브러리 개발	tsdown 번들링, 순수 ESM 퍼블리싱	library-development
모노레포	pnpm 워크스페이스, 중앙화된 별칭, Turborepo	monorepo