Prettier

Prettier는 2017년에 출시된 “독선적인(Opinionated)” 코드 포매터.
“독선적"이라는 의미는 코드 스타일에 대한 대부분의 결정을 Prettier가 자체적으로 내린다는 뜻.
이는 개발자들 사이의 코드 스타일 논쟁을 줄이고, 일관된 코드베이스를 유지하는 데 큰 도움을 준다.

주요 특징과 장점

  1. 광범위한 언어 지원
    Prettier는 다음과 같은 다양한 언어와 파일 형식을 지원한다:

    • JavaScript/TypeScript
    • JSX/TSX
    • CSS/SCSS/Less
    • HTML
    • JSON
    • Markdown
    • YAML
    • GraphQL

  2. 최소한의 설정
    Prettier는 설정 옵션을 의도적으로 제한적으로 제공한다. 이는 다음과 같은 이점이 있다:

    • 팀 내 코드 스타일 논쟁 감소
    • 설정 파일 관리의 단순화
    • 프로젝트 간 일관성 유지 용이

  3. 자동 코드 재정렬
    Prettier는 AST(추상 구문 트리)를 사용하여 코드를 완전히 재구성한다:

    • 들여쓰기 자동 조정
    • 줄 바꿈 최적화
    • 긴 줄 자동 분리
    • 주석 위치 정리

  4. IDE 통합
    대부분의 주요 개발 도구와 원활하게 통합된다:

    • Visual Studio Code의 Prettier 확장
    • WebStorm의 내장 지원
    • Sublime Text 플러그인
    • Atom 패키지

설정하는 방법

  1. 설치:

    1

    npm install --save-dev prettier

  2. 설정 파일 생성:

    1

    echo {} > .prettierrc.json

  3. 무시할 파일 설정:

    1
2
3
4
5

    // .prettierignore
node_modules
dist
build
coverage

효과적으로 사용하기 위한 실용적인 팁

  1. ESLint와의 통합

    1

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

    이를 통해 ESLint와 Prettier 간의 충돌을 방지할 수 있습니다.

  2. Git Hooks 설정
    husky와 lint-staged를 사용하여 커밋 전 자동 포매팅을 설정할 수 있다:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10

    {
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx,json,css,md}": ["prettier --write"]
  }
}

  3. VS Code 설정 최적화

    1
2
3
4

    {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

설정 예시

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

// .prettierrc 설정 파일 예시
{
  "printWidth": 80,           // 한 줄의 최대 길이
  "tabWidth": 2,             // 탭 간격 크기
  "useTabs": false,          // 탭 대신 스페이스 사용
  "semi": true,              // 세미콜론 사용
  "singleQuote": true,       // 작은따옴표 사용
  "trailingComma": "es5",    // 후행 쉼표 사용 방식
  "bracketSpacing": true,    // 객체 리터럴의 중괄호 내부 공백
  "bracketSameLine": false,  // JSX 요소의 > 위치
  "arrowParens": "always",   // 화살표 함수 괄호 사용
  "proseWrap": "preserve",   // 마크다운 텍스트 줄바꿈 방식
  "endOfLine": "lf"          // 줄 끝 문자 스타일
}

// package.json 스크립트 예시
{
  "scripts": {
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
    "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,md}\""
  }
}

// 포매팅 전 코드 예시
function myFunction(   a,b   ){
const result=a+b;
if(result>10){
return {
  success:true,
  data:result
}
}else{
  return {success:false,data:null}
}}

// Prettier로 포매팅 후 코드
function myFunction(a, b) {
  const result = a + b;
  if (result > 10) {
    return {
      success: true,
      data: result,
    };
  } else {
    return { success: false, data: null };
  }
}

참고 및 출처

Prettier · Opinionated Code Formatter