limsr12/log
← back to posts

설정-방법

prettier
  1. VS code의 Extension에서 Prettier 설치
  2. Setting 수정
  • Ctrl + , 눌러서 설정 열기
  • Editor: Default Formatter을 검색란에 입력 후 해당 설정을 Prettier로 설정
  • Editor: Format on save mode를 검색 후 체크 (파일을 저장할 때마다 자동으로 prettier 실행하도록)

  1. Prettier 설치
    npm i --save-dev prettier
    -> Prettier는 배포에 무관한 개발 관련 패키지 이기 때문에 --save-dev 옵션을 추가해서 설치한다고 함

  2. .prettierrc 파일 생성
    가장 루트 폴더에 .prettierrc 파일을 하나 생성해준다. 그리고 원하는 Prettier 옵션을 추가해서 설정해준다.</br>
    물론 vscode 내 세팅란에서 Prettier 설정을 할 수도 있지만, vscode 세팅에서 설정한 값보다 .prettierrc 파일의 적용 순위가 더 높기 때문에 기존 설정값이 무시되고 .prettierrc에서의 설정값이 적용된다고 한다.
    따라서 보통 협업할 때에도 해당 파일을 사용해서 팀 컨벤션을 적용하기도 한다고 함!

  3. .prettierignore 파일 생성하기
    .prettierignore 파일 또한 .gitignore 파일과 비슷한 역할을 한다. 말 그대로 Prettier가 적용되지 않을 파일을 설정해두는 것.

  4. Prettier 옵션 (vscode 설정)
    Prettier 옵션 정리

  5. 참고