[VSCode] EditorConfig - 확장자 별 tab size (Indentation) 설정하기

코드의 가독성과 일관성 유지를 위해 표준화된 Code Style과 Rule에 따라 코드를 작성하는 것이 중요하다.

그중 Indentation Rule (들여쓰기 규칙)을 Visual Studio Code에서 File Format 별로 설정하는 방법을 알아보자.

 

Google HTML/CSS Style Guide와 JavaScript Standard Style에 따라 .html, .css, .js의 경우 하나의 tab을 2 spaces로 설정하고, 나머지 파일에 대해서는 default인 4 spaces로 유지한다.

Google HTML/CSS Style Guide

JavaScript Standard Style

 

EditorConfig for VS Code

1. Default Setting

1.1 Preferences > Settings (⌘ + ,)에서 Text Editor > Tab Size를 4로 설정

 

1.2 Preferences > Settings (⌘ + ,)에서 Text Editor > Detect Indentation 체크

 

2. VS Code Extension : EditorConfig for VS Code 설치

2.1 Installation

 

2.2 폴더 우클릭 후 Generate .editorconfig

 

2.3 .editorconfig 파일 수정

.html .css .js 파일의 경우 indent_size = 2로 설정

[*.{html, css, js}]
indent_size = 2

Supported Properties (https://editorconfig.org/#supported-properties)

Properties	Comment
indent_style	tab 또는 space 설정
indent_size	들여쓰기 수준에 사용되는 너비의 size 설정
end_of_line	개행 표시 방법 제어 (lf, cr, crlf)
charset	인코딩 설정
trim_trailing_whitespace	newline 앞의 공백 문자를 제거하려면 true로 그렇지 않으면 false로 설정
insert_final_newline	저장 시 파일 마지막 line을 줄바꿈 처리 하려면 true로 그렇지 않으면 false로 설정

 

.html 파일은 2 spaces로 .java 파일은 4 spaces로 설정된 것을 확인할 수 있다.

.html

.java