ryanluker / vscode-coverage-gutters

Display test coverage generated by lcov and xml - works with many languages

coverage-gutters

Display test coverage generated by lcov or xml in your editor.

Call for Maintainers

Looking for helpful people to assist with bugs, new features or performance improvements.
The project has a full suite of tests and code linting, making it very new contributor friendly.
Take a look at some of the open github issues and see if any catch your eye!
https://github.com/ryanluker/vscode-coverage-gutters/issues

Features

• Supports any language as long as you can generate a lcov style coverage file
• Extensive logging and insight into operations via the output logs
• Multi coverage file support for both xml and lcov
• Coverage caching layer makes for speedy rendering even in large files
• Relative coverage file resolution for those with complex file paths
• Preview coverage reports inside the editor
• Huge amount of workspace settings to customize the features to your liking
• Colour compatibility with light and dark themes
• Custom coverage paths with a hot swapping feature for remote builds

Common Commands

Watch (activated via command palette or shortcut icon on the status bar): Activating watch allows the extension to keep track of coverage changes and update its cache. It also will automatically apply coverage to a file if some exists.

Display (activated via command palette or shortcut key): Displays coverage for the current activated file only, does not update if the coverage files change.

Preview Report (activated via command palette): Shows you a html preview of your coverage reports in your editor.

Officially Supported Languages (Backed by tests ran nightly)

See examples directory on how to setup a project.

• Java
• Multimodule Java
• PHP
• Python
• Nodejs
• Ruby
• DotNet

Tips and Tricks

Using Breakpoints: Currently to both use the extension and code debugging breakpoints, you need to disable the gutter coverage and enable the line coverage via the settings ( coverage-gutters.showGutterCoverage and coverage-gutters.showLineCoverage respectively).

Requirements

• vscode 1.27.0 and up
• macos, linux or windows
• Requires Live Preview extension
  • vscode extension id: ms-vscode.live-server
  • v0.2.12 or higher

Extension Settings

See extension setting options in IDE.

Known Issues

Open Bugs

Release Notes

Changelog

Contribution Guidelines

Guidelines

About the Maintainers

If you are interested in what else we work on, checkout the maintainers below!
https://luker.dev
https://github.com/mattseddon
https://github.com/timagixe
https://www.spodymek.com/
https://www.kayode.tech/
https://huddleco.com.au/

---

Icon made by Dave Gandy from www.flaticon.com is licensed by CC 3.0 BY

vscode-coverage-gutters's Issues

add customizable option for the status bar icon

increment reporter version

Fix changelog link

changelog link should point to github releases (there already is a changelog link in the marketplace)

Add true gutters along side line based

gutters should show up plainly

Add customization options for toggling gutters and line coverage

• allow disabling / enabling of gutters or line coverage

Add bottom status bar icon / button to active watch mode (lcov and editors)

• add the coverage-gutters icon as a status icon in the bottom bar
• hover / click shows the status/stats of the watchers (errors as well?)

Add keybindings to display and remove coverage

https://code.visualstudio.com/docs/extensionAPI/extension-points#_contributeskeybindings

Reword readme to better explain the optional settings

• all settings have sane defaults, this should be mentioned to some degree
• add keywords from readme

Add ability to interpet WSL file paths

I'm using VSCode under Windows, but the actual code runs under Linux, hence the tests etc. also run under Linux (via WSL).

Unfortunately this means that the paths in lcov.info are like /mnt/c/Users/david/proj/myProject/myFile.js and your extension says "no coverage for file" for every file because it probably looks for C:\Users\david\proj\myProject\myFile.js instead.

Would it be possible to automatically convert the path (if it starts with /mnt) so that it can find the file?

first version will simply highlight lines with coverage

investigate code coverage missing on complex lines of code

Overview:

when making function calls then assigning to a variable via await async function and see that there is no coverage (ts)

Notes:

• could not reproduce locally with javascript and complex function returns
• debugged indicators function when applying coverage to more complex typescript await code. -
• Saw the issue then which produced lcov lines that looked like they were missing entries for the function calls before the await.
• most likely an istanbul issue or issue related to nyc setup locally (personal) after looking into the lcov.info file and seeing no coverage details for the lines in question (have to be covered as code directly afterwords is covered...)

when activating watch, parse active file for coverage

Auto render coverage when opening a file

• When lcov watch is active, auto render coverage for the file being opened.
• If a file does not have coverage do not display error message (make configurable?) as this may become annoying as you open files that do not have lcov coverage.
• Consider having watch lcov and watch files be seperate actions

Add config watching support

currently vscode must be restarted for settings to take effect

Update dark theme colours

Use relative path compare by default

Relative path compare is a good choice for default true as it rides a good balance between too costly performance wise and needed bridging for WSL users

allow config of lcov name and highlight colours

Update readme to show off new features

• watch and render visible editors
• error feedback on non-watch features

gutter is initiated with a command

Unreliable lcov rendering if more then one lcov file per workspace

Reproduce:

• add more then one lcov
• display coverage
• see that sometimes you get no or incorrect coverage
• watch coverage
• see that sometimes you do not get updates or updated with incorrect coverage

solution:

• add metric to capture occurences
• add check for lcov find > 1

Create simple contribution blurb for the readme

Display extension errors to the user

• currently errors are blackholed to console.log
• consider allowing these to bubble to the extension.ts?

able to read in a lcov file

add tests for gutters, statusbartoggler and config

vscode 1.11.x doesnt seem to properly remove editors from active array

reproduce:

