Prettier 설치 방법

Prettier
Prettier는 코드 포맷터로 우리가 작성한 코드를 가독성 좋게 만들어주는 확장 도구
이 도구를 사용하면 여러 개발자들의 코드 스타일을 통일하여 균일한 코드 품질을 가질 수 있게 만들 수 있다.

 

 

1.프리티어 설치

yarn add --dev prettier

 

2. ".prettierrc" 파일 생성

 

3. prettierrc 파일에 아래와 같이 설정 추가

{
  "arrowParens": "always",
  "bracketSameLine": false,
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxSingleQuote": true,
  "printWidth": 80,
  "proseWrap": "always",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleAttributePerLine": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": false
}

 

4. yarn prettier --check 와 yarn prettier --write 명령어로 코드 스타일을 자동으로 정리

 

 

🔍 yarn prettier --check

• 역할: 코드가 Prettier의 스타일 규칙에 맞는지 확인만 합니다.
• 결과: 규칙에 맞지 않는 파일이 있으면 경고를 출력하고, 종료 코드는 1로 반환합니다.
• 사용 목적: CI/CD 파이프라인이나 PR에서 코드 스타일을 검증할 때 유용합니다.

🔍 yarn prettier --write

• 역할: 코드 파일을 Prettier 스타일대로 자동으로 수정합니다.
• 결과: 규칙에 어긋나는 부분을 고쳐서 파일을 덮어씁니다.
• 사용 목적: 코드 포맷팅을 자동화하려는 경우 사용합니다

 

아래처럼 설정해두면 ctrl+s 로 저장 시 자동으로 코드 정렬된다.