코드 포맷팅과 코드 품질을 관리하기 위해 Prettier와 타입스크립트 Lint를 동시에 사용하는 경우, 두 도구 간의 규칙 충돌이 발생할 수 있습니다. 이러한 충돌을 해결하는 방법에 대해 알아보겠습니다.

Prettier와 타입스크립트 Lint 규칙 충돌 이해하기

Prettier는 코드를 자동으로 포맷팅하여 일관된 스타일로 유지하도록 도와주는 도구입니다. 반면, 타입스크립트 Lint는 코드 품질을 검사하고 일부 규칙을 적용하여 코드를 더 안정적이고 읽기 쉽게 만들어줍니다. 이 두 도구를 함께 사용할 때 일부 규칙이 충돌할 수 있습니다. 예를 들어, Prettier가 자동으로 적용한 들여쓰기와 탭 크기가 타입스크립트 Lint 규칙과 다를 수 있습니다.

해결 방법

1. Prettier와 타입스크립트 Lint 플러그인 설치

먼저, Prettier와 타입스크립트 Lint를 통합하는 플러그인을 설치합니다. 이를 통해 두 도구의 규칙 충돌을 방지할 수 있습니다.

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

2. 설정 파일 수정

타입스크립트 Lint의 설정 파일에 Prettier와의 충돌을 방지하는 설정을 추가합니다.

예를 들어, .eslintrc.js 파일에 다음과 같이 설정합니다.

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

이렇게 함으로써 Prettier와 타입스크립트 Lint 규칙을 조화롭게 사용할 수 있게 됩니다.

결론

Prettier와 타입스크립트 Lint는 각각 코드 포맷팅과 코드 품질 검사를 위한 용도로 사용되지만, 함께 사용할 때는 규칙 충돌을 조심해야 합니다. 위에서 소개한 방법을 통해 이러한 충돌을 해결하고, 일관된 코드 스타일과 높은 품질의 코드를 유지할 수 있습니다.

더 자세한 정보는 Integrating Prettier with ESLint 를 참고하세요.