Automatically compile and debug Typescript projects using VSCode tasks

VSCode can pre-invoke compilation tasks in debug configuration so that Typescript projects are automatically compiled during debugging.

configuration

You can generate the Configuration template file by using the menu bars Terrminal->Configure Tasks and Run->Add Configuration, and then modify the required options.

.vscode/tasks.json

{
  "version": "2.0.0"."tasks": [{"type": "typescript"."tsconfig": "tsconfig.json"."option": "watch"."problemMatcher": ["$tsc-watch"]."label": "tsc: watch - tsconfig.json"."group": {
        "kind": "build"."isDefault": true
      },
      "isBackground": true."presentation": {
        "reveal": "never"}}}]Copy the code

Explanation:

  • "type": User-defined task type
  • "tsconfig": defines the TSConfig configuration file built by TS
  • "option": option, select TSC’s automatic compilation mode for listening to file changes.
  • "problemMatcher": Error matcher select that of TS.
  • "label": Task name.
  • "group": Defines which execution group this task belongs to, compile or test
    • "kind": Sets it to the compilation group.
    • "isDefault": Set as the default task, which can be invoked by default.
  • "isBackground": Does not wait for the end of a background task.
  • "presentation": Configures the panel that displays the output of a task and reads its input.
    • "reveal": No display is displayed during execution.

.vscode/launch.json

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0"."configurations": [{"type": "node"."request": "launch"."name": "Launch Program"."skipFiles": ["<node_internals>/**"]."program": "${workspaceFolder}/dist/index.js"."outFiles": ["${workspaceFolder}/**/*.js"]."preLaunchTask": "${defaultBuildTask}"."console": "integratedTerminal"}}]Copy the code

Explanation:

  • "type": Indicates the configuration type
  • "request": Indicates the configured request type
  • "name": Indicates the configuration name
  • "skipFiles": Skips all nodeJS built-in modules
  • "program": Operation entry
  • "outFiles"Where to find the generated JS file location with sourcemap
  • "preLaunchTask": The task that runs before debugging, where the default task for the compile group is called
  • "console": The target of the debug run, there are three types as follows:
    • "internalConsole": Built-in console, with REPL, but stdout, stderr output is different from normal terminal.
    • "integratedTerminal": Integrated system terminal, basically the same. Occasionally there are problems with Chinese font display in Ubuntu.
    • "extenalTerminal": Directly starts the system terminal.

tsconfig.json

{
  "target": "ES2017"."outDir": "./out"./* Redirect output structure to the directory. */
  "rootDir": "./src",}Copy the code

Explanation:

  • "target": For better debug stack tracing, TS compilation targets should be selected above ES2017 that support native asynchrony. Otherwise, the compiled code stack can change a lot and get messy.
  • "outDir": Output directory
  • "rootDir": Input directory

reference

  1. Debugging in Visual Studio Code