[VSCode] 저장하면 들여쓰기,자동정렬,세미콜론 등 자동으로 맞춰주는 설정

유튜브를 보거나 누군가 개발하는 것을 보면 저장함과 동시에 자동정렬이 되는 모습을 본적이 있을 것입니다.

이쁘게 정렬된 코드를 보면 남이 쓴 코드라도 가독성이 높아지며 생산성이 높아지고 오류를 빨리 찾을 수 있게 됩니다.

 

개발하면서 가장 필요한 세팅 중 하나라고 생각하는데요. 이런 세팅을 하지 않고 개발을 진행하고 있다면 지금당장 설정해보세요.

 

vscode에선 prettier를 이용해 코드스타일을 통일할 수 있습니다.

Prettier · Opinionated Code Formatter

prettier란 파일을 저장할때마다, 코드를 사용자가 원하는 형식으로 모양을 예쁘게 만들어주는 Node.js 패키지입니다.

 

적용방법

vscode Extentions로 들어가주고 Prettier를 설치해줍니다.

 

vscode settings에 접근해야하는데요.

• macOS : ⌘ + ,
• Windows : Ctrl + ,
• Linux : Ctrl + ,

위 단축키를 이용하면 간단히 접근할 수 있고 

 

file -> Perferences -> Settings로도 이동할 수 있습니다.

 

 

settings로 이동하셨다면 위 사진에서 보는 것처럼 빨간색 상자 안에 있는 아이콘을 클릭해줍니다.

 

 

settings.json파일이 보일텐데요.

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

위 코드를 작성하면 prettier설정이 적용됩니다.

 

"editor.formatOnSave": true : save를 하면 코드형식이 맞춰진다.

"editor.defaultFormatter": "esbenp.prettier-vscode" : 기본설정에서 설정한 prettier설정을 사용한다.

 

 

perttier기본설정을 위해 settings에서 perttier를 검색해줍니다.

 

제가 수정한 것은 tab size, printwidth, semi입니다.

 

 

설정을 마쳤습니다. 이제 우리가 작성했던 기존코드로 간 후 저장하면 prettier설정이 적용됩니다.

 

 

 

파일이름 옆에 하얀색 동그라미가 지워졌다는 것은 저장이 됐다는 의미인데요.

어떤가요? 위에코드보다 아래코드가 훨씬 보기 쉽지 않나요?