Prettier는 코드를 자동으로 포맷하여 일관된 스타일로 유지해주는 도구입니다. 그러나 때때로 Prettier가 일부 코드 스타일을 적용하지 않을 때가 있습니다. 특히 TypeScript 코드에서 이런 문제가 발생할 때는 어떻게 해야 할까요?

이 글에서는 Prettier에서 적용되지 않는 TypeScript 코드 스타일을 처리하는 방법에 대해 알아보겠습니다.

1. Prettier 환경 설정 확인

가장 먼저 확인해야 할 것은 Prettier 환경 설정입니다. .prettierrc 파일이나 package.json의 prettier 섹션을 확인하여 올바른 설정이 되어 있는지 확인하세요. TypeScript에 맞는 설정이 적용되어 있는지도 확인해야 합니다.

2. ESLint와 함께 사용하기

Prettier는 코드의 형식을 정리하는 데 탁월하지만, 코드 품질과 관련된 몇 가지 규칙은 다루지 못합니다. 이런 경우에 ESLint와 함께 사용하여 더 많은 규칙을 적용할 수 있습니다. TypeScript 코드에 대해 ESLint를 설정하고 Prettier와 통합하여 사용하면 더 나은 결과를 얻을 수 있습니다.

// .eslintrc.js
module.exports = {
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint"],
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended",
  ],
  rules: {
    // 추가적인 ESLint 규칙을 설정할 수 있음
  },
};

3. 스타일 오버라이드

Prettier는 때로 우리가 선호하는 코드 스타일을 따르지 않을 수 있습니다. 이 경우 // prettier-ignore 주석을 사용하여 해당 줄이나 블록을 Prettier의 포맷팅에서 제외시킬 수 있습니다.

// prettier-ignore
const longVariableName: string = "This is a long string that should not be line-wrapped by Prettier, even though it exceeds the print width.";

4. Prettier 확장 설정 사용

Prettier는 확장 설정을 제공하여 세부적인 포맷팅을 적용할 수 있습니다. 이를 사용하여 특정한 경우나 특정한 코드 영역에 대해 원하는 포맷팅을 적용할 수 있습니다.

// eslint-disable-next-line prettier/prettier
const longFunctionName = (param1: string, param2: number): string => {
  // code here
};

Prettier에서 적용되지 않는 TypeScript 코드 스타일을 처리하는 방법은 다양합니다. 설정 확인, ESLint와 함께 사용, 스타일 오버라이드, 그리고 확장 설정 사용 등을 통해 적절한 처리 방법을 선택할 수 있습니다.

이제, Prettier가 TypeScript 코드에 대해 일관된 스타일을 유지하도록 설정할 수 있을 것입니다.

참고 자료:

• Prettier 공식 문서
• ESLint 공식 문서