VSCode 언어별 들여쓰기(탭) 지정 - Settings.json

VSCode 탭 지정

 

코드 스타일에서 중요한 요소 중 하나는 들여쓰기 규칙입니다. 최근에는 탭 대신 공백을 사용하여 일관된 서식을 유지하는 것이 일반적인 추세입니다.

 

과거에는 문서 작성 시 기본 탭 크기를 8칸으로 설정했고, 코드에서는 깊이를 줄이기 위해 4칸 들여쓰기를 주로 사용했습니다. 그러나 탭 크기를 줄이면서 줄 맞추기 효과가 줄어들었고, 각기 다른 에디터나 사용자가 설정한 탭 크기에 따라 문서 포맷이 혼란스러워지는 문제가 발생했습니다.

 

이러한 문제를 해결하기 위해 탭 대신 공백으로 들여쓰기를 처리하는 방식이 도입되었습니다. 특히 HTML과 같이 들여쓰기가 많은 경우에는 탭 크기를 2칸으로 설정해 더 깔끔하게 표현하는 것이 일반적입니다.

---

VSCode 들여쓰기 설정

VSCode 설정 파일에는 사용자 모드와 작업 영역 모드 두 가지가 존재합니다.

이번 설정에서는 모든 VSCode 인스턴스에 공통적으로 적용하기 위해 사용자 모드로 구성합니다.

 

세팅 메뉴를 연다. (사용자와 작업 영역 중에서 사용자를 선택한다.)

Ctrl + ,

VSCode 설정 (한글)

 

설정 메뉴에서 'Detect Indentation'을 검색합니다.

이후 나타나는 결과에서 들여쓰기 관련 설정을 확인할 수 있습니다.

VSCode 설정 (영어)

 

 

• Detect Indentation: 파일의 기존 들여쓰기 설정을 자동으로 감지하여 적용하는 기능입니다.
• Tab Size: 탭의 크기를 지정합니다.
• Insert Spaces: 탭을 공백으로 변환하여 사용합니다

 

 

메뉴에서 설정할 수 있는 탭 크기는 기본 값에 해당합니다.

보다 세부적인 설정을 위해서는 가장 아래에 있는 'Edit in settings.json' 옵션을 선택하세요.

{
    // TAB SIZE
    "editor.detectIndentation": true,   // 들여쓰기 자동 감지 활성화
    "editor.tabSize": 4,                // 기본 탭 크기
    "editor.indentSize": "tabSize",     // 인덴트는 tabSize를 따른다
    "editor.insertSpaces": true,        // tab은 공백으로 채운다
    
    // 언어별 탭 사이즈
    "[html]": {
        "editor.tabSize": 2
    },    
    "[javascript]": {
      "editor.tabSize": 2
    },
    "[scss]": {
      "editor.tabSize": 2
    },    
    "[vue]": {
      "editor.tabSize": 2
    },
}

(html, javascript, scss, vue 탭 크기를 2로 설정)

 

사용자 모드에서 설정한 내용은 서버에 저장되어 손쉽게 복원할 수 있습니다.

좌측 하단의 톱니바퀴 아이콘을 클릭하고, 'Settings Sync is On'을 확인한 후 GitHub 또는 Microsoft 계정으로 로그인하여 동기화합니다.

관리 메뉴