VS Code Can Do That - Workshop
1.0.0
1.0.0
  • Introduction
  • Essential Keyboard Shortcuts
  • Exercise 1 - Customizing The Editor
    • Before you start
    • Switch themes
    • Install a new icon theme
    • Switch fonts
    • Editor tweaks
    • Change default Settings view
    • Easily identify editor instances
  • Exercise 2 - Productivity Tricks
    • Before you start
    • Essential navigation shortcuts
    • Creating HTML with Emmet
    • Styling with Emmet
    • Update image sizes
  • Exercise 3 - Navigation And Refactoring
    • Before you start
    • Moving, Duplicating and Deleting
    • Folding sections
    • Multiple cursors
    • Rename refactor
    • Finding things
    • Extract refactor
  • Exercise 4 - Debugging
    • Before you start
    • Simple debugging
    • Simple launch config
    • Auto attach
    • Debugging browser apps
    • Compound debug configurations
  • Exercise 5 - Docker
    • Untitled
Powered by GitBook
On this page

Was this helpful?

  1. Exercise 4 - Debugging

Simple launch config

PreviousSimple debuggingNextAuto attach

Last updated 5 years ago

Was this helpful?

In most instances, you will need to specify a "Launch Configuration" for VS Code. These are commonly referred to as "Launch Configs". This is a file that specifies how VS Code should run your project.

The exercise in the folder "2-launch-configs" is a project written in TypeScript. It is also a console application. If you try and run it, it will run, but it won't appear to do anything. This is because by default, VS Code runs console applications on an "internal" terminal that you can't see. We need to configure VS Code to run this app correctly so we can use and debug it.

Open the "2-launch-configs" project. Add a launch config to this application that instructs VS Code to use the "integrated" terminal.

Add a breakpoint to the application. Run it with VS Code and hit the breakpoint.

  • Press Cmd/Ctrl + Shift + D to the Debug Sidebar view

  • Open the Dropdown List at the top and select "Add Config (2-launch-configs)..."

  • Select "Node.js"

  • A folder called ".vscode" will be added to the project "2-launch-configs"

  • Inside that folder will be a file called "launch.json". This file will be opened automatically by the editor.

  • Change the name to "Start Project 2"

"name": "Start Project 2"

  • Change the "program" value to "${workspaceFolder}/index.ts"

"program": "${workspaceFolder/index.ts"

  • Underneath "outFiles", add a line that tells VS Code to use the integrated terminal

"console": "integratedTerminal"

  • Make sure that "Start Project 2" is selected in the dropdown list at the top of the Debug view and press the green arrow

  • The application will run and the integrated terminal will open

  • In the "index.ts" file, put a breakpoint on line 13

  • Enter a color value in the terminal and see that the breakpoint is hit

Note that no special configuration is required for VS Code to handle TypeScript files. If you want VS Code to build or watch/build your TypeScript, press Cmd/Ctrl + Shift + B and select "watch" or "build".