Visual Studio Code 를 사용한 개발환경 꾸미기

Visual Studio Code는 2015년 부터 시작된 마이크로 소프트사의 크로스 플랫폼 오픈 소스 프로젝트다. 최근 오픈소스가 대세가 되어감에 따라 MS도 이런 추세를 따라가는 것이다. 물론 무료로 사용할 수 있는 것은 당연하고 자신의 구미에 맞게 개발환경을 꾸밀 수 있다는 장점이 있다. 이에 비교되는 개발 툴은 Vim, sublime Text 등이 될 것 같다. Vim이야 워낙 매니악한 에디터고 sublime Text는 이보다 좀 더 대중화 된 툴이다. 1년이상 Visual Studio Code를 사용했는데 처음 이 개발환경을 적응하기 전에 Sublime Text를 사용했었다. 이 두 개발툴의 환경은 매우 흡사하기 때문에 Sublime Text를 사용한 경험이 있다면 Visual Studio Code에 적응하기 쉬울 것이다.

마이크로 소프트사의 빵빵한 지원 아래 문서화도 체계적으로 잘 되어 있다. 하지만 모두 영어라는 것이 함정.

Visual Studio Code 사이트

Visual Studio Code를 줄여서 VSCode라고도 부른다.

Visual Studio Code의 대략적인 구조

Sublime Text를 사용한 적이 있다면 VScode에 적응하기는 어렵지 않다. 

  • 마켓 플레이스

VSCode는 프레임웍이 아닌 툴킷이라고 봐야한다. 플러그인 형식으로 다양한 언어를 지원하는데 이런 플러그인은 개발자들이 개발하여 마켓에 올려놓는다. 그러면 VSCode를 사용하는 개발자가 원하는 언어지원 플러그인 등을 설치하여 사용하는 방식이다. 이를 확장(Extension)이라고 하며 그림에 보듯이 다양한 언어에 대한 확장 플러그인이 존재한다. 


Visual Studio Code 마켓플레이스VScode 마켓


  • 확장(Extension) 설치


필자의 개발환경필자의 개발환경


확장을 인터넷에서 찾을 필요 없이 VSCode를 실행한 상태에서 왼 편에 5개의 아이콘 중에 마지막 사각형 형태의 아이콘을 누르면 마켓플레이스에서 확장을 검색할 수 있는 창이 뜬다. 우선 언어 지원 플러그인을 설치하는데 보통 많은 사람들이 설치한 것을 설치하면 된다. 영어가 가능하면 어떤 추가적인 기능들을 포함하는지도 읽어보는 것이 좋다.

Visual Studio Code 확상 설치 화면Visual Studio Code 확상 설치 화면


추가적인 기능들에는 자동완성이나 실시간 문법체크와 같은 기능들이 있는데 보통 이런 것들도 언어 플러그인에 같이 포함되어 설치된다. 단 언어에 따라서 추가적인 설치를 할 것들이 있다. 예를들어 파이썬과 같은 경우는 실시간 문법체크를 위해서 pylint를 미리 설치해 놓아야 한다.

이렇게 레고블럭 조립하듯이 자신의 개발환경을 하나하나 설정하기 위해서 어느정도는 문서를 살펴보면서 공부해야한 다는 점이 까다롭게 느낄 수도 있다. 하지만 Sublime Text와 같은 툴 역시 마찬가지다. 


폴더 단위로 개발환경 꾸미기

VSCode의 특징은 폴더 단위로 개발환경을 달리 꾸밀 수 있다는 것이다. 폴더는 일종의 프로젝트 단위다. 예를들어 A라는 폴더에서는 C++ 프로젝트가 진행 중이고 B라는 폴더에서는 파이썬(python)프로젝트가 진행중이라고 하자. 그러면 .vscode라는 폴더를 A와 B 각각에  두어 이 폴더에 환경 세팅을 위한 설정파일들을 만들어 넣어두면 된다. 환경설정 파일에는 빌드를 하는 방법에 대한 설정(tasks.json), 사용자 환경설정(settings.json), 환경 변수 설정(launch.json)과 같은 파일들이 있다. 이 파일들을 .vscode폴더에 넣어두면 VSCode가 A 또는 B라는 폴더를 열어볼 때 .vscode에 있는 환경설정파일을 읽어들인다. 이렇게 읽어 들인 환경설정은 기본 설정보다 우위에 있다.

Visual Studio Code tasks.jsonVisual Studio Code tasks.json


tasks.json에 대한 내용 참고

settings.json에 대한 내용 참고


  • tasks.json 설정

기본적으로 tasks.json이 있어야 빌드가 가능하다. 폴더를 만들고 빌드 테스트를 위한 간단한 소스를 작성하고 빌드를 위한 단축키(Ctrl+Shift + b)를 눌러보자. 정의된 빌드 작업이 없습니다. 라는 문구가 뜨는데 tasks.json이 없기 때문이다. 

