VS Code Prettier 설정하는 법

vscode에는 단축키 Alt + Shift + f 로 정렬 하는 법이 있지만, 플러그인을 이용해서 자동으로 정렬하는 방법도 있답니다✏️

먼저 vscode에서 Prettier를 검색한 후 다운 받아 줍니다.

하지만, 다운을 받고 바로 적용이 되지 않는 경우가 있는데 이때, Settings에서 설정을 바꿔줘야 합니다.

설정에서 editor format on save를 검색 한 뒤 Editor: Format On Save 를 체크 해 줍니다🪄

체크 하신 뒤에서 적용이 되지 않았다면 

f1을 눌러서 json을 치거나 설정창에 json을 검색한 후 json탭에서 settings.json으로 들어 가줍니다.

json에서 "editor.formatOnSave" 가 false로 되어있다면 true로 바꿔주면 작동을 합니다🐣

 

+) true로 바꿔도 동작하지 않아요😥

위의 소스를 "editor.formatOnSave" 가 위치한  json설정에 붙여 넣어주시면 된답니다👻

"editor.defaultFormatter": "esbenp.prettier-vscode",

"[typescriptreact]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

},

"[typescript]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

},

 

++)덤

Tab간격을 바꾸고 싶다!

Prettier의 Tab간격은 기본 2로 설정이 되어 있는데 이것을 바꿀 수도 있답니다.

Prettier에서 톱니바퀴 모양을 클릭한 후 Extension Settings를 선택합니다.

쭈욱 내려 보시면 Tab 간격을 설정하는 곳이 있습니다.

여기서 원하시는 간격을 설정하시면 된답니다~