Visual Studio Code 환경 설정 및 사용 방법 정리

이 글은 2017년 2월 24일 오전 9시 43분 최종 업데이트 되었습니다.

Visual Studio Code 환경 설정하는 방법과 사용 방법을 정리해보고자 합니다. 저도 학습하는 입장이라서 하나하나 알게 되는 것을 지속적으로 업데이트할 예정입니다.

환경 설정

• 기존 창이 열린 상태에서 새 파일을 열 때 새 창으로 열리는 것을 기존 창의 탭으로 열리게 변경 : 파일 > 기본 설정 > 사용자 설정에서 창 섹션에서 window.openFilesInNewWindow의 값을 false로 변경
• php 파일을 열 때마다 Cannot validate the php file. The php program was not found. Use the 'php.validate.executablePath' setting to configure the location of 'php'라는 에러 메시지 표시될 때 : php 유효성 체크를 할 프로그램이 설치돼 있지 않아서 발생하는 문제로 해결 방법은 두 가지가 있습니다.
  • 체크하지 않도록 설정을 바꾸는 방법 : "php.validate.enable": false로 변경
  • php 프로그램을 설치한 후 환경 설정에 반영하는 방법
    • http://windows.php.net/download에서 php 프로그램 다운로드하고 설치
    • 사용자 환경 설정의 PHP 섹션에서 "php.validate.executablePath" : "C:/설치한 폴더/php.exe"로 변경 – 경로를 입력할 때 역 슬래시()가 아니라 슬래시(/)를 입력합니다.
    • php 체크가 구동되는 시점을 저장할 때가 아니라 입력할 때로 변경 : php.validate.run: "onType"으로 변경
• 기본 설정 설정 중 사용자(User) 설정과 작업 영역(Workspace) 설정에 대해 : 사용자 설정은 어떤 창을 띄우든 전역적으로 적용되는 설정이고, 작업 영역 설정은 현재 Workspace를 열었을 때 적용되는 설정입니다. 작업 영역 설정과 사용자 설정 중 동일한 설정이 있다면 작업 영역 설정값이 우선적으로 적용됩니다. 좀 더 자세한 글은 여기를 참고하세요.
• 편집기 열 때 자동 줄 바꿈 적용 : 편집기 섹션에서 "editor.wordWrap": true로 변경
• VS Code가 한국어로 실행되니 번역이 가끔 실제 사용되는 용어랑 다르게 출력되는 부분들이 있어서 이해하기가 더 어렵더군요. 그래서 영어로 언어 설정을 변경했습니다. F1로 명령어 팔레트를 열고 ‘언어’라고 입력한 후에 설정값에 en을 입력합니다(참고 : Visual Studio Code. UI 언어 변경).
• Preview 단축키 변경 : Preview 화면을 현재 에디터 우측에 펼치는 단축키를 Ctrl+Shift+v로 변경했습니다. 명령어 팔레트에 shortcuts를 입력하고 관련한 단축키를 아래와 같이 변경했습니다.

[
{ "key": "ctrl+k v",          "command": "markdown.showPreview",
                                     "when": "editorFocus" },
{ "key": "ctrl+shift+v",              "command": "markdown.showPreviewToSide",
                                     "when": "editorFocus" }
]

단축키

기본 단축키 목록은 공식 홈페이지에서 확인할 수 있습니다.

