12. Task Automation (tasks.json)

When building modern web applications, you regularly execute terminal scripts to compile Sass to CSS, run linters, spin up dev servers, or execute test suites. Instead of typing these commands in the terminal repeatedly, you can automate them using VS Code’s built-in **Task Runner**.

What is a VS Code Task?

Tasks are system instructions stored in a **`tasks.json`** file inside your project's `.vscode` folder. VS Code detects standard configurations (like `npm` scripts, `gulp` tasks, or `grunt` packages) automatically, and allows you to declare completely custom shell tasks that execute straight from your keyboard.

Configuring `tasks.json`

To configure a custom task:

1. Open the Command Palette (Ctrl + Shift + P).
2. Search and select: Tasks: Configure Task.
3. Click **Create tasks.json file from template**, then select **Others**.
4. VS Code will generate a `.vscode/tasks.json` file. Below is an example task that compiles Sass and runs an automated linter:

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Compile Sass",
            "type": "shell",
            "command": "sass src/styles/main.scss dist/styles/main.css",
            "group": {
                "kind": "build",
                "isDefault": true
            },
            "presentation": {
                "reveal": "always",
                "panel": "shared"
            },
            "problemMatcher": []
        },
        {
            "label": "Run Tests",
            "type": "shell",
            "command": "npm run test",
            "group": "test"
        }
    ]
}

Understanding Task properties

• label: The friendly name of the task. This appears in the Command Palette dropdown lists.
• type: Can be shell (runs the command in a terminal shell) or process (launches a specific external executable directly).
• group: Associates the task with a standard grouping category:
  • Setting "kind": "build", "isDefault": true marks this task as your primary **Build Task**. You can trigger it instantly using: Ctrl + Shift + B (Cmd + Shift + B on macOS)!
• presentation: Controls how the integrated terminal pane reacts (e.g. `reveal: always` pops the terminal panel up so you can see compile issues instantly).

Binding Keys to Custom Tasks

You can bind a dedicated keyboard shortcut to execute any custom task. Open your `keybindings.json` file (Ctrl + Shift + P ──> `Preferences: Open Keyboard Shortcuts (JSON)`) and declare your binding:

{
    "key": "ctrl+alt+t",
    "command": "workbench.action.tasks.runTask",
    "args": "Run Tests"
}

Now, pressing Ctrl + Alt + T runs your `Run Tests` shell task instantly, bypasses all sidebar menus, and displays the test report directly in the terminal tray!