2019.05.10

'비주얼 스튜디오 코드' 필수 확장 기능 10선

Serdar Yegulalp | InfoWorld
비주얼 스튜디오 코드(Visual Studio Code)는 단순한 텍스트 편집기가 아니다. 통합 개발 환경(IDE), 프로젝트 정리기, 데이터 워크벤치 등 수많은 역할을 한다.

이에 따라 비주얼 스튜디오 코드용 확장 프로그램도 숲처럼 계속 확장하고 있다. 이러한 숲에서 필요한 것을 베어다 어떤 작업에도 적합하게 활용할 수 있다. 훌륭한 비주얼 스튜디오 코드 확장 프로그램 10가지를 소개한다.
 
아스키독

아스키독
프로젝트 문서 작성은 아스키독(AsciiDoc)과 같은 문서 전용 구문을 활용하는 것이 좋다. 주앙 핀토(João Pinto)의 비주얼 스튜디오 코드용 아스키독 확장 기능을 이용하면 실시간 편집 미리 보기, 구문 강조 표시, 기호 지원 등 개발자가 원하고 기대하는 기능을 쓸 수 있다. 아스키독 엔진의 자바스크립트 버전을 사용한 것인데, 내부 설정 변경을 통해 루비(Ruby) 버전으로 쓸 수도 있다.

도커
도커 덕분에 클라우드에서는 물론 온프레미스에서도 소프트웨어를 작성, 관리, 게시, 유지보수하는 작업이 더 쉬워졌다. 마이크로소프트의 비주얼 스튜디오 코드용 도커 확장 기능을 활용하면, 작업 중인 도커화된 프로젝트와 나란히 도커 자체를 더 쉽게 관리할 수 있다. 프로젝트용 도커파일 자동 생성, 컨테이너 내에 이미지 투입, 실행중인 컨테이너 관리, 레지스트리에 연결, 애저 앱 서비스로의 직접 이미지 배치 등을 할 수 있다. 
 
깃렌즈

깃렌즈
지금 당장 소프트웨어를 작성한다면 버전 제어 시스템이 필요할 것이다. 그리고 그 시스템은 아마도 깃(Git)일 것이다. 비주얼 스튜디오 코드는 내장 기능으로 깃을 지원하지만 최소한의 수준에 머물러 있다. 이때 깃렌즈(GitLens)를 사용하면 다양한 깃 관련 기능을 추가로 쓸 수 있다. 예를 들면, 저장소 목록, 현재 파일 이력, 주력 중인 행의 행 이력, 커밋 검색 시스템, 브랜치/태그/참조 비교 도구 등이 있다. 

그러나 이 중에서도 가장 좋은 깃 통합 기능은 코드 편집기에서 직접 사용할 수 있다. 특정 코드 행에 커서를 놓으면 마지막으로 작업한 사람, 변경 내용 등의 주석이 나타난다. 깃렌즈를 일주일만 사용해 보면 다시는 깃렌즈 없이 작업하기 힘들 것이다.

HTML 프리뷰
사실 최고의 툴로 알려진 것 중에는 가장 단순한 툴이 많다. HTML 프리뷰 확장 기능도 마찬가지다. 오직 한 가지 기능만 한다. 비주얼 스튜디오 코드의 미리보기 창에서 개발자의 HTML 코드를 브라우저 보기로 제공하는 것이다. HTML 프리뷰는 스타일 시트가 있는 전체 페이지보다는 HTML 스니펫(snippet)에 가장 잘 작동한다. 각 URL을 통해 시스템 전체를 사용할 수 있다면 복잡한 페이지의 렌더링도 잘 처리한다.
 
마이크로소프트 비주얼 스튜디오 라이브 셰어

마이크로소프트 비주얼 스튜디오 라이브 셰어
대규모 분산 소프트웨어팀에게 코드에 대한 실시간 협업은 더는 '새롭거나',  '있으면 좋은 것'이 아니라 필수다. 마이크로소프트 비주얼 스튜디오 라이브 셰어(Live Share) 확장 기능을 이용하면 자신의 비주얼 스튜디오 코드 인스턴스를 다른 사람의 인스턴트와 연결할 수 있다. 이렇게 협업에 참여하면 다른 사람의 작업 내용을 실시간으로 볼 수 있다. 

