logo

비주얼 스튜디오 코드가 좋은 평가를 받는 것은 탁월한 코드 편집 기능과 언어 지원 외에 풍부한 확장 문화가 있다. 확장 기능 덕분에 비주얼 스튜디오 코드에서 편집 외의 다양한 보조적인 작업도 할 수 있다. 편집기를 더 빠르게 탐색하기 위한 확장부터 자리 표시자 텍스트 및 이미지를 편하게 삽입하는 것까지 온갖 종류의 VS 코드 확장이 존재한다. 

여기서는 많은 사람이 개발 환경을 구성할 때 놓쳤을 수도 있는 8가지 VS 코드 확장을 소개한다. 이 중에서 매우 유용한 확장, 일상적인 워크플로우에 넣을 만한 확장을 찾을 수 있을 것이다. 
 

대시보드

크롬과 파이어폭스 사용자라면 빈 탭을 열 때 기본적으로 표시되는 '바로가기' 메뉴에 익숙하다. 대시보드(Dashboard) 확장은 VS 코드에서 이와 비슷한 기능을 한다. 즉, 가장 자주 찾는 프로젝트나 작업 공간에 신속하게 접근할 수 있다. 프로젝트를 자유롭게 추가, 편집, 제거하거나 순서를 바꿀 수 있고 색, 그라데이션 또는 이모지를 사용해 프로젝트 버튼을 구분할 수 있다. 프로젝트가 깃(Git) 리포지토리에 속하는 경우 대시보드에서 아이콘으로 표시된다. 
 일반적으로 사용되는 프로젝트를 대시보드의 런처 페이지에 고정하고 맞춤 그룹에 배치하고 색을 지정할 수 있다. ⓒ IDG 

데이터 프리뷰

비주얼 스튜디오 코드는 코드 작성 및 실행 외에 데이터 준비 및 데이터 랭글링을 위한 환경으로도 사용할 수 있다. 그러나 단순한 파일을 제외한, 조금이라도 복잡한 요소를 다루는 경우 데이터 형식을 위한 내장 파일 처리기가 부족하다고 느껴질 것이다.
 데이터 프리뷰를 사용하면 CSV와 같은 많은 일반적인 형식의 데이터를 인터랙티브하게 확인하고 조작할 수 있다. ⓒ IDG
이 때 쓸 수 있는 것이 데이터 프리뷰(Data Preview)다. JSON 또는 CSV 외에 엑셀, 아파치 애로우, 아브로, YAML 및 기타 구성 파일도 지원하므로 다양한 일반적인 형식을 위한 처리기, 시각화 툴, 관리 기능으로 손색이 없다. 아파치 파케이(Parquet)도 앞으로 지원할 예정이다. 데이터 프리뷰는 웹어셈블리로 작성된 스트리밍 데이터 분석 라이브러리를 사용해 10MB 이상 큰 파일을 이용한 무거운 작업도 매끄럽게 처리한다.
 

플레이스홀더 이미지

프로젝트에 자리 표시자 이미지가 필요한 경우가 있다. 웹 개발, UI 목업 또는 문서화에서는 일반적으로 필요하다. 이 때는 플레이스홀더 이미지(Placeholder Images)가 딱이다. 이 VC 코드 확장을 사용하면 언스플래시(Unsplash)와 같은 스톡 이미지 서비스를 포함한 여러 인기 있는 무료 이미지 제공업체의 이미지를 HTML 레퍼런스로 삽입할 수 있다. 이미지를 선택하려면 타겟 크기만 제공하면 된다. 그러면 해당 업체에서 잘 맞는 이미지가 선택된다. 
 플레이스홀더 이미지는 무료로 제공되는 이미지 소스를 활용해 HTML 레퍼런스로 자리 표시자 이미지를 삽입하거나 이미지 URL을 클립보드에 복사한다. ⓒ IDG 

VS코드 페이커

가짜 주소 표시줄, 가짜 전화번호 또는 짤막한 lorem ipsum 문구 등 간단한 자리 표시자 텍스트가 필요할 때가 종종 있다. HTML 템플릿 예제를 만들 때, 스크린샷이나 구성 파일에서 가짜 데이터와 라이브 데이터를 뒤바꾸는 경우 등이다. 이때 VS코드 페이커(VSCode Faker)는 모든 종류의 가짜 데이터를 빠르게 생성한다. 로케일 ID만 있다면 특정 로케일의 가짜 데이터를 생성하도록 설정할 수도 있다.
 VS코드 페이커로 생성한 “Lorem insum” 텍스트. VS코드 페이커는 단일 문장부터 단락에 이르기까지 가짜 텍스트를 생성한다. ⓒ IDG 

워드카운터

