The Integrated Terminal & Tasks

VS Code Essentials — The Integrated Terminal & Tasks
VS Code Essentials
Course 1 · Chapter 6 · The Integrated Terminal & Tasks

🖥️ The Integrated Terminal & Tasks

Chapter 1 introduced toggling the terminal panel with Ctrl+`. This chapter goes deeper: running multiple terminals at once, choosing which shell they use, and — the real payoff — tasks.json, which turns a command you'd otherwise retype constantly into a one-click, keybindable action.

🖱️ The Integrated Terminal, In Depth

Ctrl+` toggles the terminal panel open and closed, but clicking the + icon in the terminal panel opens a new, additional terminal — several can run simultaneously (one running a dev server, another free for git commands, for instance), switchable via the dropdown next to the +.

Unlike opening a standalone terminal application, VS Code's integrated terminal starts already inside your project's folder — no manual cd required, since it inherits the working directory from whatever's currently open (Chapter 1).

🐚 Terminal Profiles — Choosing Your Shell

VS Code doesn't lock you into one shell. On Windows, it can launch PowerShell, Command Prompt, Git Bash, or a WSL shell; on macOS/Linux, typically zsh or bash. The Command Palette's (Chapter 2) Terminal: Select Default Profile command lets you choose which one opens by default — useful since a tutorial or team's shared shell scripts might assume a specific shell (Bash-style syntax, for instance) that differs from your system's own default.

▭ Splitting Terminals

Ctrl+Shift+5 (or the split icon in the terminal panel) splits the current terminal into two side-by-side panes — useful for watching a running process's output in one pane while typing commands in the other, without switching back and forth between separate terminal tabs.

⚙️ tasks.json — Automating Repeated Commands

Running the same command over and over — a build step, a test suite — gets old fast. Terminal → Configure Tasks creates .vscode/tasks.json, where a task is just a labeled shell command:

// .vscode/tasks.json { "version": "2.0.0", "tasks": [ { "label": "Build", "type": "shell", "command": "npm run build" } ] }

Running Tasks: Run Task from the Command Palette now shows Build as an option — select it, and VS Code runs the command in a new terminal automatically, no retyping needed.

🔨 A Worked Example — Build & Watch Tasks

{ "version": "2.0.0", "tasks": [ { "label": "Build", "type": "shell", "command": "npm run build", "problemMatcher": ["$tsc"] }, { "label": "Watch", "type": "shell", "command": "npm run watch", "isBackground": true, "problemMatcher": ["$tsc-watch"] } ] }

"isBackground": true marks Watch as a long-running task that doesn't "finish" the way Build does — appropriate for a file-watcher that keeps running until stopped. problemMatcher is a genuinely deep feature on its own (parsing a tool's raw output to populate the editor's Problems panel with clickable errors) — worth knowing it exists and that VS Code ships built-in matchers like $tsc for common tools, without needing to master writing a custom one yet.

⚠ Background Tasks Keep Running Until You Stop Them

An isBackground task (or any long-running command started in a terminal) doesn't stop when you switch away from its terminal tab — it keeps consuming CPU, memory, or a network port in the background, invisibly, until explicitly killed. Leaving several forgotten watch processes running across piled-up terminal tabs is a common, easy-to-miss source of a sluggish machine. Check the terminal dropdown from this chapter's first section periodically, and close (trash-can icon) any terminal whose process you no longer need.

tasks.json vs. package.json Scripts

If you've used Node.js, a package.json "scripts" section already does something similar — npm run build. The difference: tasks.json isn't limited to npm scripts at all (it can wrap any shell command, in any language's ecosystem), and it integrates directly with the Problems panel and keybindings inside VS Code. package.json scripts are editor-agnostic and work identically for any teammate regardless of what tool they use — the two aren't competitors so much as different layers: a project might reasonably have both, with a tasks.json task that simply runs an existing npm script.

Multiple terminals

Click + to open another; switch between them via the dropdown.

Terminal profiles

Choose which shell (PowerShell, Bash, WSL...) opens by default.

tasks.json

A labeled shell command, run via the Command Palette without retyping it.

isBackground / problemMatcher

Marks a long-running task; parses its output into the Problems panel.

💻 Coding Challenges

Exercise 1: Two Terminals, One Panel

Open a terminal, then click + to open a second one. Run a different simple command in each (e.g. echo hello in one, dir/ls in the other), and switch between them using the dropdown.

→ Solution

Exercise 2: Your First Task

In any project, create .vscode/tasks.json with one task that runs a simple command (like echo Build complete). Run it via the Command Palette's "Tasks: Run Task" instead of typing the command directly.

→ Solution

Exercise 3: Split and Compare

Open a terminal and split it with Ctrl+Shift+5. In one pane, run a command that produces ongoing output (like a ping, or a long-running script); in the other, run ordinary commands while the first keeps going.

→ Solution

🎯 What's Next

Next chapter: Git Integration — the Source Control panel, staging/committing/pushing, and resolving merge conflicts visually.