방구석 정보통 : VScode Prettier 사용하기

VScode 확장프로그램 Prettier

Prettier는 문서를 저장할 때, 코드의 정렬을 자동으로 맞춰주는 VScode 확장프로그램입니다.

1. Prettier 설치하기

Extensions 탭에서 Prettier를 검색하여 install 합니다.

2. 옵션 셋팅 하기

Manage > Settings(단축키: Ctrl+,) 탭에서 editor: format on save를 검색하여 체크합니다.
이제 'Ctrl+S'로 정렬을 맞춰봅시다! 작동이 안되시나요? 그렇다면 3번으로 ⇩

3. json 셋팅 하기

F1을 눌러 나온 검색 탭에서 json을 검색하여 open user setting 문서를 열어봅니다.
"editor.formatOnSave": 의 설정이 true인지 확인합니다. 아니라면 true로 바꿔줍니다.
이제 'Ctrl+S'로 정렬을 맞춰봅시다! 아직도 작동이 안되시나요? 그렇다면 4번으로 ⇩

4. json 셋팅 추가하기

F1을 눌러 나온 검색 탭에서 json을 검색하여 open user setting 문서를 열어봅니다.
"prettier.tabwidth": 4 와 "editor.formatOnSave": true의 사이에 아래의 코드를 붙여넣어 줍니다.
이제 'Ctrl+S'로 정렬을 맞춰봅시다!

"editor.defaultFormatter": "esbenp.prettier-vscode",
"[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}