VS Code Tasks 사용법｜빌드·테스트·개발 명령 자동화하기

VS Code 실무 활용 시리즈

VS Code Tasks로
반복 명령 자동화하기

빌드·테스트·개발 서버 명령을 에디터 안에서 빠르고 일관되게 실행하는 방법

프로젝트를 열 때마다 터미널에 npm run build, npm test 같은 명령을 다시 입력하고 있나요? VS Code의 Tasks를 이용하면 자주 쓰는 명령을 이름 있는 작업으로 저장하고, 메뉴나 단축키로 실행할 수 있습니다.

목차

1. Tasks를 사용하기 좋은 상황
2. 실행 방법과 단축키
3. npm 스크립트 실행
4. tasks.json 만들기
5. 기본 빌드 작업 만들기
6. 운영체제별 테스트 명령
7. 여러 작업을 한 번에 실행
8. 변수로 재사용성 높이기
9. 주의점과 문제 해결
10. 15분 연습 과제

한 줄 요약 Tasks는 빌드, 린트, 테스트, 패키징, 배포처럼 외부 명령줄 도구를 VS Code의 작업 흐름에 연결하는 기능입니다. 설정은 보통 프로젝트의 .vscode/tasks.json에 저장됩니다. VS Code Tasks 공식 문서

1. Tasks는 언제 쓰면 좋을까?

단순히 터미널을 대신하는 기능이라기보다, 팀에서 반복 실행하는 명령에 같은 이름·옵션·실행 위치를 부여하는 도구라고 생각하면 쉽습니다.

• 프로젝트를 빌드하거나 테스트하는 명령이 길 때
• 프런트엔드와 백엔드 명령을 한 번에 실행하고 싶을 때
• Windows와 macOS에서 서로 다른 명령을 사용해야 할 때
• 컴파일 오류를 VS Code의 Problems(문제) 패널에서 바로 보고 싶을 때
• 팀원이 같은 명령과 옵션으로 작업하게 만들고 싶을 때

먼저 폴더를 열어 주세요 Tasks는 워크스페이스 폴더를 기준으로 동작합니다. 파일 하나만 단독으로 연 상태라면 File → Open Folder로 프로젝트 폴더를 먼저 여세요. 작업 자동 감지 공식 안내

2. 자주 쓰는 실행 방법과 단축키

기능	Windows	macOS	설명
기본 빌드 작업 실행	Ctrl + Shift + B	⇧ + ⌘ + B	기본값으로 지정한 build 작업 실행
작업 목록 열기	명령 팔레트에서 Tasks: Run Task		등록·자동 감지된 작업 중 선택
기본 테스트 작업 지정	명령 팔레트에서 Tasks: Configure Default Test Task		프로젝트의 대표 테스트 작업 선택
빠른 열기에서 실행	Ctrl + P	⌘ + P	task 뒤에 작업 이름 입력

기본 빌드 단축키는 공식 기본 단축키 문서의 Tasks 항목에서 확인할 수 있습니다.

3. 가장 쉬운 시작: npm 스크립트 실행

VS Code는 package.json의 npm 스크립트를 자동으로 감지합니다. Gulp, Grunt, Jake 작업도 자동 감지 대상입니다. 공식 자동 감지 목록

1프로젝트 폴더 열기

package.json이 있는 폴더를 VS Code에서 엽니다.

2명령 팔레트 실행

Windows는 Ctrl+Shift+P, macOS는 ⇧+⌘+P를 누릅니다.

3Tasks: Run Task 선택

npm: build, npm: test처럼 자동 감지된 스크립트를 선택합니다. 실행 결과는 통합 터미널에 표시됩니다.

4. 직접 tasks.json 만들기

1. 상단 메뉴에서 Terminal → Configure Tasks를 선택합니다.
2. Create tasks.json file from template를 고릅니다.
3. Others를 선택하면 .vscode/tasks.json이 생성됩니다.

속성	역할	예시
label	작업 목록에 표시되는 이름	Build project
type	shell 또는 process	shell
command	실행할 프로그램이나 명령	npm run build
args	명령에 전달할 인수 배열	["--watch"]
group	build/test 그룹 및 기본 작업 지정	{"kind":"build","isDefault":true}
problemMatcher	출력의 오류를 Problems 패널과 연결	"$tsc"
options.cwd	명령을 실행할 폴더	${workspaceFolder}/frontend
presentation	터미널 표시 방식과 패널 공유 여부	{"reveal":"always"}

전체 속성과 허용 값은 Tasks JSON 스키마 공식 문서에서 확인하세요.

5. 실전 예제 1: 기본 빌드 작업 만들기

