들어가며

서버 초기화 과정에서 린팅, 포맷팅, 환경변수 등을 설정하면서 고민하고 찾은 내용을 정리해보고자 한다!

TypeScript 프로젝트의 코드 품질 관리성

Typescript의 정적 타입 검사와 더불어 코드 포맷팅, 잠재적 버그 방지를 통해 프로젝트의 유지 보수성과 안정성을 높일 수 있다!

ESLint와 Prettier의 역할

필요성

개발자도 사람이기 때문에 실수할 수 있고,각자 선호하는 코딩 스타일이 다르다. printWidth를 작게 두어 줄 바꿈이 많게 두거나 크게 두어 한 줄에 보는 사람도 있다. 협업을 하게 되는 경우엔 이러한 차이로 코드 리뷰가 원활하지 못할 수도 있기 때문에 ESLint와 Prettier가 필요하다!

1. ESLint: 코드 품질과 버그 방지

• 설정에 따라 미사용 변수, TypeScript의 관련 규칙 검사를 할 수 있다!

2. Prettier: 코드 스타일 포맷팅

• 줄바꿈이나 따옴표, 들여쓰기 등 각자의 코딩 스타일에 따라 저장해 놓으면 모든 파일의 코드가 일관성을 유지할 수 있다!

초기 설정

1. 패키지 설치

# 기본 패키지
pnpm add -D eslint prettier typescript
# 새로운 ypescript-eslint 패키지
pnpm add -D typescript-eslint
# Prettier와 ESLint 통합을 편리하게 해주는 패키지
pnpm add -D eslint-config-prettier eslint-plugin-prettier

@typescript-eslint/parser와 @typescript-eslint/eslint-plugin는 레거시 버전으로 이젠 typescript-eslint로 한 번에 통합하여 사용할 수 있다! 설치할 패키지가 줄어들고, flat config 방식 사용하여 설정이 간단해졌다!

참고: typescript-eslint는 최신 통합 패키지로, Node.js v16.20 이상, ESLint 8.21.0 이상 필요
typescript-eslint 공식 문서

2. ESLint 설정

.eslintrc.* 는 레거시 버전으로
파일 생성 및 설정은 flat config인 .eslint.config.js으로 설정한다!

import typescriptEslint from 'typescript-eslint';
import eslintPluginPrettier from 'eslint-plugin-prettier';
import eslintCongigPrettier from 'eslint-config-prettier';
export default typescriptEslint.config({
  files: '**/*.ts',
  // Prettier 규칙을 ESLint 통합
  plugins: { prettier: eslintPluginPrettier },
  extends: [
    eslintCongigPrettier, // ESLint와 Prettier 충돌 방지
  ],
  rules: {
    // any 타입 사용 금지
    '@typescript-eslint/no-explicit-any': 'error',
    // 미사용 변수 에러 처리
    '@typescript-eslint/no-unused-vars': 'error',
    // Promise 반환 함수에 async 키워드 강제
    '@typescript-eslint/promise-function-async': 'error',
    // 함수 반환 타입 명시 필수
    '@typescript-eslint/explicit-function-return-type': 'warn',
    // 타입 단언보다 타입 선언 사용 권장
    '@typescript-eslint/consistent-type-assertions': ['error', { assertionStyle: 'never' }],
    // Prettier 규칙을 ESLint 에러로 표시
    'prettier/prettier': 'error',
  },
});

typescript-eslint의 주요 규칙 설명

• extends 설정
• plugins 설정
• rules 커스터마이징

3. Prettier 설정

{
  "printWidth": 120, // 한 줄의 최대 길이
  "singleQuote": true, // 작은 따옴표 사용
  "semi": true, // 문장 끝 세미콜론 사용
  "tabWidth": 2, // 들여쓰기 간격
  "arrowParens": "always" // 화살표 함수에 매개변수 괄호 항상 사용
}

최소한의 설정을 진행했다.

4. 그 외 설정

// package.json
"scripts": {
    // ...
    "lint": "eslit src/**/*.ts",
    "format": "prettier --write src/**/*.ts"
  },

// .prettierignore
# 의존성 관련
node_modules
pnpm-lock.yaml
# 빌드 결과물
dist
build
# 환경설정
.env*
# IDE 설정
.vscode
.idea
# 로그파일
logs
*.log
# OS 파일
.DS_Store
Thumbs.db
# TypeScript
*.tsbuildinfo
.pnpm
.eslintcache

마무리

이전에는 부트캠프에서 배운 대로 설정만 복사-붙여넣기로 사용했지만, 이번 기회에 각 도구의 역할과 설정의 의미를 자세히 이해하게 되었다. 특히 typescript-eslint의 새로운 통합 패키지와 flat config 방식을 적용하면서 더 최신의, 효율적인 설정 방법을 익힐 수 있었다.

+추가 참고할 자료!

https://github.com/airbnb/ts-migrate
https://github.com/google/eslint-config-google
https://github.com/standard/eslint-config-standard