VS Code 터미널과 tasks.json으로 명령 자동화

터미널을 따로 띄워놓고 VS Code와 번갈아 보는 사람이 아직 많다. 창을 오가는 것 자체가 시간을 먹기도 하지만, 더 아쉬운 것은 VS Code 안의 터미널이 에디터와 연결된 기능을 여럿 갖고 있다는 점이다. 이 글은 통합 터미널에서 실제로 쓰게 되는 기능과, 반복해서 치는 명령을 tasks.json으로 옮겨 단축키 하나로 실행하는 방법을 다룬다.

터미널 여러 개를 탭과 분할로 다룬다

Ctrl+백틱으로 터미널을 연다. macOS는 Cmd+백틱이다. 새 터미널은 Ctrl+Shift+백틱으로 만든다.

터미널이 하나면 이 정도로 충분하지만, 서버를 띄워놓고 다른 명령을 치려면 두 개가 필요해진다. 두 가지 방식이 있다.

탭은 오른쪽 목록에 터미널이 하나씩 쌓이는 방식이다. 각 탭에 이름과 아이콘, 상태가 표시된다. 이름은 우클릭해서 바꿀 수 있는데, 서버·테스트·잡일 식으로 이름을 붙여두면 헷갈리지 않는다.

분할은 한 화면을 좌우로 나눈다. Ctrl+Shift+5로 나누고, Alt+왼쪽과 Alt+오른쪽으로 오간다. 탭 위에서 Alt+클릭을 해도 분할된다. 서버 로그를 보면서 명령을 치는 상황에 잘 맞는다.

셸을 여러 개 쓴다면 프로필을 알아두면 좋다. VS Code가 시스템에 설치된 셸을 감지해 드롭다운에 보여준다. 윈도우에서 PowerShell과 WSL 배시를 번갈아 쓸 때 이 목록에서 고르면 된다.

에디터와 터미널을 잇는 기능들

여기부터가 통합 터미널을 쓰는 이유다.

선택한 코드를 바로 실행한다. Terminal: Run Selected Text in Active Terminal 명령은 에디터에서 선택한 텍스트를 터미널에 보낸다. 아무것도 선택하지 않았으면 커서가 있는 줄을 보낸다. SQL 조각이나 셸 스크립트를 부분부분 확인할 때, 복사해서 붙여넣는 과정이 사라진다. 자주 쓴다면 단축키를 배정해 두는 게 좋다.

출력의 파일 경로를 클릭해서 연다. 문서는 "터미널이 편집기와 통합된 정교한 링크 감지 기능을 갖췄다"고 설명한다. Ctrl이나 Cmd를 누른 채 클릭하면 URL, 파일, 폴더가 열린다. 테스트 실패 출력의 src/user.test.ts:42 같은 경로를 클릭하면 그 줄로 바로 간다. 키보드로만 하려면 Ctrl+Shift+G로 감지된 링크 목록을 연다.

명령 단위로 스크롤한다. 셸 통합이 켜져 있으면 Ctrl+Up과 Ctrl+Down으로 이전·다음 명령 위치로 점프한다. 출력이 길게 쏟아진 뒤 "아까 그 명령이 뭐였지" 할 때, 스크롤을 한참 올리는 대신 한 번에 간다.

터미널 설정 중 자주 손보는 것은 셋이다. terminal.integrated.scrollback은 보관할 출력 줄 수인데 기본값이 부족하면 늘린다. terminal.integrated.copyOnSelection은 선택만 해도 복사되게 한다. terminal.integrated.splitCwd는 분할한 터미널이 어느 디렉터리에서 시작할지 정한다.

반복해서 치는 명령은 tasks.json 으로 옮긴다

같은 명령을 하루에 열 번 친다면 태스크로 만들 때가 된 것이다. 문서의 설명은 이렇다. "VS Code의 태스크는 스크립트를 실행하고 프로세스를 시작하도록 구성할 수 있어서, 기존 도구 다수를 명령줄을 입력하거나 새 코드를 작성하지 않고도 VS Code 안에서 쓸 수 있다."

파일은 .vscode/tasks.json이다. 문서의 기본 형태를 옮기면 이렇다.

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run tests",
      "type": "shell",
      "command": "./scripts/test.sh",
      "windows": { "command": ".\\scripts\\test.cmd" },
      "group": "test",
      "presentation": { "reveal": "always", "panel": "new" }
    }
  ]
}

속성 각각의 역할은 이렇다. label은 목록에 보일 이름, type은 shell과 process 중 하나, command는 실행할 것, args는 인자, group은 분류(build나 test), presentation은 터미널 패널이 어떻게 뜰지, dependsOn은 다른 태스크와 묶는 설정이다.

