🌐 Baseline Lens

Real-time web feature compatibility checking with Baseline data directly in VS Code

Stop context-switching to MDN and CanIUse. Baseline Lens brings Baseline compatibility data directly into your development workflow for CSS, JavaScript, HTML, React, Vue, and Svelte projects, helping you make informed decisions about web feature adoption without leaving your IDE.

✨ Features

• 🔍 Real-time Analysis: Detects modern web features in CSS, JavaScript, HTML, React, Vue, and Svelte as you type
• 📊 Inline Indicators: Visual compatibility status (✅ Widely available, ⚠ Newly available, 🚫 Limited support)
• 💡 Smart Tooltips: Hover for detailed browser support breakdown and MDN links
• 🚨 Diagnostics: Integration with VS Code Problems panel for comprehensive issue tracking
• 📋 Project Reports: Generate compatibility reports for entire projects in JSON or Markdown
• 🔧 Team Configuration: Share compatibility standards across your team
• 🎯 Smart Suggestions: Get fallback recommendations and alternative approaches
• ⚡ Performance Optimized: Lightweight, local analysis with sub-100ms response times

🚀 Supercharge with CLI Integration

Take your workflow to the next level by combining the VS Code extension with the Baseline Lens CLI:

Extension Only

• ✅ Real-time analysis as you type
• ✅ Inline indicators and hover tooltips
• ✅ Problems panel integration
• ✅ Project reports

Extension + CLI = Supercharged! 🚀

• ✅ Everything above, plus:
• 🔗 Git Hooks: Automatic compatibility checking on commits
• ⚙️ CI/CD Setup: Generate GitHub Actions, GitLab CI, Azure Pipelines configs
• 🧠 Smart Config: Auto-detect React/Vue/Angular and generate optimal settings
• 📊 Project Analysis: Comprehensive project-wide compatibility reports
• 🔄 Team Workflows: Shared configuration and automated setup

# Supercharge your setup
npm install -g baseline-lens-cli
# Extension automatically detects CLI and unlocks enhanced features!

📖 Complete CLI Integration Guide

🚀 Quick Start

Installation

1. From VS Code Marketplace (Recommended)

   • Open VS Code
   • Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
   • Search for "Baseline Lens"
   • Click Install

2. From Command Line

   code --install-extension baseline-lens.baseline-lens

3. Manual Installation

   • Download the .vsix file from releases
   • Run code --install-extension baseline-lens-x.x.x.vsix

First Steps

1. Open any web project with CSS, JavaScript, HTML, React, Vue, or Svelte files
2. Start coding - Baseline Lens automatically activates and begins analysis
3. Check Problems panel - View compatibility issues (enabled by default)
4. Hover for details - Get browser support breakdown and MDN links
5. Enable indicators - Use Ctrl+Shift+B I to show ✅ ⚠ 🚫 symbols in editor

📖 Usage

Inline Compatibility Indicators

Baseline Lens shows real-time compatibility status as you code:

/* ✅ Widely available - safe to use */
.container {
  display: flex;
  gap: 1rem;
}

/* ⚠ Newly available - use with caution */
.card {
  container-type: inline-size;
}

/* 🚫 Limited support - needs fallback */
.element:has(.child) {
  color: red;
}

Hover Information

Hover over any indicator to see:

• Browser support breakdown with version numbers
• Baseline status and availability timeline
• MDN documentation links
• Polyfill suggestions when available
• Alternative approaches for limited-support features

Project Reports

Generate comprehensive compatibility reports:

1. Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
2. Run "Baseline Lens: Generate Report"
3. Choose output format (JSON or Markdown)
4. Review feature usage and compatibility status

Team Configuration

Share compatibility standards across your team:

// .baseline-lens.json
{
  "supportThreshold": 95,
  "diagnosticSeverity": "warning",
  "customBrowserMatrix": [
    "chrome >= 90",
    "firefox >= 88",
    "safari >= 14"
  ],
  "excludePatterns": [
    "**/vendor/**",
    "**/legacy/**"
  ]
}

⚙️ Configuration

Extension Settings

Access settings via File → Preferences → Settings → Extensions → Baseline Lens:

Setting	Default	Description
enabledFileTypes	["css", "scss", "javascript", "typescript", "javascriptreact", "typescriptreact", "html", "vue", "svelte"]	File types to analyze
supportThreshold	90	Minimum support percentage for "safe" features
showInlineIndicators	false	Show visual indicators in editor
showDiagnostics	true	Show warnings/errors in Problems panel
diagnosticSeverity	"warning"	Severity level for compatibility issues
excludePatterns	["**/node_modules/**"]	Files/folders to exclude from analysis

Workspace Configuration

Create .baseline-lens.json in your project root:

{
  "supportThreshold": 95,
  "diagnosticSeverity": "error",
  "baselineStatusMapping": {
    "widely_available": "info",
    "newly_available": "warning", 
    "limited_availability": "error"
  },
  "enabledAnalyzers": {
    "css": true,
    "javascript": true,
    "html": true
  }
}

🔧 Commands & Shortcuts

Command	Shortcut	Description
Baseline Lens: Generate Report	Ctrl+Shift+B R	Create project-wide compatibility report
Baseline Lens: Refresh Analysis	Ctrl+Shift+B A	Re-analyze current file
Baseline Lens: Toggle Inline Indicators	Ctrl+Shift+B I	Show/hide visual indicators
Baseline Lens: Toggle Diagnostics	-	Show/hide warnings in Problems panel
Baseline Lens: Open Settings	Ctrl+Shift+B S	Open extension settings
Baseline Lens: Export Team Configuration	-	Export current settings for team sharing

🌐 Supported Technologies

Languages & Frameworks

• CSS: Pure CSS, SCSS, Less, CSS-in-JS, styled-components
• JavaScript: ES5+, TypeScript, JSX, Node.js APIs
• HTML: HTML5, Web Components, framework templates
• Frameworks: React (.jsx/.tsx), Vue (.vue), Svelte (.svelte), Angular

Web Features Detected

• CSS: Properties, selectors, at-rules, functions, pseudo-classes
• JavaScript: Web APIs, built-in objects, modern syntax, DOM methods
• HTML: Elements, attributes, input types, ARIA properties

🚀 Performance

• Analysis Speed: <100ms for typical files
• Memory Usage: <50MB for large projects (1000+ files)
• Startup Time: <2 seconds extension activation
• File Size Limit: 10MB per file (configurable)

🤝 Contributing

We welcome contributions! See our Contributing Guide for details.

Development Setup

# Clone repository
git clone https://github.com/kwesinavilot/baseline-lens.git
cd baseline-lens

# Install dependencies
npm install

# Start development
npm run watch

# Run tests
npm test

# Package extension
npm run package

📚 Documentation

• User Guide - Comprehensive usage documentation
• CLI Integration Guide - Supercharge your workflow with CLI
• Configuration Guide - Detailed configuration options
• API Documentation - Extension API reference
• Architecture Guide - Technical implementation details
• Troubleshooting - Common issues and solutions

🐛 Issues & Support

• Bug Reports: GitHub Issues
• Feature Requests: GitHub Discussions
• Documentation: Wiki

📄 License

MIT License - see LICENSE file for details.

🙏 Acknowledgments

• Baseline - Web platform compatibility standard
• web-features - Compatibility data source
• VS Code Extension API - Platform foundation

---

Made with ❤️ for the web development community