How to set up Angular code coverage in VS Code

In less than 30 seconds.

Here’s how to configure code coverage to discover which chunks of your Angular application are being tested.

Three.

Two.

One.

GO!

1. Change the angular.json

Open the angular.json file in the root folder of your Angular project.

Scroll to the test section and add the codeCoverage: true line.

Like this.

"test": {
   "builder": "@angular-devkit/build-angular:karma",
   "options": {
      ...
      "codeCoverage": true
   }
},

Now, when you restart the Angular testing process, you’ll see a new folder in your project called coverage. This is the code coverage report for your Angular application.

2. Set up the code coverage report in Visual Studio Code.

So now that we’ve got our code coverage reports generated, how do we show them?

Well, there’s an extension that will do this for us. It’s called Coverage Gutters.