VS Code 설정과 활용

VS Code란

Visual Studio Code는 Microsoft가 만든 무료 코드 편집기다. 편집기 자체는 가볍고, 언어 지원·디버거·린터 같은 기능은 확장 프로그램(extension) 으로 더해 IDE처럼 쓴다. 대부분의 기능은 명령 팔레트(⇧⌘P, Windows·Linux는 Ctrl+Shift+P)에서 이름으로 찾아 실행한다.

창·파일 오가기

터미널에서 code .로 현재 폴더를 열려면 명령 팔레트에서 Shell Command: Install 'code' command in PATH를 한 번 실행한다(macOS). Windows와 Linux 설치 프로그램은 기본으로 PATH에 넣는다. code -r .은 지금 창에서, code -d a b는 두 파일을 비교해 연다.

설정: settings.json

설정 화면(⌘,)에서 바꾸는 값은 모두 JSON 파일에 저장된다. 명령 팔레트에서 Preferences: Open User Settings (JSON) 을 실행하면 직접 편집할 수 있다.

{
  "editor.formatOnSave": true,
  "editor.rulers": [80],
  "editor.renderWhitespace": "all",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "[c]": { "editor.insertSpaces": false, "editor.tabSize": 4 }
}

편집기와 상관없이 팀 전체의 들여쓰기·줄바꿈 규칙을 맞추려면 저장소 루트에 .editorconfig를 두는 방법도 있다. VS Code는 EditorConfig 확장을 설치하면 이 파일을 읽는다.

사용자 스니펫

자주 치는 코드 뼈대는 단축어로 만들어 둔다. 명령 팔레트에서 Snippets: Configure Snippets를 열고 언어(예: javascriptreact, typescriptreact)를 고르면 그 언어용 JSON 파일이 열린다. 프로젝트 전용이면 .vscode/*.code-snippets에 둔다.

{
  "React function component": {
    "prefix": "fc",
    "body": [
      "function ${TM_FILENAME_BASE}() {",
      "  return <div>${1}</div>",
      "}",
      "",
      "export default ${TM_FILENAME_BASE}"
    ],
    "description": "파일 이름으로 함수 컴포넌트 만들기"
  }
}

• ${TM_FILENAME_BASE}는 확장자를 뺀 현재 파일 이름, ${1}·${2}는 Tab으로 차례로 옮겨 가는 커서 자리, $0은 마지막 커서 자리다.
• 마켓의 스니펫 확장은 쓰지 않는 단축어까지 딸려 오므로, 자주 쓰는 몇 개만 직접 만드는 편이 깔끔하다. 기존 코드를 JSON body 배열로 바꾸는 일은 snippet generator 웹 도구에 맡기면 편하다.

설정 동기화 (Settings Sync)

여러 기기에서 같은 환경을 쓰려면 명령 팔레트에서 Settings Sync: Turn On을 실행하고 GitHub 또는 Microsoft 계정으로 로그인한다. 설정, 단축키, 사용자 스니펫, 확장 목록, UI 상태가 클라우드에 올라가고 이후 변경은 자동으로 동기화된다.

다른 기기에서 처음 켤 때 로컬 설정과 클라우드 설정이 다르면 고르게 한다.

동기화된 기기와 기록은 Settings Sync: Show Synced Data에서 본다.

디버깅: launch.json

printf를 찍는 대신 중단점을 걸고 변수를 보며 한 줄씩 실행하려면 디버거를 연결한다. C·C++을 macOS의 LLDB로 디버깅하는 예다.

1. 확장 CodeLLDB를 설치한다. (Microsoft의 C/C++ 확장도 디버거를 제공한다.)
2. 실행할 프로그램을 -g 옵션으로 컴파일해 디버그 정보를 넣는다: cc -g main.c -o a.out
3. 실행 및 디버그 패널에서 create a launch.json file → LLDB를 고르면 .vscode/launch.json이 생긴다.
4. program과 args를 채우고 F5로 시작한다.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "lldb",
      "request": "launch",
      "name": "Debug a.out",
      "program": "${workspaceFolder}/a.out",
      "args": ["1", "2", "3"],
      "cwd": "${workspaceFolder}"
    }
  ]
}

설정에서 debug.inlineValues를 켜면 디버깅 중 변수 값이 코드 줄 옆에 바로 표시된다.

github.dev: 클론 없이 브라우저에서 열기

GitHub 저장소 페이지에서 . 키를 누르거나 주소의 github.com을 github.dev로 바꾸면 브라우저 안에서 VS Code 편집기가 열린다. 파일 트리를 보며 탐색하고, 파일을 고쳐 바로 커밋할 수도 있다.

• 터미널이 없고 코드를 실행할 수 없다. 실행·빌드까지 필요하면 클라우드 개발 환경인 GitHub Codespaces를 쓴다.
• 함수 정의로 이동 같은 언어 기능은 일부 언어에서만 제한적으로 된다.
• ⌘W 같은 단축키가 브라우저 단축키와 겹칠 수 있다.

쓸 만한 확장 프로그램

확장 탭은 ⇧⌘X로 연다.

언어별 공식 확장도 있다. Flutter 확장을 설치하면 Dart 확장이 함께 깔리고 저장 시 포매팅·자동 수정이 켜진다. 자동 완성 목록(IntelliSense, ⌃Space)에서 항목 오른쪽의 >를 누르면 상세 정보가 펼쳐지는데, Flutter의 Icons.* 항목은 여기서 아이콘 모양을 미리 볼 수 있다.

내장 확장을 꺼서 생기는 문제

JavaScript·TypeScript 자동 완성, 정의로 이동, 오류 표시는 따로 설치하지 않아도 되는 내장(built-in) 확장 「TypeScript and JavaScript Language Features」가 맡는다. 경고 알림을 보고 이것을 꺼 버리면 document·Array·Math까지 모든 JS·TS 자동 완성이 사라진다. 확장 탭 검색창에 @builtin을 입력하면 내장 확장 목록이 나오고, 거기서 다시 켠다. 마크다운 미리보기·Git·Emmet도 내장 확장이라 같은 방식으로 되살린다.

정리

• 모든 설정은 settings.json이다. 프로젝트 설정은 .vscode/settings.json으로 팀과 공유한다.
• Settings Sync로 여러 기기의 설정·확장을 맞춘다.
• 디버깅은 -g로 컴파일하고 launch.json에 실행 파일과 인자를 적은 뒤 F5.
• 남의 저장소를 잠깐 볼 때는 . 키로 github.dev를 연다.

관련 노트: Vim과 Neovim, Windows 개발 환경, macOS에서 pyenv로 Python 환경 잡기