VSCode에서 파일을 저장할 때 Prettier를 실행하는 방법
소개
macOS를 새로 사서 VsCode를 다시 설치했을 때 파일을 저장할 때 Prettier를 실행하는 설정 방법을 잊어버려 반나절 이상 녹았다.
구그라고 보았지만 체계적으로 정리된 정보가 없어 좀처럼 시간을 녹였기 때문에
처음으로라도, 이 기사를 보면 「VSCode 유저라면 누구라도 파일 보존시에 Prettier를 달릴 수 있다」 처럼 언제부터 정중하게 기사를 썼다.
대상 독자
목차
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와의 차이를 이해하고 병용한다~
Reference
이 문제에 관하여(VSCode에서 파일을 저장할 때 Prettier를 실행하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/k_kazukiiiiii/items/335338b3c63c28a0182c
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
먼저 VSCode 설정 화면을 엽니다.
열려면 화면 왼쪽 하단의

덧붙여서 바로 가기 키를 사용하면 한 번에 열 수 있으므로 참고까지
(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와의 차이를 이해하고 병용한다~
Reference
이 문제에 관하여(VSCode에서 파일을 저장할 때 Prettier를 실행하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/k_kazukiiiiii/items/335338b3c63c28a0182c
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
이것을하지 않으면 설정이 반영되지 않기 때문에주의!
command+shift+P로 명령 팔레트를 엽니다.
"Reload Window"를 클릭하여 화면을 다시로드합니다.
(windows의 경우 "ctrl + shift + P"로 명령 팔레트를 엽니 다)
요약
이제 파일을 저장할 때 Prettier가 실행됩니다. Just do it!
참고문헌
Vscode에서 파일을 저장할 때 Prettier를 실행합니다.
기본 성형 도구에 Prettier 사용
Prettier 입문 ~ESLint와의 차이를 이해하고 병용한다~
Reference
이 문제에 관하여(VSCode에서 파일을 저장할 때 Prettier를 실행하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/k_kazukiiiiii/items/335338b3c63c28a0182c
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Vscode에서 파일을 저장할 때 Prettier를 실행합니다.
기본 성형 도구에 Prettier 사용
Prettier 입문 ~ESLint와의 차이를 이해하고 병용한다~
Reference
이 문제에 관하여(VSCode에서 파일을 저장할 때 Prettier를 실행하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/k_kazukiiiiii/items/335338b3c63c28a0182c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)