라이브 셰어의 가장 좋은 점은 단순한 화면 공유가 아니라 실행 코드의 출력 내용 역시 실시간으로 공유한다는 점이다. 터미널 인스턴스나 localhost 웹 앱 역시 라이브 셰어 확장의 연결 기능으로 공유할 수 있다.

마크다운 올인원
리드미(README)와 간단한 문서용으로 마크다운(Markdown)만 한 것이 없다. 비주얼 스튜디오 코드는 기본적인 마크다운을 자동으로 지원하는데 마크다운 올인원은 한 걸음 더 나아가 인라인 스타일(굵게, 기울이기, 밑줄) 키보드 지원, 머리글 스타일로부터 목차 자동 생성, 인라인 수학 서식, 깃허브 스타일의 마크다운 지원 등을 추가로 제공된다. 그 중에 최고는 ‘마크다운을 HTML로 인쇄’하는 기능이다. 손으로 코드를 작성할 필요 없이 꽤 깔끔한 HTML을 생성하는 매우 좋은 방법이다.
 
프로젝트 매니저

프로젝트 매니저
비주얼 스튜디오 코드는 코드로 가득 찬 폴더를 하나의 별개 프로젝트로 취급한다. 그러나 프로젝트 간에 전환은 비주얼 스튜디오 코드의 별도의 인스턴스 간에 이동을 의미하며, 항상 여러 개 폴더를 하나의 비주얼 스튜디오 프로젝트에 합칠 수 있는 것도 아니다. 여러 개 폴더를 각각 별도로 둬야 할 때가 있기 때문이다.

이때 프로젝트 매니저 확장기능을 이용하면 편집기 인스턴스를 닫았다가 다시 열거나 심지어 인스턴스 간에 전환할 필요도 없이 프로젝트를 전환할 수 있다. 사이드바 프로젝트 목록을 열고 프로젝트 이름을 클릭하면 현재 비주얼 스튜디오 코드 인스턴스가 해당 프로젝트로 전환된다. 알트(Alt) 키, 시프트(Shift) 키, 영문 피(P) 키를 동시에 누르는 방법도 있다. 그러면 직접 입력해서 프로젝트 목록을 검색할 수 있다.

리스트럭처드텍스트
기본적으로 리스트럭처드텍스트(reStructuredText) 문서 형식은 문체 장식이 있는 일반 텍스트지만 이를 위한 대화식 도구를 갖추는 것이 도움이 된다. 렉스튜디오(LeXtudio)에서 나온 리스트럭처드텍스트 확장기능은 리스트럭처드텍스트 문서를 위한 구문 강조 표시와 코드 스니펫뿐만 아니라 실시간 미리보기와 린트(lint) 기능 등을 지원한다. 단, 기능 전체를 사용하려면 다른 파이썬 패키지를 설치해야 한다는 것을 기억하자.
 
비주얼 스튜디오 코드 빔

비주얼 스튜디오 코드 빔
빔(Vim)의 가장 큰 장점은 사용자 정의가 탁월하고 명령 시스템이 강력한 것이다. 비주얼 스튜디오 코드 빔(VSCodeVim) 확장 기능은 빔의 키 사용자 정의와 입력 행위가 매우 자세하게 모방돼 있다. 단, 빔스크립트(Vimscript)가 지원되지 않으므로 빔스크립트로 작성된 빔 확장 프로그램은 직접 다시 작성해야 한다.

XML 툴즈
호불호(대부분 불호)가 있지만 XML은 데이터 형식으로써 살아 남았을 뿐만 아니라 수많은 곳에 사용된다. XML 툴즈 확장기능을 이용하면 XML 작업을 그나마 '덜' 고약하게 처리할 수 있다. 보기 싫은 XML 서식을 정리하거나 작게 만들 수 있고, 문서를 별도의 트리 뷰로 탐색할 수 있으며, X패스 쿼리를 실행할 수 있고, X쿼리 린트 기능, 실행, 코드 완성을 편집기에서 바로 처리할 수 있다. ciokr@idg.co.kr



