The VS Code launch.json Guide

5 min·Jul 18, 2026

AI Summary

launch.json (version 0.2.0) holds a configurations array that populates the Run and Debug dropdown. request:"launch" starts a program; request:"attach" connects to a running process. Use ${workspaceFolder} variables, wire preLaunchTask to a tasks.json task to build first, and use compounds to start frontend and backend together.

VS Code launch.json (Debug Config)

A .vscode/launch.json with debug configurations — launch a Node program, attach to a running process, and a compound that starts several at once — the file behind the VS Code Run and Debug panel.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Server",
      "program": "${workspaceFolder}/src/index.js",
      "env": {
        "NODE_ENV": "development"
      },
      "preLaunchTask": "build",
      "skipFiles": [
        "<node_internals>/**"
      ]
    },
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to Process",
      "port": 9229
    }
  ],
  "compounds": [
    {
      "name": "Full Stack",
      "configurations": [
        "Launch Server",
        "Attach to Process"
      ]
    }
  ]
}

launch.json lives in .vscode and defines every entry in the Run and Debug dropdown. Two request types cover most cases.

launch: start a program

{
  "type": "node",
  "request": "launch",
  "name": "Launch Server",
  "program": "${workspaceFolder}/src/index.js",
  "env": { "NODE_ENV": "development" }
}

Use variables like ${workspaceFolder} and ${file} instead of absolute paths so the config is portable.

attach: connect to a running process

{ "type": "node", "request": "attach", "name": "Attach to Process", "port": 9229 }

Great for a server you already started with --inspect.

Build first with preLaunchTask

Point preLaunchTask at a tasks.json label and VS Code builds before it launches:

"preLaunchTask": "build"

Debug the whole stack with compounds

compounds starts several configurations at once — frontend and backend under one click:

"compounds": [
  { "name": "Full Stack", "configurations": ["Launch Server", "Attach to Process"] }
]

Security notes

Do not hardcode secrets in env; use envFile pointing at a git-ignored .env.
Avoid committing configs that attach to production hosts or ports.

Open the launch.json template and ask the workspace to "add a configuration to debug Jest tests" or "add a Chrome launch config for the frontend", then diff the result.

FAQ

launch vs attach?

request:"launch" starts your program under the debugger. request:"attach" connects to a process that is already running (e.g. node --inspect on port 9229). Use attach for servers you start yourself.

How do I build before debugging?

Set preLaunchTask to the label of a tasks.json task. VS Code runs that task and only launches once it succeeds — essential for compiled languages.

Related templates

VS Code launch.json (Debug Config)