워드카운터(WordCounter) 확장은 단어 수와 읽기 시간은 블로그 게시글과 뉴스 기사에서 매우 유용한데, 다른 곳에서도 마찬가지로 유용하지 않을까 라는 생각에서 출발했다. README를 읽는 데 시간이 얼마나 걸릴지를 대략적으로 알거나, 지금 작성 중인 문서에 대한 “간략한” 서론이 정확히 얼마나 간략한지 알 수 있다면 좋겠다는 생각이다. 이 확장은 VS 코드 상태 표시줄에 단어, 문자, 줄, 단락, 읽기 시간을 표시한다. 정보가 매우 세부적이고 다양하게 구성할 수 있다. 예를 들어 단어 구분자를 정하는 기준이나 읽기 시간을 계산하는 데 사용되는 분당 단어 수를 변경할 수 있다.  
 워드카운터는 상태 표시줄에 세부적인 가독성 통계 및 카운트 메트릭을 더한다. 모든 측정 기준을 변경할 수 있다. ⓒ IDG 

점피

모달 편집기 애용자들은 마우스 조작 없이 두어 번의 키 입력만으로 줄, 페이지 또는 문서를 가로질러 특정 논리 지점으로 직행할 수 있다는 점을 좋아한다. 점피(Jumpy)는 키보드만으로 코드 내에서 빠르게 이동하는 기능을 추가한다. 
 줄 모드의 점피. 표시되는 2문자 코드 중 하나를 입력하면 커서가 파일의 해당 지점으로 이동한다. ⓒ IDG
점피를 활성화하면, 줄바꿈, 식의 시작 부분 등 화면에 표시되는 코드의 주요 지점에 2자로 된 코드 레이블이 붙는다. 특정 레이블로 이동하려면 이 2문자 코드만 입력하면 된다. 코드에 사용되는 기호를 맞춤 설정할 수도 있고 A~Z, 0~9의 기본값을 사용할 수도 있다. 기본적으로 점피에는 키바인딩이 없으므로 키바인딩을 사용하려면 직접 설정해야 한다. 이렇게 하면 다른 확장과의 충돌을 방지하는 데 도움이 된다. 
 

토글

VS 코드의 설정은 미로처럼 복잡하다. 같은 설정을 상황에 따라 켜거나 끄기 위해 반복적으로 찾아야 할 때 이 복잡함을 더 체감할 수 있다. 이럴 때 펭 Lv(Peng Lv)의 토글(Toggle) 확장은 VS 코드 설정에 키바인딩을 할당할 수 있게 해준다. 키를 누르면 설정의 값을 간단히 바꿀 수 있다. 동일한 키바인딩에 여러 개의 설정을 켜고 끄도록 할당할 수도 있다. 
 토글을 사용하면 VS 코드의 설정 깊이 숨어 있는 옵션을 끄집어내 단축키로 값을 변경할 수 있다. ⓒ IDG
토글의 한 가지 단점은 키바인드 파일을 수동으로 구성해야 한다는 것이지만 그다지 어렵지는 않다. 환경설정: 키보드 바로가기 열기(JSON)(Preferences: Open Keyboard Shortcuts (JSON))를 사용해 파일을 만들거나 열고, 제공된 예를 붙여넣고 이 키바인딩 참조를 사용해 설정하면 된다. 
 

텍스트 파워 툴

VS 코드는 기본적으로 텍스트 편집기다. 여기서 “텍스트”는 프로그램 코드만이 아니라 일반 텍스트를 포함한 다양한 형식의 문서도 의미한다. 텍스트 파워 툴(Text Power Tools) 확장은 VS 코드에 기본적으로 포함되지 않는 텍스트 처리 유틸리티 기능을 더해준다. 
 VS 코드 명령 팔레트에 “tpt"를 입력하면 텍스트 파워 툴의 텍스트 선택 항목을 바꿀 수 있는 옵션이 표시된다. 여기에 나온 것보다 훨씬 더 많은 옵션이 있다. ⓒ IDG
제공되는 툴을 보면, 정규 표현식으로 파일의 줄 필터링하기, 선택한 텍스트의 대/소문자 변경 또는 바꾸기, 줄 또는 영역의 앞뒤에 텍스트 추가하기, 다양한 기준으로 텍스트 영역 정렬하기, 다양한 형식의 클립보드 데이터를 지능적으로 붙여넣기, 다양한 형식의 자리 표시자 데이터 생성하기, 선택 항목의 인코딩 변경하기, 유니코드 정규화 형식 변경하기 등이 있다. 

그 중 특히 유용한 애드온으로 “텍스트 슬롯(text slots)”이 있다. 최대 5개의 클립보드 항목을 빠르게 저장하고 재사용할 수 있다. 클립보드 유틸리티를 아직 사용하고 있지 않다면 편리한 텍스트 슬롯을 사용해 보는 것을 추천한다.
editor@itworld.co.kr