[vscode] 탭 간격 영구 설정, 공백 표시, 탭키 공백으로 인식 해제 방법

[vscode] 탭 간격 영구 설정, 공백 표시, 탭키 공백으로 인식 해제 방법

이번 시간에는 모르면 진짜 개~~~~~빡치지만 설정해놓으면 아주아주 편안한 탭 간격 영구설정하는 방법 및 탭키를 스페이스로 인식하지 않게 하는 방법에 대해 알아보고자 한다.

---

반응형

 

1. 문제 정의

1) 하기와 같이 탭 간격(Tab Size)를 2 → 4로 변경하였으나, vscode를 껐다가 다시 키면 원래 설정한 값으로 돌아가는 문제가 발생하였다.

 

 

 2) 하기와 같이 탭키를 누르니까 원하는 간격대로 이동하지만 탭 하나당 4개 공백(Space)으로 인식하여 탭을 지우려면 Delete 키를 4번이나 눌러야 했다. 너무 불편했다.

 

 3) ICD 문서 등 예쁘게 포맷을 짜야할 때, 아래와 같이 도대체 이게 공백이 몇개 들어간 것인지 알 방법이 없어서 커서를 맨 앞으로 놔두고 화살표키로 움직여가면서 공백 수를 세었었다. 공백 수 및 탭 개수를 바로 보여주는 옵션이 있으면 좋겠다고 생각했다.

 

반응형

 

---

2. 탭간격(Tab Size) 영구 변경 방법

 

 1) Ctrl + Shift + P 입력 후 'user setting' 입력

 

 

 

 2) 'tab size' 검색 후 원하는 탭간격 입력

 - 리눅스의 vim 에디터와 호환되는 것은 탭간격 8이고, CSS&HTML은 2를 추천한다. 기본적으로 많이 사용하는 간격은 4이다.

 

 

 

 3) 'Detect Indentation' 검색 후 체크를 해제

반응형

 

 

---

3. 탭키를 공백으로 인식하지 않도록 설정하는 방법

 

 1) 'editor insert space' 검색 후 "Editor: Insert Spaces" 체크를 해제

 

체크를 해제하고 탭을 해보니 아래와 같이 ----(공백)이 아닌 →(탭)으로 보이고 Delete 한번으로도 탭이 지워지는 것을 확인할 수 있다.

 

 

반응형

 

---

4. 공백 표시 & 탭 표시 옵션 설정

 

 1) 'render whitespace' 입력 후 옵션값 boundary로 변경

 

옵션값을 boundary로 변경하고 나니 아래와 같이 공백의 개수가 표시된다.

 

반응형