코드 포매팅은 프로젝트의 코드를 일관된 스타일로 유지하는 데 도움이 되는 중요한 단계입니다. 이를 위해 타입스크립트와 Babel을 함께 사용하여 코드를 포매팅하는 방법을 알아보겠습니다.

타입스크립트와 Babel 설정

우선, 프로젝트에 타입스크립트와 Babel을 설치합니다.

npm install typescript @babel/core @babel/preset-env @babel/preset-typescript

Babel 구성

Babel을 구성하여 타입스크립트 코드를 변환하고 포매팅할 수 있습니다. Babel 설정 파일(babel.config.js)을 프로젝트 루트 폴더에 생성하고 다음과 같이 설정합니다.

module.exports = {
  presets: [
    "@babel/preset-env",
    "@babel/preset-typescript"
  ]
};

Prettier와 Babel 통합 설정

프로젝트에 Prettier를 설치하고 Babel과 통합하여 코드 포매팅을 설정할 수 있습니다.

npm install --save-dev prettier

그리고 .prettierrc 파일을 프로젝트 루트 폴더에 생성하여 Prettier 구성을 추가합니다.

{
  "singleQuote": true,
  "semi": true
}

Babel 플러그인 추가

마지막으로, Babel에서 Prettier와의 통합을 위해 다음과 같은 Babel 플러그인을 추가합니다.

npm install @babel/preset-typescript @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread

Babel 설정 파일에 다음과 같이 추가합니다.

module.exports = {
  presets: [
    "@babel/preset-env",
    "@babel/preset-typescript"
  ],
  plugins: [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread"
  ]
};

이제 타입스크립트와 Babel을 사용하여 코드를 변환하고 Prettier와 통합하여 코드를 포매팅할 수 있습니다.

이것으로 코드 포매팅을 위한 타입스크립트와 Babel 설정이 완료되었습니다. 프로젝트 코드를 일관된 스타일로 유지하고 가독성을 높이는 데 도움이 될 것입니다.

참고 자료

• 타입스크립트 공식 문서
• Babel 공식 문서
• Prettier 공식 문서