타입스크립트와 Babel을 함께 사용하는 프로젝트에서 코드 품질을 유지하는 것은 매우 중요합니다. Linter를 사용하여 코드를 검사하여 일관된 코딩 스타일을 유지할 수 있습니다. 이 글에서는 타입스크립트 및 Babel 프로젝트에 ESLint와 Prettier를 적용하는 방법에 대해 설명하겠습니다.

ESLint 및 Prettier 설치

먼저 프로젝트 루트 디렉토리에서 ESLint와 Prettier를 설치합니다.

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-prettier eslint-plugin-prettier prettier --save-dev

ESLint 구성

1. 프로젝트 루트 디렉토리에 .eslintrc.js 파일을 만듭니다.

2. 다음 구성을 사용하여 .eslintrc.js 파일을 작성합니다.

module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint', 'prettier'],
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended'
  ],
  rules: {
    'prettier/prettier': 'error'
  }
};

Prettier 구성

1. 프로젝트 루트 디렉토리에 .prettierrc 파일을 만듭니다.

2. 적절한 Prettier 구성 옵션을 .prettierrc 파일에 추가합니다.

{
  "singleQuote": true,
  "semi": false,
  "tabWidth": 2,
  "printWidth": 80
}

package.json 스크립트 업데이트

package.json 파일의 스크립트 섹션을 업데이트하여 코드 포맷팅 및 Lint 확인에 사용할 명령어를 추가합니다.

"scripts": {
  "lint": "eslint . --ext .ts",
  "lint:fix": "eslint . --ext .ts --fix"
}

마무리

이제 타입스크립트 및 Babel을 함께 사용하는 프로젝트에 ESLint와 Prettier가 적용되었습니다. 이제 코드 작성시 Linter가 실시간으로 코드를 검사하고 문제를 알려줄 것입니다.

이제 자유롭게 프로젝트를 진행하고, 코드 품질을 유지하기 위해 ESLint와 Prettier를 사용하여 개발할 수 있습니다.

참고 자료

• ESLint 공식문서
• Prettier 공식문서
• TypeScript ESLint
• Babel