How to: VSCode TS checks working project-wide & real-time

Update: I've created a VSCode extension that works even better! Get it here!

Being a coder I have never limited myself to one language, one framework and I didn’t want to have a milion code editors each specialised in different thing so I have always used VSCode. Keeping the theme, the look and feel of the editor with power of an IDE one plugin away no matter which language I want to jump into is the key factor that guided my choice.

However, I have tried JetBrains’ WebStorm before and just couldn’t get rid of one huge thing haunting me, the project-wide type checking.

The problem

In VSCode the typescript plugin works great but it only checks files that are currently opened in the editor! Other files inside the project are not being checked until opened 😕 Now this is a huge bump, having to run the check manually through console or build the whole app in order to check if one type alternation hasn’t influenced anything else? Madness…

The solution

This is when I decided to research this problem — and there really is no out of the box solution! After trying every way on the internet I have finally pieced together the final solution for this problem:

{
    "version": "2.0.0",
    "tasks": [
      {
        "label": "tsc-watch project",
        "type": "typescript",
        "tsconfig": "tsconfig.json",
        "option": "watch",
        "problemMatcher": ["$tsc-watch"],
        "group": "build",
        "runOptions": {
          "runOn": "folderOpen"
        },
        "presentation": { "reveal": "never" }
      }
    ]
  }

This is an automated task for VSCode — it runs when the project folder is opened and keeps on running, checking the whole repo real-time based on the changes you make! Finally! 🎉

How to use it?

Update: Just get this extension, it does everything for you.

• Put it in .vscode/tasks.json

• Re-open the project folder and accept the popup asking whether Automatic Folder Tasks should be allowed
• If the popup isn’t there do: ⌘⇧p -> Manage Automatic Tasks in Folder -> Allow Automatic Tasks in Folder

🎉 All done! Enjoy your VSCode with TypeScript better than ever! 🎉