/ How to

How to Open The launch.json File in VS Code Editor

The launch.json file is a configuration file in Visual Studio Code that controls debugging behavior. It allows you to customize how the debugger works for different projects and languages. Here’s a step-by-step guide to opening, editing, and understanding this powerful file.

What is launch.json?

The launch.json file contains JSON data that configures debugging sessions in VS Code. It controls:

  • Which debugger to use (Node.js, Python, C++ etc.)
  • How the debugger is launched – by launching a program or attaching to a running process
  • Paths to program entry points and source code
  • Runtime arguments
  • Environment variables
  • And many other debugging parameters

This configuration data is organized into “launch configurations”, which are different named sections for various debugging scenarios like launching a web server, attaching to a Node.js process, or debugging a Python unittest.

Where is launch.json located?

The launch.json file is located in a .vscode folder in your project’s root directory. VS Code automatically creates this folder and a basic launch.json file when you first start debugging.

The file path will typically look like:

/your-project
  /.vscode
    launch.json

Storing configuration files like launch.json in .vscode keeps debugging setup contained to each project, rather than global.

How to open launch.json

There are a few ways to open the launch.json file:

1. Through the Debug View

  • Open the Debug view (Ctrl+Shift+D on Windows/Linux, Cmd+Shift+D on Mac)
  • Click the gear icon in the view title bar
  • Select Open launch.json

This will open the file in the editor.

2. Command Palette

  • Open the Command Palette (Ctrl+Shift+P)
  • Search for Open launch.json
  • Select the command

Again, this opens the file in the editor.

3. File Explorer

  • Navigate to your project’s .vscode folder in the File Explorer pane
  • Double click on launch.json to open it

The File Explorer lets you directly access the file like any other file in the workspace.

Editing launch.json

The launch.json file structure is organized into the following sections:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/app.js"
    }
  ]
}
  • version – Version of the debugging configuration schema.
  • configurations – Array of named debugging configurations.
    • type – Type of debugger to use.
    • request – Launch or attach to a process.
    • name – A friendly name to identify the configuration.
    • program – Path to the target program for debugging.

To add a new configuration, duplicate an existing configuration object in the array and modify its parameters. For example, to create a new Python configuration:

{
  "configurations": [
    {
      // Existing Node.js configuration
    },
    {
      "type": "python",
      "request": "launch",
      "name": "Python: Current File",
      "program": "${file}",
      "console": "integratedTerminal"
    }
  ]
}

Parameters like program, args, env, and others are specific to each debugger type. Refer to VS Code’s debugging documentation for your language.

Debugging Specific App Types

VS Code supports launching and debugging arbitrary programs. But it also includes specialized configurations for common app types like:

  • Node.js apps
  • Flask and Django web apps
  • Unity games
  • Jest tests

These configurations customize debugging for each app architecture. They launch the app using its native server or tooling before attaching the debugger.

For example, a Node.js configuration might run npm start before attaching the debugger:

{
  "type": "node",
  "request": "launch",
  "name": "Launch via NPM",
  "runtimeExecutable": "npm",
  "runtimeArgs": [
    "run-script", "start"
  ]
}

Refer to the debugging guide for your language/app type for details on specialized configurations.

Debugging in Other Languages

The steps above use Node.js for demonstration, but VS Code supports debugging for many languages including:

  • JavaScript/TypeScript
  • Python
  • C++
  • C#
  • Java
  • PHP
  • Go
  • PowerShell

And many others via extensions from the VS Code Marketplace.

Each language uses its respective debugger engine – Node.js apps use the V8 debugger while Python apps use CPython’s pdb.

The process for generating an initial launch.json file is the same across languages:

  1. Install the appropriate language extension if needed
  2. Open a project folder containing code in that language
  3. Start debugging through the Debug View or Test View
  4. Select the debugger configuration type when prompted
  5. A predefined launch.json will be created for that language

The configuration parameters do vary across languages, so refer to the debugging guide for your language when editing configurations.

Common Debugging Features

Some key things you can do during a debugging session powered by launch.json:

Breakpoints – Pause execution on a particular line of code.

Step Over/Into/Out – Step through code line-by-line.

Variables View – Inspect values of in-scope variables.

Call Stacks View – Understand the active function calls.

Debug Console – Execute code in the context of the current breakpoint.

Data Breakpoints – Pause when a variable’s value changes.

These features provide powerful tools to understand and debug your code. launch.json controls the debugging configuration, while these features help analyze and control execution.

Summary

The launch.json file is an incredibly useful way to customize debugging in VS Code for your project’s needs. It controls how the debugger is launched and attached to your application.

Follow the steps above to easily open launch.json from the Debug View, Command Palette, or File Explorer. Add new configurations for different debugging scenarios. Refer to debugging guides for your language/app type for help editing configurations.

Mastering launch.json unlocks VS Code’s full debugging potential including breakpoints, data inspection, and advanced debugging workflows. Treat it as your first step to leveraging VS Code as a professional-grade IDE for any language.

Related Posts