2019.05.10

'비주얼 스튜디오 코드' 필수 확장 기능 10선

Serdar Yegulalp | InfoWorld
비주얼 스튜디오 코드(Visual Studio Code)는 단순한 텍스트 편집기가 아니다. 통합 개발 환경(IDE), 프로젝트 정리기, 데이터 워크벤치 등 수많은 역할을 한다.

이에 따라 비주얼 스튜디오 코드용 확장 프로그램도 숲처럼 계속 확장하고 있다. 이러한 숲에서 필요한 것을 베어다 어떤 작업에도 적합하게 활용할 수 있다. 훌륭한 비주얼 스튜디오 코드 확장 프로그램 10가지를 소개한다.
 
아스키독

아스키독
프로젝트 문서 작성은 아스키독(AsciiDoc)과 같은 문서 전용 구문을 활용하는 것이 좋다. 주앙 핀토(João Pinto)의 비주얼 스튜디오 코드용 아스키독 확장 기능을 이용하면 실시간 편집 미리 보기, 구문 강조 표시, 기호 지원 등 개발자가 원하고 기대하는 기능을 쓸 수 있다. 아스키독 엔진의 자바스크립트 버전을 사용한 것인데, 내부 설정 변경을 통해 루비(Ruby) 버전으로 쓸 수도 있다.

도커
도커 덕분에 클라우드에서는 물론 온프레미스에서도 소프트웨어를 작성, 관리, 게시, 유지보수하는 작업이 더 쉬워졌다. 마이크로소프트의 비주얼 스튜디오 코드용 도커 확장 기능을 활용하면, 작업 중인 도커화된 프로젝트와 나란히 도커 자체를 더 쉽게 관리할 수 있다. 프로젝트용 도커파일 자동 생성, 컨테이너 내에 이미지 투입, 실행중인 컨테이너 관리, 레지스트리에 연결, 애저 앱 서비스로의 직접 이미지 배치 등을 할 수 있다. 
 
깃렌즈

깃렌즈
지금 당장 소프트웨어를 작성한다면 버전 제어 시스템이 필요할 것이다. 그리고 그 시스템은 아마도 깃(Git)일 것이다. 비주얼 스튜디오 코드는 내장 기능으로 깃을 지원하지만 최소한의 수준에 머물러 있다. 이때 깃렌즈(GitLens)를 사용하면 다양한 깃 관련 기능을 추가로 쓸 수 있다. 예를 들면, 저장소 목록, 현재 파일 이력, 주력 중인 행의 행 이력, 커밋 검색 시스템, 브랜치/태그/참조 비교 도구 등이 있다. 

그러나 이 중에서도 가장 좋은 깃 통합 기능은 코드 편집기에서 직접 사용할 수 있다. 특정 코드 행에 커서를 놓으면 마지막으로 작업한 사람, 변경 내용 등의 주석이 나타난다. 깃렌즈를 일주일만 사용해 보면 다시는 깃렌즈 없이 작업하기 힘들 것이다.

HTML 프리뷰
사실 최고의 툴로 알려진 것 중에는 가장 단순한 툴이 많다. HTML 프리뷰 확장 기능도 마찬가지다. 오직 한 가지 기능만 한다. 비주얼 스튜디오 코드의 미리보기 창에서 개발자의 HTML 코드를 브라우저 보기로 제공하는 것이다. HTML 프리뷰는 스타일 시트가 있는 전체 페이지보다는 HTML 스니펫(snippet)에 가장 잘 작동한다. 각 URL을 통해 시스템 전체를 사용할 수 있다면 복잡한 페이지의 렌더링도 잘 처리한다.
 
마이크로소프트 비주얼 스튜디오 라이브 셰어

마이크로소프트 비주얼 스튜디오 라이브 셰어
대규모 분산 소프트웨어팀에게 코드에 대한 실시간 협업은 더는 '새롭거나',  '있으면 좋은 것'이 아니라 필수다. 마이크로소프트 비주얼 스튜디오 라이브 셰어(Live Share) 확장 기능을 이용하면 자신의 비주얼 스튜디오 코드 인스턴스를 다른 사람의 인스턴트와 연결할 수 있다. 이렇게 협업에 참여하면 다른 사람의 작업 내용을 실시간으로 볼 수 있다. 

