소개

macOS를 새로 사서 VsCode를 다시 설치했을 때 파일을 저장할 때 Prettier를 실행하는 설정 방법을 잊어버려 반나절 이상 녹았다.

구그라고 보았지만 체계적으로 정리된 정보가 없어 좀처럼 시간을 녹였기 때문에

처음으로라도, 이 기사를 보면 「VSCode 유저라면 누구라도 파일 보존시에 Prettier를 달릴 수 있다」 처럼 언제부터 정중하게 기사를 썼다.

대상 독자

VSCode 사용자

파일을 저장할 때 Prettier가 실행되지 않는 사람

목차

Prettier를 VSCode에 설치

defaultFormatter 설정 변경

Format On Save에 체크 표시

Settings 및 Plugin을 반영시키기 위해 일단 화면을 Reload한다

1. Prettier를 VSCode에 설치

VSCode에서 설치하는 방법과 브라우저에서 설치하는 방법이 있다.

VSCode를 시작하고 Prettier -Code formatter의 확장 탭이 표시되면 설치 버튼을 클릭합니다. 이제 Prettier가 활성화됩니다.

VSCode가 아닌 다음 링크에서 "install"버튼을 클릭 할 수 있습니다.
Prettier

아래 그림과 같이 VSCode가 설치된 곳에 있으면 OK.

2. defaultFormatter 설정 변경

먼저 VSCode 설정 화면을 엽니다.

열려면 화면 왼쪽 하단의 아이콘에서 'Settings'를 선택하면 됩니다.

덧붙여서 바로 가기 키를 사용하면 한 번에 열 수 있으므로 참고까지
(macOS의 경우 : "command +,"windows의 경우 : "ctrl +,")


그런 다음 'defaultformatter'로 검색


마지막으로 "Default Formatter"를 "null"에서 "esbenp.prettier-vscode"로 변경

3. Format On Save에 체크를 넣는다

VSCode 설정 화면을 열고 "save"로 검색


다음에 「Format On Save」에 체크 마크를 넣는다

4 Settings 및 Plugin을 반영시키기 위해 일단 화면을 Reload한다

이것을하지 않으면 설정이 반영되지 않기 때문에주의!

command+shift+P로 명령 팔레트를 엽니다.
"Reload Window"를 클릭하여 화면을 다시로드합니다.

(windows의 경우 "ctrl + shift + P"로 명령 팔레트를 엽니 다)

요약

이제 파일을 저장할 때 Prettier가 실행됩니다. Just do it!

참고문헌

Vscode에서 파일을 저장할 때 Prettier를 실행합니다.
기본 성형 도구에 Prettier 사용
Prettier 입문 ～ESLint와의 차이를 이해하고 병용한다～