windows 블록처럼 운영체제별로 명령을 다르게 줄 수 있다는 점이 팀 작업에서 유용하다. 맥과 윈도우가 섞인 팀에서 각자 다른 스크립트를 치는 대신, 태스크 하나로 통일할 수 있다.

실행은 명령 팔레트의 Tasks: Run Task로 한다. group이 build인 태스크는 Ctrl+Shift+B로 바로 실행된다. 가장 자주 쓰는 것을 빌드 그룹에 넣어두면 단축키 하나로 끝난다.

npm 스크립트나 Gulp, Grunt, Jake는 VS Code가 자동으로 감지한다. package.json이 있으면 별도 설정 없이 Tasks: Run Task에 스크립트 목록이 뜬다. 간단한 프로젝트라면 tasks.json을 만들 필요조차 없다.

문제 매처가 출력을 클릭 가능한 목록으로 바꾼다

태스크의 진짜 값어치는 problemMatcher에 있다. 빌드 출력의 에러 메시지를 정규식으로 읽어서 Problems 패널에 목록으로 띄우고, 클릭하면 해당 줄로 이동하게 만든다.

내장 매처가 여럿 있다. 문서가 예로 든 것은 $tsc, $eslint-stylish, $jshint 등이다.

{
  "label": "타입 체크",
  "type": "shell",
  "command": "npx tsc --noEmit",
  "group": "build",
  "problemMatcher": "$tsc",
  "presentation": { "reveal": "silent", "panel": "shared" }
}

reveal을 silent로 두면 에러가 있을 때만 패널이 뜬다. 성공하면 조용히 지나간다. 매번 터미널이 튀어나오는 것이 거슬린다면 이 옵션을 쓰면 된다.

내장 매처가 없는 도구는 정규식을 직접 쓴다. 파일 위치, 줄과 열, 심각도를 어느 캡처 그룹에서 가져올지 지정하는 방식이다. 손이 좀 가지만, 사내 빌드 도구를 쓰는 팀이라면 한 번 만들어 두면 계속 쓴다.

태스크를 여러 개 묶어 순서대로 돌린다

dependsOn으로 태스크를 조합한다. 문서 표현으로는 "순차 또는 병렬 실행으로 복합 태스크를 만든다"이다.

{
  "version": "2.0.0",
  "tasks": [
    { "label": "clean", "type": "shell", "command": "rm -rf dist" },
    { "label": "build", "type": "shell", "command": "npm run build" },
    {
      "label": "clean build",
      "dependsOrder": "sequence",
      "dependsOn": ["clean", "build"],
      "group": { "kind": "build", "isDefault": true }
    }
  ]
}

dependsOrder를 sequence로 주지 않으면 병렬로 실행된다. 청소와 빌드를 동시에 돌리면 결과가 엉키므로 이 경우엔 순서가 필요하다.

디버깅과도 연결된다. 앞서 다룬 launch.json의 preLaunchTask에 태스크 이름을 적으면, F5를 누를 때 빌드가 먼저 돌고 디버거가 뜬다.

다만 모든 명령을 태스크로 만들 필요는 없다

태스크가 좋다고 해서 ls까지 태스크로 만들 이유는 없다. 나는 두 조건을 다 만족할 때만 만든다.

자주 실행하고, 인자가 고정된 것이다. 인자가 매번 바뀌는 명령은 태스크로 만들면 오히려 불편하다. 태스크를 고치러 파일을 열어야 하기 때문이다. 그런 건 셸 히스토리(Ctrl+R)가 낫다.

그리고 tasks.json은 커밋되는 파일이라는 점을 잊지 말아야 한다. 내 컴퓨터에만 있는 경로나 내 계정 이름이 들어가면 다른 사람에게는 깨진 태스크가 된다. 경로는 ${workspaceFolder} 같은 변수를 쓰고, 개인적인 것은 태스크가 아니라 셸 별칭으로 두는 게 맞다.

태스크의 목적은 팀이 같은 명령을 같은 방식으로 실행하게 만드는 것이다. 그 관점으로 보면 무엇을 넣고 무엇을 뺄지가 분명해진다.

참고 자료

• Integrate with External Tools via Tasks — Visual Studio Code Docs — tasks.json 구조, 속성, 문제 매처, 자동 감지, Ctrl+Shift+B
• Terminal Basics — Visual Studio Code Docs — 터미널 열기·분할·탭, 링크 감지, 명령 단위 이동, 관련 설정
• Configure debugging — Visual Studio Code Docs — preLaunchTask 로 태스크와 디버깅을 잇는 방법