Learn the smart way of building TypeScript in VS Code!

Problem

TypeScript and VSCode are two of my favourite tools, but they seriously lack advanced out of the box functionality that you might expect with something like Visual Studio and C#.

You might have learnt how to quickly run and debug already using F5, but how do you quickly build mono repo applications and be able to see problems across the entire application, not just the files you have open?

Solution

Create a tasks.json file in your .vscode folder in the root directory and add the following code:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Build",
      "type": "shell",
      "command": "npm run build",
      "presentation": {
        "reveal": "never",
        "echo": false,
        "focus": true,
        "panel": "dedicated"
      },
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "problemMatcher": "$tsc-watch"
    }
  ]
}

You can now use the shortcut. ⌘+⇧+b to run this task quickly and it will build your code and display all the problems you have in the problem panel:

As an aside, I prefer to view problems as a table rather than a tree. It's easier for me conceptually to move through the problems like a list.

You can now easily see if some refactoring you have done has broken anything across your application. This requires npm run build to run ts, next build, etc., across your repo, and you must have already set up your TS config.

A couple of other things this task will do:

• focus on the build so you don't keep hitting that shortcut and wondering what is happening.
• use the same build terminal rather than keep creating new ones (messy) or using an existing one (confusing).