vs code 에서 점 찍는 법 - 공백 문자(whitespace) 표시하기

왜 필요한가 싶지만, 그래도 개인적으로는 만족스러웠던... vs code 에서 점 찍는 방법을 알게 된 것의 시작은 회사 대표님께서 올린 슬랙 메세지였다.

 

 

아래는 '코딩으로 본 조선붕당의 이해' 이미지이다. 나는 원래 개발에 관심이 많은 디자이너이니 흥미롭게 보고 있었는데, 중간 부분의 사도세자 "스페이스마다 가이드 점 찍으니까 괜찮네" 부터 궁금증이 생겼다.

 

코딩으로 본 조선 붕당의 이해

(이미지는 퍼온 것으로 출처를 알수가 없다. 혹시 저작권 관련 문제가 생긴다면 바로 삭제할 예정 - 알려주세요ㅠㅠ)

 

나는 궁금한 게 생기면 참기 힘든 성격이라... 그래서 슬랙 댓글로 물어보았다.

 

 

그리고 답글...

 

 

왠지 점이 있는 게 더 예쁜 것 같아서(...???) vs code를 실행하고 아무거나 써 봤는데... 내 에디터에는 점이 찍히지 않았다. 왜 나의 vs code에는 점이 찍히지 않는거지? 어떻게 해야 점을 찍을 수 있는거지? 그리고 구글신님의 도움을 받아서 방법을 알아냈다.

 

vs code 에서 공백문자 표시하는 방법

먼저 vs 코드의 설정 메뉴에 들어간다. 들어가는 방법은 여러가지가 있는데, 아래 둘 중에 더 편한 방법을 선택하면 될 듯 하다.

 

• 모니터 상단 Code > Preferences > Settings
• 단축키는 Command + ,(쉼표)

 

• vs code 프로그램 하단 설정 아이콘 선택

 

다음으로 Vs code의 설정 화면이 열렸다면, User > Text Editor > Render Whitespace 경로로 이동한다.

 

User > Text Editor > Render Whitespace

 

Render Whitespace에는 선택할 수 있는 옵션이 몇가지 있는데, 각각 다음과 같다.

 

 

• none : 공백 표시 안 함

whitespace none 옵션

 

• boundary : 공백이 두 글자 이상일 경우에만 공백문자를 표시함

whitespace boundary 옵션

 

• selection : 드래그하여 선택된 텍스트만 공백문자를 표시함

whitespace selection 옵션

 

• trailing : 줄의 마지막 문자 뒤에 오는 모든 공백 또는 탭의 문자를 표시함(?)

whitespace trailing 옵션

 

• all : 모든 공백 문자를 표시함

whitespace all 옵션

 

나는 개인적으로 상태가 가장 마음에 드는 boundary 옵션을 선택했다. 더해서 trailing 옵션을 선택하면 얻을 수 있는 이점이 무엇인지 넘나 궁금하다. (누군가 알려주...ㅜㅜ)

 

 

아무튼! 그래서 나도 점이 찍히는 vs code 프로그램을 갖게 되었다. 나는 드디어 시파 디자이너가 되었고, 매우 뿌듯한 하루였다.