• add coverage to editors
• close editors or navigate away
• regenerate the lcov file
• see warning messages in debug log about editor having been disposed
• no user facing issues other then editor array not being cleaned up

code:

Seems to be a change in the disposal pattern for the editors in the 1.11.x release, when debugging the problem it seems as if the wrong conditional flow is happening for the editors that have been disposed. https://github.com/ryanluker/vscode-coverage-gutters/blob/master/src/gutters.ts#L61

work:

• Find adaptable work around or increment min version to 1.11.x
• (optional) Add metric to capture vscode version

Can't find lcov.info if it's excluded from the VSCode project

Great plugin – now that I got it working!

I spent the first 10 minutes fighting with it - reloading, reinstalling, changing config settings.

Then I realized the problem might be that the lcov.info is in an excluded path. (I exclude my coverage folder so the hundreds of generated HTML files – one per source file – don't clog up my search results)

{
    "files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/CVS": true,
        "**/.DS_Store": true,
        "dist-*/**": true,
        "coverage/**": true
    }
}

I've found a workaround:

        "coverage/{server,shared,client,lcov-report}/**": true

But it would be nice if I didn't have to do this!

Process env method for ga id does not work

• figure out new way of injection ga id key

Cleanup readme and publish 0.1.0

Ability to read relative paths?

A quick question: is it possible to use relative file paths in the LCOV file?

I didn't find any VS Code coverage extension allowing for relative paths, and I'm desperately looking for that, for my development tools to be completely on the server/container side.

Cleanup icon sizing and dave gandy accreditation

• should be flush with the edges
• remove mention of flaticon but leave props to dave (font awesome fame)

"No coverage for file" for projects with coverage

I can use extension with the example project in this repo. But I cannot with my typescript projects that I use istanbul-remap. Here is an example project:

https://github.com/markis/strip-whitespace

Just clone that repo and run npm test then see that coverage gutters reports "No coverage for file" on my source files.

Rendering coverage when the editor does not have a document throws error

Based on GA users are seeing this error in 1.0

Cannot read property 'document' of undefined

related to the below code:

private async loadAndRenderCoverage(textEditor: TextEditor, lcovPath: string): Promise<void> {
        const lcovFile = await this.lcov.load(lcovPath);
        const file = textEditor.document.fileName;
        const coveredLines = await this.indicators.extract(lcovFile, file);
        await this.indicators.renderToTextEditor(coveredLines, textEditor);
    }

    private renderCoverageOnVisible(lcovPath: string) {
        window.visibleTextEditors.forEach(async (editor) => {
            if (!editor) { return; }
            await this.loadAndRenderCoverage(editor, lcovPath);
        });
    }

check for editor.document in the caller should be suffice (should not return error but simple not try to render coverage for a null document)

add metrics to eval overall usage and value created

• lines of coverage rendered
• files with coverage rendered
• have these displayed in the statusbar on hover?
• sendEvent captured

Add GA tracking id as env variable to help release process

• remove metrics from config and customConfig (gathered enough data to know not many use the custom options except altSFCompare, will still support customization though for personal use 😄 )
• add metric for coverage rending
• add process env variable for the GA tracking ID

Use other lcov features to provide enhanced displaying of coverage

possibly use the info below as a starter.
https://ariya.io/2012/12/javascript-code-coverage-with-istanbul

Add alternate ways of displaying and removing coverage from the active editor

• context menu from the editor
• keyboard shortcuts?
• user should be able to decide to enable or disable context menu / keyboard shortcuts from their settings

Move current text to code of conduct and contributing readme's

Add support for rendering "uncovered" lines as red.

I'm currently integrating go coverage with lcov and this extension and it's pretty dope.

Go coverage is slightly different to other coverage systems and only marks "start statements" as covered instead of the "entire statement"

My code coverage (istanbul) UI renders this as a HTML page

Notice how there are some lines that have no hits, like method signatures ( but also, not in screenshot, interface and struct declrations also have 'no coverage' because they are declerations.

It would be really nice if detail.hit === 0 ( aka this statement is not covered ) that we somehow mark that line as "red" or some other color theme in vs code.

This would mean having two renderLines array, one for "covered" and one for "uncovered" and then setting decorations for both types of coverage information.

I find that scanning through a file for "red lines" is a lot easier then scanning through a file for "not highlighted" lines because a lot of the "not highlighted" lines look like this :

Everything in that screenshot is actually covered but it takes some visual processing to double check that.

cleanup readme structure

• show more customization in the feature gifs
• add "buy me a beer" button

Add lcov file watching support

• watch lcov file
• render coverage if file changes

Refactor gutters class to be more testable

Try out DI

Add telemetry to better understand usage and errors

Work:

• use request to build a simple metrics gather / sender
• implement opt out for telemetry setting (already an option in the general IDE settings)
• able to shop around (GA will be free for even large amounts of data)
• https://cloud.google.com/appengine/docs/flexible/nodejs/integrating-with-analytics

Value:

• metrics would allow insight into:
  • what features users are using
  • amount of users taking advantage of the customization options
  • what errors are occurring

Rename project

Gutters -> something else.

Rework gutters file to use dependency injection

gutters file should use DI from extension to allow for ease of testing.

Add shrinkwrap file to reduce extension size

create definition file for lcov-parse

https://github.com/davglass/lcov-parse

setup automatic build system

build system for linux, mac and windows

• travis ci for linux / mac
• appveyor for windows

Give icon a background image of #24381b

create smaller in size gif to reduce package size

externally host and use link possibly instead of packaging with extension