DEV Community

Lev Kowalski
Lev Kowalski

Posted on • Edited on

Automatically have typescript compilation errors highlight across your entire VSCode project

By default, you only have TS errors highlight in the file you have open.

Wouldn't it be cool to to have them highlight across the entire project directory tree when they occure during refactorings, or other processes that do sneaky things ?

In order to enable that you have to create a VSCode task and run it.

Create a tasks.json file

If you don't already have a .vscode/tasks.json file in your project,
type CMD+Shift+P, and select Tasks: Configure Task
Alt Text
Select Create tasks tasks.json file from template
Alt Text
And finally Others
Alt Text
You now have tasks.json file in your project with a hello world task!

Edits tasks.jon

Open .vscode/tasks.json, and add the following object in the tasks array:

    {
      "label": "ts-scan", // Use the name you want
      "command": "tsc",
      "args": ["-w", "-p", ".", "--noEmit"],
      "isBackground": true,
      "problemMatcher": "$tsc-watch"
    }

Explanation: your task runs the compiler (tsc) in watch mode (-w), using .tsconfig file of your project's directory (-p .). All that is done in dry run mode (--noEmit).
Most importantly, forwarding the errors to $tsc-watch is what is going to allow detected errors to be highlighted in your project!

Note: you can kill two birds with one stone buy passing the actual transpilation command you use in your project like this:

    {
      "label": "yarn build:watch",
      "command": "yarn",
      "args": ["build:watch"],
      "isBackground": true,
      "problemMatcher": "$tsc-watch"
    }

Run the task you just created.

Do CMD+Shift+P and select run task
Alt Text
Select ts-scan
Alt Text
And thats it ! Anything broken will highlight in red, whether the file with problems is open or not.

Demo:

Via a terminal external to VSCode, I renamed file transformations.ts to broken-transformations.ts which will break all the imports of that file.
As expected, all the files that imported transformations.ts light up in red in the file explorer 🚨.
Alt Text

Hope this tip helps! ⭐
Happy coding. 💻

Top comments (0)