[typescript] Prettier와 다양한 프론트엔드 프레임워크 통합하기

08 Dec 2023

typescript

Prettier는 코드 포맷터 도구로써, 코드를 일관된 스타일로 자동으로 정리해주는데, 자바스크립트와 타입스크립트, CSS, JSON 등과 같은 다양한 언어를 지원합니다. 이 문서에서는 TypeScript와 Prettier를 함께 사용하면서, Angular, React, Vue와 같은 다양한 프론트엔드 프레임워크와 통합하는 방법을 알아보겠습니다.

1. Prettier와 TypeScript 설정

먼저, 프로젝트 폴더에서 prettier와 typescript를 설치합니다.

npm install --save-dev prettier typescript

그리고 프로젝트 루트 디렉토리에 .prettierrc 파일을 생성하여 Prettier 설정을 추가합니다.

{
  "singleQuote": true,
  "semi": false,
  "tabWidth": 2,
  // 기타 원하는 설정 추가
}

그리고 tsconfig.json 파일에 아래와 같은 부분을 추가하여 Prettier와 협업하도록 설정합니다.

{
  "compilerOptions": {
    "noEmit": true,
    "outDir": "./build"
  }
}

2. Angular와 Prettier 통합하기

Angular 프로젝트에 Prettier를 통합하기 위해서는, 프로젝트 루트에 angular.json 파일을 열어 아래와 같이 projects > architect > lint > options에 prettier 설정을 추가합니다.

{
  "projects": {
    "architect": {
      "lint": {
        "options": {
          "tslintConfig": "tslint.json",
          "prettier": true
        }
      }
    }
  }
}

3. React와 Prettier 통합하기

React 프로젝트에 Prettier를 통합하기 위해서는, 프로젝트 루트 디렉토리에 .eslintrc 파일을 열고 아래와 같이 extends, plugins, rules 부분에 prettier 설정을 추가합니다.

{
  "extends": ["plugin:prettier/recommended"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

4. Vue와 Prettier 통합하기

Vue 프로젝트에 Prettier를 통합하기 위해서는, 프로젝트 루트 디렉토리에 .prettierrc 파일을 생성하여 Prettier 설정을 추가합니다. 그리고 .eslintrc.js 파일에 Prettier 플러그인을 추가합니다.

module.exports = {
  // ...
  plugins: ["prettier"],
  extends: ["plugin:prettier/recommended"]
};

결론

위와 같이 TypeScript와 Prettier를 통합하여 Angular, React, Vue 프로젝트에서도 일관된 코드 스타일을 유지할 수 있습니다. 해당 프레임워크에 맞는 설정을 추가함으로써, 개발자들은 효율적으로 협업하며 일관된 코드 품질을 유지할 수 있습니다.

참고 문헌:

이상으로, 프론트엔드 프레임워크에서 Prettier를 통합하는 방법에 대해 알아보았습니다.