단축키	기능
F1, Ctrl+Shift+P	명령 표시 및 실행
Ctrl+/, Ctrl+K+C, Ctrl+K+U	주석달기 토글
Ctrl+Space	코드 제안 표시
Ctrl+Tab	현재 열린 에디터 화면간 전환
Ctrl+Shift+L, Ctrl+F2	현재 문서에서 현재 선택한 단어와 동일한 단어 동시에 편집
Ctrl+D	현재 문서에서 현재 선택한 단어와 동일한 바로 다음 단어 동시에 편집
Ctrl+K+T	테마 선택창 열기
Ctrl+Shift+F	현재 프로젝트 전체 파일에서 검색
Ctrl+Shift+H	현재 프로젝트 전체 파일에서 바꾸기
Ctrl+Shift+V	현재 에디터 우측에 Preview 창 열기
Ctrl+`	터미널 열기/닫기 토글
Ctrl+]	들여쓰기
Ctrl+[	내어쓰기

확장(Extensions) or 플러그인 or 패키지 설치

확장 기능도 마찬가지로 공식 마켓플레이스에서 확인하실 수 있습니다.

Extensions	설명
ftp-simple	FTP를 탐색기 패널에서 트리 구조로 볼 수 있습니다. 리스트를 동기화하는 방식이라서 처음 불러오거나 갱신할 때 시간이 조금 걸립니다.
ftp-sync	프로젝트 개념으로 FTP를 사용하려고 하니 ftp-simple에 비해 더 편하네요. 다만 아직 Sublime Text의 SFTP에 비할 정도는 아니고, 보완할 부분이 많은 것 같습니다.
HTML Snippets	HTML 코드를 편하게 입력할 수 있도록 돕는 기능
View in Browser	HTML 문서를 디폴트 브라우저로 띄워주는 기능입니다. 설치 후 Ctrl+F1 키를 누르면 브라우저로 뜨게 됩니다. HTML 문서만 지원하며 저장되지 않은 문서나 다른 종류의 문서는 지원되지 않는 것 같습니다.
Live HTML Previewer	HTML 문서를 편집하며 실시간으로 미리보기할 수 있습니다.
Syncing	확장 기능 및 에디터 환경 설정 등을 여러 디바이스와 동기화시켜주는 기능입니다. Github의 gist에 업로드하는 방식이라서 Private하게 올릴 수가 있습니다.
Guides	여는 코드와 닫는 코드 사이에 가이드 세로선을 표시합니다.
Markdown Shortcuts	마크다운 문법을 단축키 혹은 마우스로 쉽게 할 수 있도록 기능을 제공합니다.
markdownlint	마크다운 문법을 체크합니다.
Beutify	지저분하게 정렬돼 있는 코드를 예쁘게 정렬해줍니다.
Auto Rename Tag	HTML/XML에서 한쪽 태그를 수정하면 나머지 반대쪽 상응하는 태그를 함께 수정해 줍니다.
VS Color Picker	컬러를 선택할 때 팔레트에서 고르거나 스포이트 툴로 색상 코드를 가져올 수 있습니다.
vscode-open-project	프로젝트 기능에 비해서는 부족하지만, 작업 폴더를 프로젝트 리스트로 만들어서 쉽게 폴더 전환을 할 수 있습니다.
Paste Image	클립보드의 이미지를 바로 마크다운 코드로 붙여넣을 수 있습니다. 붙여 넣은 이미지는 자동으로 지정된 폴더에 저장됩니다.

테마

항목	설명
색 테마	Monokai와 GitHub Clean White Theme를 번걸아 사용 중입니다.
파일 아이콘 테마	Seti 이용 중
폰트 설정	테마의 설정의 아니라 에디터 설정에서 폰트를 변경할 수 있습니다.
테마 만들기	Visual Studio Code 나만의 테마 만들기 참고.

수동으로 확장 기능 및 환경 설정을 다른 디바이스에 적용하는 방법

• 에디터 기본 설정 파일을 복사해서 다른 디바이스의 동일 위치에 넣습니다.
  • 윈도우 탐색기에서 %APPDATA%CodeUser로 이동하면  settings.json이라는 환경 설정 파일이 있습니다.
• 확장(Extensions) 기능 리스트를 만들고 이 리스트를 이용해 다른 컴퓨터에서 수동으로 설치를 진행합니다.
  • 확장 기능 리스트를 만드는 방법은 명령 프롬프트 창에서 code --list-extensions를 입력하면 되는데, 제 컴퓨터에선 정상 동작을 안 하고 첫 번째 확장 리스트만 뿌려주네요. 해외 포럼을 찾아보니 저와 같은 현상을 겪는 사람이 많은 것 같습니다.
  • 위와 같이 리스트를 만들었다면 명령 프롬프트에서 수동으로 code --install-extension ms-vscode.cpptools와 같은 형태로 입력하는 방법이 있습니다.
  • 이를 한번에 수행할 수 있도록 확장 기능이나 명령문을 직접 작성하는 방법이 있는 것 같습니다.
  • 전 일단 리스트가 안 만들어지니 수동으로 설치하는게 가장 빠를 것 같습니다.