VSC가 자꾸 말썽이라 이거 고치는데만 시간을 30%는 쓰는 것 같다. 구글링해서 고치고 나면 나중에 또 같은 문제로 말썽인데 고친 방법을 기억을 못해서 또다시 구글링하고... 덕분에 기록의 중요성을 깨닫고 있다.

그래서 이번 포스트는 VSC 들여쓰기 간격 설정하는 법에 할애하려 한다.

• 기본 VSC 들여쓰기 간격 설정하는 법
• 뒤늦게 설정을 바꿨을시, 기존파일에도 바뀐 설정 적용하는 법
• Prettier 사용시 들여쓰기 간격 설정하는 법

Solution

# 기본 들여쓰기 간격 설정하는 법

우선 기본적으로 VSC 들여쓰기

1. Setting 창에 들어간다.
   File > Preferences > Settings / 좌측 상단 기어 버튼 > Settings / Ctrl + ,

2. Indentation을 검색한다. Insert Spaces를 체크하고, 원하는 탭 사이즈를 Tab size 칸에 적는다. 한 번의 탭과 동일시될 띄어쓰기, 즉 스페이스 수를 설정하는 것이다.
   

끝! 에디터 창에 들어가 확인해 보면 자동 들여쓰기가 4칸의 스페이스로 되어있는 것을 확인할 수 있다.

# 뒤늦게 설정을 바꿨을시, 기존파일에도 바뀐 설정 적용하는 법

위의 내용처럼 설정을 바꿨는데도 적용이 안돼요!
위의 방법은 새로 작성하기 시작한 파일에만 적용이 된다. 기존 파일들의 경우 그 파일을 작성할 때 적용한 들여쓰기 간격을 VSC가 자동으로 알아내 그 간격을 기본값으로 적용한다. 그렇다면 어떻게 해야할까?

1. 다시 세팅창으로 들어가 indentation을 검색해준다.

2. Detect Indentation 설정을 해제해준다. 이 설정은 기존 파일을 열 때 Tab Size나 insert Spaces를 자동으로 감지해 그것을 기본값으로 설정하는 기능인데, 그렇기에 기본파일의 설정을 바꾸고 싶다면 이 기능을 꼭 해제해 줘야 하는 것이다. 해제한 후 에디터로 가 코드를 입력해보면 자동 들여쓰기 4칸이 적용된다.
   

3. 그렇다면 끝일까? 아니다. 같은 파일에 앞으로 작성할 코드들에 대해서는 들여쓰기 4칸이 적용되겠지만 이미 작성한 코드들은 여전히 기존의 간격 그대로일 것이다. 그렇다면 어떻게 해야할까?
   커서를 텍스트 에디터에 두고 Format Document, 즉 포맷팅 단축키인 Shift+Alt+P 키를 눌러준다. 에디터 창에서 마우스 오른쪽 버튼을 눌러 팝업 메뉴에서 선택할 수도 있다.

Ta-da! 기존 텍스트에 역시 간격이 적용된 것을 확인할 수 있다. 만약 아직 해결이 되지 않았다면?

# Prettier 사용시 들여쓰기 간격 설정하는 법

별도의 코드 에디터 익스텐션을 사용하고 있다면 그것이 문제의 근원일 수도 있다. 나 같은 경우에는 prettier이 VSC 설정을 막고 있는 것이 문제였다. 포맷팅을 해도 아무 일도 일어나지 않고 4칸 스페이스가 적용된 태그를 작성해도 저장을 하고 나면 prettier이 자동적으로 2칸 스페이스로 간격을 바꿔놓았다. 해결법은 의외로 간단했는데,

• 다시 Settings 창으로 가서 prettier을 검색 후 스크롤을 쭉 내려 Tab Width를 VSC Tap Size에 설정한 값으로 변경해 주세요.
  
• 그럼 이렇게 눈이 편안한 코드로 제대로 포맷팅된다.