Skip to content
| Marketplace
Sign in
Visual Studio Code>Visualization>Test Coverage ExplorerNew to Visual Studio Code? Get it now.
Test Coverage Explorer

Test Coverage Explorer

wmejia

|
12 installs
| (0) | Free
Visualize code coverage in a hierarchical tree view with file and directory coverage percentages. Microsoft-style coverage highlighting.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

🎯 Test Coverage Explorer

VS Code Marketplace License: MIT Version

Visualize your code coverage with Microsoft-style highlighting! 🚀

Transform your testing workflow with interactive coverage visualization directly in VS Code. Beautiful tree views, Microsoft-style coverage decorations, and real-time updates for Go and JavaScript/TypeScript projects.

✨ Key Features

  • 🌳 Hierarchical Tree View - Navigate coverage data like your file explorer
  • 🎨 Microsoft-Style Highlighting - Exact color matching with golang/vscode-go
  • ⚡ Real-time Updates - Auto-refresh when coverage files change
  • 🎯 Smart Highlighting - Visual coverage indicators with hit counts
  • 🔧 Multi-format Support - Go coverage.out and JavaScript LCOV formats

🚀 Supported Languages

Language Format File Pattern Example
Go coverage.out **/coverage.out coverage.out
JavaScript/TypeScript LCOV **/lcov.info coverage/lcov.info
JavaScript/TypeScript JSON **/coverage.json coverage/coverage.json

📦 Quick Start

1. Install Extension

code --install-extension wmejia.test-coverage-explorer

2. Generate Coverage

# Go
go test -coverprofile=coverage.out ./...

# JavaScript with Jest
npm test -- --coverage

# JavaScript with NYC
nyc npm test

3. Explore Coverage

Open VS Code and look for the "TEST COVERAGE" panel in Explorer sidebar.

🎨 Color Customization

Personalize your coverage colors in VS Code settings:

{
  "testCoverage.colors.covered": "rgba(76, 175, 80, 0.2)",
  "testCoverage.colors.uncovered": "rgba(244, 67, 54, 0.2)",
  "testCoverage.colors.partial": "rgba(255, 152, 0, 0.2)"
}

Popular Themes:

  • Subtle: Use 0.1 alpha for light highlighting
  • High Contrast: Use solid hex colors like #4CAF5050
  • Dark Theme: Use brighter colors with lower alpha

⚙️ Configuration

Setting Default Description
testCoverage.coverageFiles ["**/coverage.out", "**/lcov.info", "**/coverage.json"] Coverage file patterns
testCoverage.showInlineCoverage true Show coverage decorations
testCoverage.showHitCounts true Show execution counts
testCoverage.colors.covered rgba(76, 175, 80, 0.2) Covered lines color
testCoverage.colors.uncovered rgba(244, 67, 54, 0.2) Uncovered lines color

🎮 Commands

  • Refresh Coverage - Manual refresh
  • Run All Tests - Execute tests and refresh
  • Toggle Highlights - Show/hide decorations
  • Toggle Hit Counts - Show/hide execution counts

📊 Coverage Indicators

  • 🟢 Green (≥80%) - Excellent coverage
  • 🟡 Yellow (50-79%) - Good coverage
  • 🔴 Red (<50%) - Needs improvement
  • ⚪ Gray (0%) - No coverage

💡 Tips

  1. Enable auto-refresh for real-time feedback
  2. Customize colors to match your theme
  3. Use hit counts to identify hot paths
  4. Focus on critical code rather than 100% coverage

🐛 Troubleshooting

Coverage not showing?

  • Verify coverage files exist in workspace
  • Check file patterns in settings
  • Look for errors in Developer Console

Colors not updating?

  • Settings update automatically
  • Try "Refresh Coverage" command if needed

📋 Requirements

  • VS Code 1.60.0+
  • Coverage files in supported formats

🤝 Contributing

Contributions welcome! See our GitHub repository for guidelines.

📄 License

MIT License - see LICENSE file.

👨‍💻 Author

William Mejia - @wmejia


Happy testing! 🎯

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft