프로그래밍 소프트웨어 정보

[VS Code] prettier 설정법

programmer-coldbrew 2024. 12. 29. 19:20

1. Prettier 확장 설치 확인

  • VSCode의 확장 마켓플레이스에서 Prettier - Code formatter가 설치되어 있는지 확인하세요.
  • 설치되지 않았다면 설치 후 다시 시도합니다.

 

2. 기본 포맷터 설정

Prettier를 기본 포맷터로 설정하지 않으면 적용되지 않을 수 있습니다.

  1. VSCode 설정(Window: Ctrl + , MAC: Commed + ,) 열기.
  2. Settings 검색창에 default formatter 입력.
  3. Editor: Default Formatter 항목에서 Prettier를 선택.

3. 자동 저장 시 포맷팅 설정

저장 시 자동으로 포맷팅하도록 설정하려면 다음을 확인합니다.

  1. VSCode 설정 열기.
  2. Settings 검색창에 format on save 입력.
  3. Editor: Format On Save 옵션을 활성화.

 

++ 적용되지 않을때

prettier를 적용하고자 하는 파일에 문법적 오류가 발생했을 경우 저장을 해도 자동 적용이 안될 수 있습니다. 

오류 확인 후 재확인을 해야 합니다.

// 가능
console.log("Hello World!!!@!@!")
;

console.log
("Hello World!!!@!@!")
;



// 불가능
console.log("Hello
    World!!!@!@!");