TypeScript 프로젝트를 컴파일하고 오류를 Problems 패널에 표시하는 예제입니다.

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "TypeScript build",
      "type": "shell",
      "command": "npx tsc",
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "problemMatcher": "$tsc",
      "presentation": {
        "reveal": "always",
        "panel": "dedicated"
      }
    }
  ]
}

이제 Windows에서 Ctrl+Shift+B, macOS에서 ⇧+⌘+B를 누르면 바로 실행됩니다. $tsc는 VS Code가 제공하는 기본 문제 매처입니다. Problem Matcher 공식 설명

6. 실전 예제 2: 운영체제별 테스트 명령

macOS에서는 셸 스크립트, Windows에서는 CMD 파일을 실행하도록 분기할 수 있습니다.

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

windows, linux, osx 속성으로 운영체제별 설정을 덮어쓸 수 있습니다. 작업 스키마의 운영체제별 속성 공식 정의를 참고하세요.

7. 실전 예제 3: 여러 작업을 한 번에 실행

dependsOn을 사용하면 프런트엔드와 백엔드 빌드를 하나의 작업으로 묶을 수 있습니다. 여러 의존 작업은 기본적으로 병렬 실행됩니다.

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Build frontend",
      "type": "shell",
      "command": "npm run build",
      "options": { "cwd": "${workspaceFolder}/frontend" },
      "problemMatcher": []
    },
    {
      "label": "Build backend",
      "type": "shell",
      "command": "npm run build",
      "options": { "cwd": "${workspaceFolder}/backend" },
      "problemMatcher": []
    },
    {
      "label": "Build all",
      "dependsOn": ["Build frontend", "Build backend"],
      "group": { "kind": "build", "isDefault": true },
      "problemMatcher": []
    }
  ]
}

순서대로 실행해야 한다면? 묶음 작업에 "dependsOrder": "sequence"를 추가하세요. 예를 들어 코드 생성이 끝난 뒤 빌드해야 하는 경우에 유용합니다. Compound Tasks 공식 문서

8. 변수로 재사용성 높이기

경로를 직접 적는 대신 VS Code 변수를 사용하면 다른 컴퓨터에서도 설정을 재사용하기 쉽습니다.

• ${workspaceFolder}: 현재 연 워크스페이스 폴더
• ${file}: 현재 열려 있는 파일의 전체 경로
• ${fileDirname}: 현재 파일이 들어 있는 폴더
• ${fileBasename}: 확장자를 포함한 현재 파일 이름

VS Code Variables Reference 공식 문서

9. 자주 막히는 부분과 주의점

• 명령을 찾을 수 없음: 통합 터미널에서 같은 명령이 실행되는지 먼저 확인하세요. PATH나 패키지 설치 문제일 수 있습니다.
• 잘못된 폴더에서 실행됨: options.cwd에 ${workspaceFolder} 기반 경로를 지정하세요.
• 오류가 Problems에 안 보임: 실제 출력 형식과 맞는 problemMatcher가 필요합니다. 단순 실행만 원하면 빈 배열 []을 사용하세요.
• 백그라운드 작업: 감시 모드나 개발 서버는 isBackground와 시작·종료 상태를 판별할 문제 매처가 필요할 수 있습니다.
• 보안: Tasks는 셸 명령을 실제로 실행합니다. 외부에서 받은 프로젝트라면 .vscode/tasks.json의 명령을 먼저 확인하고, 신뢰하지 않는 워크스페이스에서는 실행하지 마세요.
• Testing UI와 별개: 기본 테스트 Task로 명령을 실행해도 VS Code Testing UI의 결과 상태가 자동 갱신되는 것은 아닙니다. Testing의 Task integration 안내

10. 15분 연습 과제

• Tasks: Run Task에서 자동 감지된 npm 스크립트를 한 번 실행한다.
• .vscode/tasks.json을 만들고 Hello Task라는 셸 작업을 등록한다.
• 빌드 작업을 기본값으로 지정한 뒤 빌드 단축키로 실행한다.
• ${workspaceFolder}를 사용해 하위 폴더에서 명령을 실행한다.
• 두 작업을 dependsOn으로 묶고 병렬·순차 실행 차이를 확인한다.

오늘의 핵심 처음에는 자동 감지된 npm 작업부터 실행해 보고, 반복 횟수가 많은 명령만 tasks.json에 등록하세요. 이후 기본 build/test 그룹, 변수, 복합 작업, 문제 매처 순서로 확장하면 어렵지 않습니다.

#VSCode #VSCodeTasks #개발환경 #업무자동화 #코딩초보

공식 자료 및 검증 기준

2026년 7월 20일 기준으로 VS Code 공식 문서만 확인해 작성했습니다.

• Integrate with External Tools via Tasks
• Appendix: Tasks.json schema
• Default Keyboard Shortcuts — Tasks
• Variables Reference
• Testing — Task integration