How to always show TypeScript (compilation) errors on a Visual Studio Code project?.md

Question

I would like a way for Visual Studio Code to always show me which TypeScript files in my project has an error. I would like these shown to me on the problems gadget on the bottom status bar, as well as represented with a red font and a red dot in the file explorer view on the left side. How can I achieve this?

Answer

• Make sure you have a tsconfig.json file at the root of your project. The contents of it does not matter, it can be just an empty file. All that matters is that it is present, so that, as far as I can tell, Visual Studio Code will be able to tell that this is a TypeScript project and hence, it will enable the built-in TypeScript extension for the project.
• Press CMDSHIFTp, type "task" and select "Tasks: Run Task".
• Type "watch" and select "tsc: watch - tsconfig.json". That is, we're running a task named tsc: watch, which comes from the tsconfig.json file (where, in reality, it simply comes from the built-in TypeScript extension in Visual Studio Code). After this, TypeScript errors for all files in your project will be shown.

Note that when you run the task for the first time after opening (or reloading) a Visual Studio Code window, it won't work 100% correct. That is, it will report the errors, but if you open a file which contains an error, but then close it, the errors for that file will not be reported anymore. The fix is to simply cause a TypeScript recompilation by editing any TypeScript file in your project. This can be as simple as adding a single whitespace to force recompilation. After you force recompilation, you can remove the added whitespace. After you do that, as far as I can tell, the tsc: watch task will start to work properly. That is, as far as I can tell, even after you open and close a file which contains errors, the errors for that file will still be reported. That is, after you do this workaround, whenever you close a file that contains TypeScript errors, the errors reported for that file will disappear momentarily (like, a split second), but then they will come back right away. Hence:

• Running that tsc: watch task.
• Forcing a TypeScript recompilation only once as a workaround for the issue that is described above.

is the way for TypeScript errors to be always shown in a project.

Before discovering the tsc: watch task that is defined in the built-in TypeScript extension, I tried to manually define a task that would do that as follows:

• Create a directory named .vscode in the project.

• Create a file named tasks.json in it, with the following content:

  {
    "version": "2.0.0",
    "tasks": [
      {
        "label": "Compile TypeScript in Watch Mode",
        "command": "node_modules/.bin/tsc",
        "args": ["--watch"],
        "problemMatcher": "$tsc-watch",
        "isBackground": true
      }
    ]
  }

As far as I remember, this worked well (at least OK) as well, but it is completely unnecessary, since there is already the built-in tsc: watch task, which is provided by the built-in TypeScript extension in Visual Studio Code.

More information