Visual Studio Code에서 들여쓰기(Indentation) 설정 방법

Visual Studio Code에서 들여쓰기 간격을 설정하는 방법을 알아보도록 하겠습니다.(VS Code 1.40.2 기준)

업무상 여러 종류의 개발 언어를 다루다 보니 개발 언어에 특화된 개발 툴의 사용법을 익히기에도 어려운 상황인지라 Visual Studio Code를 주로 사용하고 있습니다. 현재 개발중인 Vue.js 프로젝트에서는 Indentaion 간격을 2로 맞추어 진행하기 때문에 Tab 간격을 공백을 기준으로 2개의 스페이스로 사용하도록 구성해 보도록 해요.

에디터 창에서 탭 간격 바로 설정하기(탭 간격 4 -> 2로 변경)

• 에디터 창의 하단에 있는 Space: 4 부분을 클릭

에디트 창의 하단바

• 액션 선택(Select Action) 메뉴에서 Indent Using Spaces를 선택
• 탭 간격을 공백이 아닌 실제 탭(\t)으로 설정하기 위해서는 Indent Using Tabs를 선택

Select Action 메뉴

• 바꾸기를 원하는 Tab 간격 크기를 지정한다. 현재 설정 값(Configured Tab Size)인 4에서 2로 변경

Tab 간격 설정

• 탭 간격이 2로 변경된 것을 확인할 수 있지만 실제 코드에 바로 반영이 되지는 않습니다. 

변경된 Tab Spaces

• 코드에 새로 설정된 Tab 크기의 Indentation 적용을 위해서는 코드를 전체 선택 후에 Format Document(Shift+Alt+F)를 수행합니다.

Tab 반영을 위한 Format Document

• 아래와 같이 탭 간격이 바뀐 것을 확인 할 수 있습니다.

변경된 Tab Indentation

 

설정(Settings) 창에서 탭 간격 설정하기 

• 설정 화면으로 이동(단축키 Ctrl+, 또는 Cmd + ,)

Settings 메뉴

• 설정(Settings) 화면에서 Editor Tab을 입력

Settings 화면

• Editor: Detect Indentation은 파일을 열었을때 자동으로 들여쓰기 간격을 찾도록 해주는 설정입니다. 체크를 해제합니다.
• Editor: Insert Spaces는 탭 간격을 Space로 처리하도록 하는 설정입니다. 호환성을 위하여 체크를 유지하도록 합니다.
• Editor: Tab Size는 실제로 사용할 탭 간격을 설정합니다. 2를 입력합니다.

Settings 화면의 Tab 관련 설정

• 설정 창을 닫고 코드 에디터로 돌아가면 탭 간격이 변경된 것을 확인할 수 있습니다.

변경된 Tab Spaces

• 하지만 코드에 바로 반영이 안되니 전체 선택 후에 코드 전체 선택(Ctrl +A) 후 마우스 오른쪽 팝업 메뉴에서 Format Document(Shift+Alt+F)를 선택합니다.

Tab 반영을 위한 Format Document

• 코드의 탭 간격이 바뀐 것을 확인 할 수 있습니다. 

변경된 Tab Indentation

• 설정 값을 그대로 유지한다면 다음부터 여는 파일들의 기본 탭 간격은 설정 화면에서 설정한 Tab Size 간격을 기본값으로 사용하게 됩니다.