vscode
vscode copied to clipboard
Coverage Reporting
Is your feature request related to a problem? Please describe.
I run unit tests through the extension, and would like to also run coverage reports in it somehow. At the moment, I run vitest run --coverage in the terminal
Describe the solution you'd like At first a button that will run the above terminal command for me.
Long term, I'd like to be able to show a panel/tab that has lines covered/uncovered, similar to other IDE's (Jetbrains example picture below).
Describe alternatives you've considered None I can think of, this is just a nice to have really. Happy to continue with my current method if you want to keep the extension purely unit test based.
Additional context I'm new to open source, but would be keen to give an implementation of this a shot! If you think it's worthwhile, I can look at submitting a PR.
In the first instance, I'd probably just try to have a button that checks to see if a coverage reporter is installed, and then run it in the terminal. If that goes well, then maybe look at getting fancier with displaying the output.
thanks,
Gavin
Jest VS Code extension has this - if you're thinking of starting this it may be worth looking at their implementation for inspiration: https://github.com/jest-community/vscode-jest
Yes +1 for this. I love using this Jest VS Code extension because of the code coverage feature. With the toggle coverage command you can see the coverage show up with lines red and yellow (or whatever color you set) over the uncovered and partially covered lines in the file. It's great!
From here:

I'm able to achieve this using this extension: https://marketplace.visualstudio.com/items?itemName=ryanluker.vscode-coverage-gutters
You'll have to add "vitest.commandLine": "npx vitest --coverage" to your workspace settings and configure Vitest to use Instabul with the lcov reporter.
.vscode/extensions.json
{
"recommendations": [
"zixuanchen.vitest-explorer",
"ryanluker.vscode-coverage-gutters"
]
}
.vscode/settings.json
{
"vitest.enable": true,
"vitest.commandLine": "npx vitest --coverage"
}
vitest.config.ts
import { defineConfig } from "vitest/config";
export default defineConfig({
test: {
coverage: {
provider: "istanbul",
reporter: [
"text", // For the terminal
"lcov", // For the VSCode extension and browser
],
},
},
});
The jest one is way better than coverage gutters, and it also show the summary on the top of the target file. It'd be perfect if we can port that to vitest. But at the meantime, coverage gutters does work for the purpose
FYI VS Code has finalized an 'official' test coverage API: https://github.com/microsoft/vscode/issues/123713
Coverage is now supported in https://github.com/vitest-dev/vscode/releases/tag/v0.5.14
This requires the latest Visual Studio Code 1.88.