Visual Studio Code build 설정Visual Studio Code build 설정


빌드 작업 구성을 클릭하면 명령 팔레트가 뜨는데 others라고 입력해서 

Others 임의의 외부 명령을 실행하는 예 를 선택한다.

Visual Studio Code 명령 팔렛트Visual Studio Code 명령 팔렛트

그러면 .vscode폴더가 자동으로 생성되면서 tasks.json파일도 생성된다. tasks.json 파일의 기본 내용은 다음과 같다.

기본 tasks.json기본 tasks.json

위 내용은 콘솔 창에서 다음과 같은 명을 내린다.

....> echo "Hello World"


"command"에 설정된 echo 대신 python, gcc, javac 등으로 대신하면 된다.

args에 리스트로 전달된 항목들은 명령행 인수로 전달되는데 현재 편집중인 소스를 빌드하려면 다음과 같이 수정하자.


"args" : [${file}]


명령행 인수에 추가적인 옵션은 ,(콤마)로 구분하여 추가적으로 넣어줄 수 있다.


"args" : [${file}, "args1", "args2"]

tasks.json 예tasks.json 예



위 tasks.json 설정은 콘솔에 다음과 같은 명령을 내린다.

>python 현재파일이름


지금 VSCode를 1년이상 사용하고 있다. 처음에는 잦은 버그도 있고 기존 사용하던 Sublime Text에 비해서 무거운 느낌 때문에 계속 사용하기를 고민했었다. 하지만 버그 수정을 위한 패치도 활발하고 MS라는 버프가 있어서 점점 안정적으로 되어가는 것 같아서 계속 사용하게 되었다. 현재는 만족하지만 그래도 아직까지는 VSCode 내부 결과 출력 콘솔창에 한글이 깨진다는 문제점이 있다. 이 문제가 예전에 이슈로 남아있었는데 이상하게 아직까지도 고쳐지지는 않는다. 어짜피 한글 결과를 콘솔창에서 볼일은 별로 없기 때문에 이런 경우는 외부 콘솔에서 확인하여 해결하면 된다.

이 댓글을 비밀 댓글로
    • 엄준호
    • 2017.05.24 14:50
    좋은 글 감사히 읽었습니다.
    C++ 개발환경을 VSCode로 구성하던 도중에 본문이 많은 도움이 되었습니다.
    • 2017.11.13 16:47
    비밀댓글입니다
    • MS에서 패치를 해줘야 될 겁니다. 요새 VSCODE를 만질일이 없어 최근 패치 내용을 확인해보지 않아서 잘 모르겠지만 업데이트가 활발하니 이미 또는 조만간 패치가 될 듯 합니다.
    • vscode 초보자
    • 2019.01.03 12:29
    vscode 내부 출력창 한글깨짐 현상 해결하고싶은데 방법이 없는건가요?
    • 확장프로그램중
      Korean Language pack for visual Studio Code 한번 설치해보세요.
    • 나그네
    • 2019.01.16 16:04
    한글 깨짐은 vscode 문제가 아니고 인코딩 타입이 다르기 때문으로 알고 있습니다.
    예를 들어 한글 Windows의 경우 디폴트 949인데 UTF8을 사용하는 서버에 접속하여 빌드하면 한글 출력 부분이 깨져 보이겠죠. 이 경우, 저는 command 앞부분에 "chcp 65001"을 추가하여 UTF8로 변경하니, 한글이 잘 표시되더군요.
    • 나그네님, 답글 감사하지만 정보가 조금 잘못 된 것 같아 한 말씀 드립니다... UTF-8은 유니코드의 인코딩 방식 중 한가지 입니다. 그리고 chcp명령어는 코드페이지를 변경하는 명령입니다. 윈도우cmd에서는 유니코드 코드페이지를 지원하지 않기 때문에 유니코드 방식으로 인코딩한 한글 출력이 깨지는 것입니다.
      그래서 chcp 65001로 코드페이지를 변경하여 유니코드페이지 대신에 cmd에서 지원하는 코드페이지로 한글을 맞춘 것이며 유니코드에 비해 표현할 수 있는 문자의 개수가 현저히 제한적이어서 그 외에 다른 유니코드들은 여전히 깨짐니다. vscode의 경우는 예전에는 유니코드 코드 페이지 지원이 안되었습니다만, 현재 버전이 업그레이드 되고 나서 확장프로그램을 설치하면 유니코드 한글 사용을 지원하는 것으로 알고 있습니다.
    • 살려줘요
    • 2019.04.07 12:52
    관리자의 승인을 기다리고 있는 댓글입니다