메모장이나 기본 편집기로 설정 파일만 잠깐 열던 때와 달리, 요즘은 간단한 HTML 수정부터 Python 스크립트 확인, Git 커밋 전 비교까지 한 프로그램에서 끝내고 싶어서 Visual Studio Code를 다시 설치하게 됐다. 예전에도 써봤지만 새 PC에서는 기본값 그대로 쓰기엔 불편한 부분이 꽤 있어서, 설치하자마자 바로 손보게 된 설정들이 있었다.
Visual Studio Code는 이름 때문에 Visual Studio와 헷갈리기 쉬운데, 직접 써보면 느낌이 꽤 다르다. Visual Studio가 프로젝트 전체를 묶어서 관리하는 쪽이라면, Visual Studio Code는 필요한 기능을 확장으로 붙여가며 쓰는 편집기에 더 가깝다. 가볍게 파일 몇 개만 열어도 부담이 적고, 필요할 때만 언어별 기능을 추가할 수 있는 점이 편했다.
설치할 때 같이 확인한 부분
Windows에서 설치할 때는 기본 경로보다도 체크박스를 유심히 보는 편이 낫다. 설치 과정에서 Add to PATH, Open with Code, Register Code as an editor for supported file types 같은 항목이 나오는데, 나중에 폴더 우클릭으로 바로 여는 일이 많다면 이 부분을 켜두는 쪽이 편하다.
특히 PATH 추가는 터미널에서 code . 명령을 쓰려면 사실상 꼭 필요하다. 프로젝트 폴더에서 바로 Visual Studio Code를 띄울 수 있어서, 탐색기에서 일일이 찾아 들어가는 시간이 줄어든다.
설치 후 바로 바꾼 설정
처음 실행하면 Welcome 화면이 뜨는데, 여기서 테마와 설정 동기화를 먼저 잡아도 되지만 나는 보통 파일 자동 저장과 탭 동작부터 바꾼다. 경로는 파일 > 기본 설정 > 설정이다.
내가 자주 건드린 옵션은 아래 정도였다.
| 설정 | 위치/이름 | 사용한 값 |
|---|---|---|
| 자동 저장 | Files: Auto Save | afterDelay |
| 자동 저장 지연 | Files: Auto Save Delay | 1000ms |
| 미니맵 | Editor: Minimap Enabled | 필요 없으면 끔 |
| 줄 바꿈 | Editor: Word Wrap | on |
| 글꼴 합자 | Editor: Font Ligatures | 취향 따라 선택 |
| 탭 크기 | Editor: Tab Size | 2 또는 4 |
| 탐색기 확인 | Explorer: Confirm Delete | 켬 |
자동 저장은 특히 자주 쓰게 된다. 여러 파일을 왔다 갔다 하다 보면 저장을 깜빡하기 쉬운데, Visual Studio Code에서 afterDelay로 바꿔두면 테스트 파일 수정할 때 꽤 편하다. 다만 빌드가 저장 시점에 자동 실행되도록 잡아둔 환경이라면 너무 짧게 두면 오히려 번거로울 수 있어서 1000ms 정도가 무난했다.
한글 파일과 인코딩 확인
윈도우에서 기존 프로젝트를 열다 보면 한글이 깨져 보이는 경우가 가끔 있다. 이럴 때는 창 아래 상태 표시줄의 UTF-8 같은 인코딩 표시를 눌러서 Reopen with Encoding으로 다시 열면 된다. 예전에 ANSI 기반으로 저장된 설정 파일이나 로그 파일을 볼 때 이 기능을 자주 썼다.
줄바꿈 문자도 같이 확인해두면 좋다. 상태 표시줄의 CRLF, LF를 눌러 바꿀 수 있는데, Git 저장소에서 줄바꿈 규칙이 달라져서 변경 파일이 한꺼번에 잡히는 문제를 줄이는 데 도움이 된다.
확장은 많이 깔기보다 필요한 것만
Visual Studio Code의 장점은 확장 프로그램이 많다는 점이지만, 처음부터 이것저것 다 설치하면 오히려 느려질 수 있다. 내가 보통 먼저 넣는 건 Korean Language Pack, Python 또는 C/C++처럼 실제로 쓰는 언어 확장, 그리고 Prettier 정도다.
여기서 한 가지 팁은 포맷터를 여러 개 동시에 쓰지 않는 것이다. 예를 들어 JavaScript 파일에서 Prettier와 다른 포맷 확장이 같이 잡혀 있으면 저장할 때 정렬 방식이 충돌하는 일이 있다. 이럴 때는 기본 포맷터를 지정하면 정리가 쉽다.
경로는 설정에서 Default Formatter를 검색하면 된다. 언어별로 따로 지정하려면 우측 상단의 설정 JSON을 열어 아래처럼 넣어두면 된다.
[javascript] {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}가장 많이 쓰게 된 기능
직접 써보면서 가장 자주 열게 되는 건 왼쪽의 소스 제어 탭과 하단 터미널이었다. Git 상태를 바로 확인하고, 수정된 줄 비교까지 한 화면에서 볼 수 있어서 작은 프로젝트에서는 따로 Git GUI를 열지 않는 날도 많았다.
내장 터미널은 Ctrl + `로 바로 열 수 있는데, 이 기능 하나만으로도 Visual Studio Code를 계속 켜두게 된다. PowerShell, 명령 프롬프트, Git Bash를 바꿔가며 쓸 수 있고, 작업 폴더가 자동으로 맞춰져 있어서 빌드나 실행 명령을 반복할 때 편하다.
파일 연결이 꼬였을 때 확인한 방법
설치 후 특정 파일이 다른 편집기로 계속 열리거나, 우클릭 메뉴에서 Code가 안 보이는 경우가 있다. 이럴 때는 Windows의 설정 > 앱 > 기본 앱에서 파일 형식별 연결을 다시 잡아주면 해결되는 경우가 많다.
우클릭 메뉴가 사라졌다면 Visual Studio Code를 다시 실행해서 복구되는 경우도 있지만, 보통은 재설치하면서 설치 옵션의 Open with Code 관련 체크를 다시 켜주는 쪽이 빨랐다. 특히 포터블 버전과 설치 버전을 번갈아 쓴 PC에서는 메뉴 등록이 꼬이기 쉬웠다.
Visual Studio와 헷갈릴 때 차이
검색하다 보면 Visual Studio Code와 Visual Studio를 같은 프로그램처럼 설명한 글이 섞여 있는데, 실제 사용감은 다르다. Visual Studio Code는 빠르게 열리고 가볍게 수정하기 좋다. 대신 C# 대형 솔루션처럼 IDE 기능이 깊게 필요한 작업에서는 Visual Studio 쪽이 더 잘 맞는 경우가 있다.
반대로 프론트엔드, 스크립트 수정, 서버 설정 파일 편집처럼 파일 중심 작업이 많다면 Visual Studio Code 쪽이 훨씬 부담이 적다. 확장만 잘 고르면 필요한 기능은 대부분 채울 수 있었다.
사용하면서 아쉬웠던 점도 있었다
확장을 조금만 많이 올려도 시작 속도가 예전만큼 가볍지 않게 느껴질 때가 있다. 또 설정이 워낙 많아서, 처음 쓰는 사람 입장에서는 메뉴 이름을 알아야 원하는 옵션을 빨리 찾을 수 있다. 자동 저장, 포맷터, 터미널 프로필처럼 자주 쓰는 항목은 검색창으로 찾는 습관이 있어야 덜 헤맨다.
그래도 실제로 제일 많이 손이 간 건 code .로 폴더를 바로 여는 방식과 저장 시 자동 포맷이었다. 새로 만든 PC에서도 이 두 가지만 먼저 맞춰두면 Visual Studio Code를 다시 세팅하는 시간이 꽤 줄어들었다.