vscode 자동 코드 정렬 줄맞춤 윈도우 mac Linux 단축키 방법

vscode 자동 정렬(Code Formatting, Prettier) 목차.

• 1. vscode 자동 정렬 단축키 방법.
• 2. vscode 우클릭 자동정렬 방법.

 

vscode에서 코딩을 작성할 때나 다른 곳에서 코드를 복사 붙여 넣기 하는 경우 들여 쓰기나 띄어쓰기가 맞지 않아 하나씩 코드를 정렬하는 경우가 있습니다. 하나씩 수정하는 것도 어렵고 동작하는 데 있어서 문제는 없기에 정렬을 안 하는 경우도 종종 있습니다. 하지만 깔끔한 코딩을 위해서 정렬하는 습관을 들이는 것은 중요한 듯합니다. 오늘은 Visual Studio Code (vscode)상에서 코드를 자동으로 정렬하는 방법을 알아보도록 하겠습니다.

 

1. vscode 자동 정렬 단축키 방법.

vscode 정렬 이전 보일러플레이트 코드.

일단 예시를 위해서 정렬이 안된 보일러플레이트 코드를 vscode에 복사 붙여넣기 해보았습니다. 위 화면도 어느 정도 정렬이 되어 있긴 하지만 완벽하게 정렬이 되어 있지 않은 화면입니다. vscode에서는 운영체제(OS)마다 코드를 자동으로 정렬하는 단축키가 다릅니다.

 

윈도우: Shift + Alt + F

MAC: Shift + Option + F

Linux: Ctrl + Shift + I

vscode 단축키 자동정렬 보일러플레이트 코드.

자동정렬 단축키를 누르면 위 화면처럼 코드들이 자동으로 정렬된 것을 확인해볼 수 있습니다. 다음으로는 우클릭을 통해서 자동정렬 하는 방법을 알아보도록 하겠습니다.

 

2. vscode 자동정렬 우클릭 방법.

vscode 우클릭 자동정렬 문서서식 목록 화면.

정렬 되지 않은 코드 상에서 마우스 우클릭을 한 이후 vscode 한글버전에서는 문서서식 목록을 클릭해주고 영어 버전의 경우에는 Format Document를 클릭해주면 자동정렬이 이루어집니다.

vscode 자동정렬 완성 보일러플레이트 코드.

html 위 아래로 띄어쓰기가 되어 있고 head와 body 부분이 깔끔하게 정렬되어 있는 모습을 확인해 볼 수 있습니다.