라이브 셰어의 가장 좋은 점은 단순한 화면 공유가 아니라 실행 코드의 출력 내용 역시 실시간으로 공유한다는 점이다. 터미널 인스턴스나 localhost 웹 앱 역시 라이브 셰어 확장의 연결 기능으로 공유할 수 있다.

마크다운 올인원
리드미(README)와 간단한 문서용으로 마크다운(Markdown)만 한 것이 없다. 비주얼 스튜디오 코드는 기본적인 마크다운을 자동으로 지원하는데 마크다운 올인원은 한 걸음 더 나아가 인라인 스타일(굵게, 기울이기, 밑줄) 키보드 지원, 머리글 스타일로부터 목차 자동 생성, 인라인 수학 서식, 깃허브 스타일의 마크다운 지원 등을 추가로 제공된다. 그 중에 최고는 ‘마크다운을 HTML로 인쇄’하는 기능이다. 손으로 코드를 작성할 필요 없이 꽤 깔끔한 HTML을 생성하는 매우 좋은 방법이다.
 
프로젝트 매니저

프로젝트 매니저
비주얼 스튜디오 코드는 코드로 가득 찬 폴더를 하나의 별개 프로젝트로 취급한다. 그러나 프로젝트 간에 전환은 비주얼 스튜디오 코드의 별도의 인스턴스 간에 이동을 의미하며, 항상 여러 개 폴더를 하나의 비주얼 스튜디오 프로젝트에 합칠 수 있는 것도 아니다. 여러 개 폴더를 각각 별도로 둬야 할 때가 있기 때문이다.

이때 프로젝트 매니저 확장기능을 이용하면 편집기 인스턴스를 닫았다가 다시 열거나 심지어 인스턴스 간에 전환할 필요도 없이 프로젝트를 전환할 수 있다. 사이드바 프로젝트 목록을 열고 프로젝트 이름을 클릭하면 현재 비주얼 스튜디오 코드 인스턴스가 해당 프로젝트로 전환된다. 알트(Alt) 키, 시프트(Shift) 키, 영문 피(P) 키를 동시에 누르는 방법도 있다. 그러면 직접 입력해서 프로젝트 목록을 검색할 수 있다.

리스트럭처드텍스트
기본적으로 리스트럭처드텍스트(reStructuredText) 문서 형식은 문체 장식이 있는 일반 텍스트지만 이를 위한 대화식 도구를 갖추는 것이 도움이 된다. 렉스튜디오(LeXtudio)에서 나온 리스트럭처드텍스트 확장기능은 리스트럭처드텍스트 문서를 위한 구문 강조 표시와 코드 스니펫뿐만 아니라 실시간 미리보기와 린트(lint) 기능 등을 지원한다. 단, 기능 전체를 사용하려면 다른 파이썬 패키지를 설치해야 한다는 것을 기억하자.
 
비주얼 스튜디오 코드 빔

비주얼 스튜디오 코드 빔
빔(Vim)의 가장 큰 장점은 사용자 정의가 탁월하고 명령 시스템이 강력한 것이다. 비주얼 스튜디오 코드 빔(VSCodeVim) 확장 기능은 빔의 키 사용자 정의와 입력 행위가 매우 자세하게 모방돼 있다. 단, 빔스크립트(Vimscript)가 지원되지 않으므로 빔스크립트로 작성된 빔 확장 프로그램은 직접 다시 작성해야 한다.

XML 툴즈
호불호(대부분 불호)가 있지만 XML은 데이터 형식으로써 살아 남았을 뿐만 아니라 수많은 곳에 사용된다. XML 툴즈 확장기능을 이용하면 XML 작업을 그나마 '덜' 고약하게 처리할 수 있다. 보기 싫은 XML 서식을 정리하거나 작게 만들 수 있고, 문서를 별도의 트리 뷰로 탐색할 수 있으며, X패스 쿼리를 실행할 수 있고, X쿼리 린트 기능, 실행, 코드 완성을 편집기에서 바로 처리할 수 있다. ciokr@idg.co.kr

X