Recently I needed to do an extensive refactoring in a big Angular project. That was the kind of refactoring that cannot be easily done in a automated way and I needed to rely on the TypeScript compiler to find errors caused by my changes, so I needed to do that loop when you make changes, run the compilation, see what breaks, fix it, repeat.

Needless to say that it wasn't a very efficient workflow as I needed to jump between the editor and command line all the time. Navigation from errors in the console to the code also wasn't convenient. It seemed like there must be a better way to do this, so I went searching and quickly found this feature request for VS Code: Feature Request: Show all errors and warnings in project for all files, not just opened ones

At the time of this writing, the feature hasn't been added to VS Code yet, however there were some nice workarounds mentioned, like this one, which I ended up using: https://github.com/Microsoft/vscode/issues/13953#issuecomment-366306884

So in this post I wanted to summarise how exactly I set up my VS Code for showing me the errors in the entire project as well as how to navigate quickly between files and the exact locations of the errors.

First, as mentioned in the GitHub comment liked above, we need to set up a task in VS Code that we will run to compile our project using tsc (TypeScript compiler). In order to do that, open tasks.json file (located in .vscode folder in the root of the project) and add the following task definition:

{
  "label": "tsc",
  "type": "shell",
  "command": "./node_modules/.bin/tsc",
  "args": ["--noEmit"],
  "presentation": {
      "reveal":"never",
      "echo": false,
      "focus": false,
      "panel": "dedicated"
  },
  "problemMatcher": "$tsc-watch"
}

There are a couple of differences compared to the task definition from the comment in the GitHub issue above: I didn't specify --watch argument because I didn't want the TypeScript compiler always be running in the background, I just wanted to find all the errors in the project when I need them. Feel free to add the --watch flag ("args": ["--noEmit", "--watch"]) if you want continuous compilation. I also didn't make this task the default build task (the "group" property) because I have another default build task in my project.

Next, in order to easily run this task using a keyboard shortcut, I created a custom key binding (in my case I chose ALT+SHIFT+B). In order to create such keybinding, go to File -> Preferences -> Keyboard Shortcuts, then in the opened window, click keybindings.json link at the top, which will open that file in the editor:

Then add the following item to the array of custom keybindings:

{
  "key": "alt+shift+b",
  "command": "workbench.action.tasks.runTask",
  "args": "tsc"
},

Now, when you press ALT+SHIFT+B it should start our task in a Terminal window. Once TypeScript is done compiling you should see all the errors (or a lack thereof) in the Problems tab:

That is pretty much it. One additional thing to note is that VS Code also has a convenient command for jumping directly to the line in source code where the next problem is. By default, it has F8 key assigned to it but, like any other keyboard shortcut, it can be changed, which I did (I assigned ALT+END). To check what keyboard shortcut is assigned by default or change it, go to File -> Preferences -> Keyboard Shortcuts and search for "go to next problem in files":

Now I can press ALT+SHIFT+B, wait for TypeScript to finish the compilation and then start pressing ALT+END to navigate to the errors and fix them one by one.

Hopefully, in the near future this type of project-wide type checking will be the default behaviour in VS Code for TypeScript projects, but until then this seems to be the closest alternative.

That's it, I hope you find this tip useful.