VSCode에서 파일을 저장할 때 Prettier를 실행하는 방법
소개
macOS를 새로 사서 VsCode를 다시 설치했을 때 파일을 저장할 때 Prettier를 실행하는 설정 방법을 잊어버려 반나절 이상 녹았다.
구그라고 보았지만 체계적으로 정리된 정보가 없어 좀처럼 시간을 녹였기 때문에
처음으로라도, 이 기사를 보면 「VSCode 유저라면 누구라도 파일 보존시에 Prettier를 달릴 수 있다」 처럼 언제부터 정중하게 기사를 썼다.
대상 독자
목차
1. Prettier를 VSCode에 설치
VSCode에서 설치하는 방법과 브라우저에서 설치하는 방법이 있다.
VSCode를 시작하고 Prettier -Code formatter의 확장 탭이 표시되면 설치 버튼을 클릭합니다. 이제 Prettier가 활성화됩니다.
VSCode가 아닌 다음 링크에서 "install"버튼을 클릭 할 수 있습니다.
Prettier
아래 그림과 같이 VSCode가 설치된 곳에 있으면 OK.
![](https://s1.md5.ltd/image/23d9b4af0fc0bae8edac123d3fce6fe6.png)
2. defaultFormatter 설정 변경
먼저 VSCode 설정 화면을 엽니다.
열려면 화면 왼쪽 하단의
아이콘에서 'Settings'를 선택하면 됩니다.
덧붙여서 바로 가기 키를 사용하면 한 번에 열 수 있으므로 참고까지
(macOS의 경우 : "command +,"windows의 경우 : "ctrl +,")
![](https://s1.md5.ltd/image/2390a55a34aca1dd0451e1d4701ca45a.png)
그런 다음 'defaultformatter'로 검색
![](https://s1.md5.ltd/image/d04cb912288381712b9f0e57a1639ebb.png)
마지막으로 "Default Formatter"를 "null"에서 "esbenp.prettier-vscode"로 변경
![](https://s1.md5.ltd/image/a109970f64fdd5e9abc77a34912f6975.png)
3. Format On Save에 체크를 넣는다
VSCode 설정 화면을 열고 "save"로 검색
![](https://s1.md5.ltd/image/ad370340d785d0677ff63493fa375077.png)
다음에 「Format On Save」에 체크 마크를 넣는다
![](https://s1.md5.ltd/image/64ae21997a7f875258e11274c7f5b71c.png)
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 설정 화면을 엽니다.
열려면 화면 왼쪽 하단의
![:gear:](https://s1.md5.ltd/image/e4c20bb5547cd727b13ac08c3e54b91c.png)
덧붙여서 바로 가기 키를 사용하면 한 번에 열 수 있으므로 참고까지
(macOS의 경우 : "command +,"windows의 경우 : "ctrl +,")
![](https://s1.md5.ltd/image/2390a55a34aca1dd0451e1d4701ca45a.png)
그런 다음 'defaultformatter'로 검색
![](https://s1.md5.ltd/image/d04cb912288381712b9f0e57a1639ebb.png)
마지막으로 "Default Formatter"를 "null"에서 "esbenp.prettier-vscode"로 변경
![](https://s1.md5.ltd/image/a109970f64fdd5e9abc77a34912f6975.png)
3. Format On Save에 체크를 넣는다
VSCode 설정 화면을 열고 "save"로 검색
![](https://s1.md5.ltd/image/ad370340d785d0677ff63493fa375077.png)
다음에 「Format On Save」에 체크 마크를 넣는다
![](https://s1.md5.ltd/image/64ae21997a7f875258e11274c7f5b71c.png)
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.)