How to Configure launch.json in Visual Studio Code?

Configuring launch.json in Visual Studio Code is essential for setting up debugging and running tasks tailored to your project. This file tells VS Code how to execute your code, attach to running processes, or perform other debugging-related actions.

Understanding launch.json

The launch.json file lives in a .vscode folder at the root of your project workspace. It contains an array of configuration objects, each defining a specific way to launch or attach to a program.

{
    "version": "0.2.0",
    "configurations": [
        // Your configurations go here
    ]
}

The core of the file is the "configurations" array. Each object within this array is a distinct launch configuration.

Creating and Adding Configurations

You can add configurations to your launch.json file using several methods within VS Code:

1. Using IntelliSense within the configurations array: If you already have a launch.json file open and your cursor is inside the configurations array, simply typing will invoke IntelliSense. This provides suggestions for common configuration types and properties based on your project context or installed extensions.
2. Pressing the 'Add Configuration' Button: At the bottom right of the Debug view (accessible via the Run icon in the Activity Bar), you'll find an "Add Configuration" button (a gear icon). Clicking this button invokes snippet IntelliSense directly at the start of the configurations array in your launch.json, allowing you to quickly insert common templates for various languages and debuggers.
3. Choosing 'Add Configuration' from the Run Menu: Go to the top menu bar, select "Run", and then choose the "Add Configuration..." option. This action also opens the launch.json file and presents you with a list of available configuration snippets to choose from, based on the debug extensions you have installed.

When you add a new configuration using any of these methods, VS Code inserts a pre-defined snippet into your launch.json file. You then customize the properties within that snippet to match your specific needs.

Key Configuration Properties

Each object within the "configurations" array typically includes several properties:

Property	Description	Examples
name	A descriptive name for the configuration, displayed in the Debug dropdown.	"Launch Program", "Attach to Process"
type	The type of debugger to use (provided by installed extensions).	"node", "python", "go", "java"
request	Whether to launch a program or attach to a running one.	"launch", "attach"
program	The path to the program or script to launch.	${workspaceFolder}/src/index.js
args	Command-line arguments passed to the program.	["--port", "3000"]
cwd	The current working directory for the debugger.	${workspaceFolder}
console	Where to display program output.	"internalConsole", "integratedTerminal"
preLaunchTask	Specifies a task to run before launching the program.	"build"

Note: The specific properties available depend on the type of debugger extension you are using. IntelliSense is very helpful here.

Example Configuration

Here's a simple example for launching a Node.js application:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Node Program",
            "type": "node",
            "request": "launch",
            "program": "${workspaceFolder}/app.js",
            "cwd": "${workspaceFolder}",
            "console": "integratedTerminal"
        }
    ]
}

In this example:

• name: "Launch Node Program" will appear in the debug dropdown.
• type: Uses the built-in Node.js debugger.
• request: Launches the program.
• program: Specifies app.js in the root of the workspace.
• cwd: Sets the current working directory to the workspace root.
• console: Runs the program in VS Code's integrated terminal.

By using the provided methods to add configurations and leveraging IntelliSense, you can effectively set up launch.json to streamline your debugging workflow in Visual Studio Code.