Baseline Lite

A Visual Studio Code extension that integrates Web Platform Baseline data directly into your editor.

Inspiration

As professional web developers, we've all experienced the "Is it safe yet?" friction. Every time a new, highly-anticipated feature—like backdrop-filter or loading="lazy"—is released, we face a mandatory context switch: stop coding, open MDN or Caniuse, check the compatibility table, and then decide if the feature is viable. This continuous cycle of checking external resources is disruptive and slows down feature adoption.

Our inspiration was to eliminate this friction entirely. The Baseline Visual Studio Extension provides the definitive, standardized answer to "Is it safe yet?" The goal of Baseline Lite was to bring that crystal-clear guidance directly into the editor, turning a time-consuming research task into an instantaneous, inline hint. We wanted developers to adopt modern, interoperable features with confidence, knowing instantly which ones are "Newly available" (ready to use with caution) and which are "Limited" (risky for production).

What it does

Baseline Lite is a Visual Studio Code extension that acts as a live linter for web compatibility, using the official Web Platform Baseline data.

It provides instant feedback on CSS properties/values, HTML tags/attributes, and JavaScript/TypeScript Web APIs that are not yet Widely available (i.e., they are 'Limited' or 'Newly available').

Key features: Inline Badges: Displays Baseline: Limited or Baseline: Newly directly at the end of the line where the feature is used.

Problems Panel Integration: Populates the VS Code Problems panel with detailed diagnostics, categorized by severity (Warning for Limited, Info for Newly).
Hover Details: Provides rich tooltips with full feature details and clickable links directly to the corresponding MDN documentation.
Broad Language Coverage: Works across CSS, HTML, JavaScript/TypeScript, and React (JSX/TSX).

This allows developers to see compatibility issues before running any build process or testing in a browser, drastically reducing the risk of shipping code with limited-availability features.

How we built it

The extension is built using TypeScript for robustness and the official VS Code Extension API. Our process focused on robust parsing and efficient data integration:

Data Source Integration: We integrated two essential community datasets:

web-features: Used to map CSS/HTML/JS features to their official Baseline status (Limited, Newly available, or Widely available).
@mdn/browser-compat-data (BCD): Used to retrieve the feature keys, full documentation snippets, and, critically, the correct MDN documentation URLs for quick navigation.

Code Analysis:

For CSS/HTML, we used VS Code's built-in text and document parsing capabilities to identify properties, values, tags, and attributes.
For JavaScript/TypeScript (including React JSX/TSX), we leveraged the acorn parser library. This allowed us to generate an Abstract Syntax Tree (AST) for the code. We then traverse the AST to specifically look for usages of Web APIs (e.g., navigator.clipboard, AbortController) that correspond to our Baseline data.

Decoration and Diagnostics: The core functionality relies on two VS Code API features:

TextEditorDecorationType to render the custom inline "Baseline: Status" badges.
languages.createDiagnosticCollection to populate the Problems panel with our compatibility warnings and information messages.

Challenges we ran into

Parsing Granularity for JS/TS: The biggest challenge was the precise detection of Web APIs in JavaScript. Simply looking for strings is unreliable. We had to implement specific logic using acorn to reliably identify API calls, such as distinguishing a variable named clipboard from the actual navigator.clipboard property access, while also handling method calls like readText() correctly.
Data Schema Mapping: The web-features and BCD schemas are vast and complex. Aligning the feature keys between the Baseline status data and the MDN documentation data to ensure the correct link and description were provided for every finding required careful mapping and validation across the three primary language domains (CSS, HTML, and JS).
Performance in VS Code: Running linter-style diagnostics on large files can be taxing. We had to ensure our parsing and data lookup logic was highly performant, employing lazy-loading and caching strategies to prevent the extension from slowing down the editor, especially when processing file changes.

Accomplishments that we're proud of

Seamless, Cross-Language Integration: Successfully delivering a single, cohesive experience across four distinct file types (CSS, HTML, JS/TS, and JSX/TSX) is a significant achievement.
Actionable Feedback: The decision to use different severity levels (Warning for Limited vs. Info for Newly) transforms the raw data into immediate, actionable advice for the developer, which we believe is the core value proposition.
Configurable Presentation: We provided developers with control over how they view the results (diagnostic, decorations, or both), acknowledging that different developers have different preferences for editor noise.

What we learned

We gained a deep appreciation for the structural complexity of code parsing, particularly the use of ASTs for nuanced feature detection in JavaScript. More importantly, we learned how to efficiently merge and leverage massive, community-driven compatibility datasets (web-features and BCD) within the constrained environment of a VS Code extension. This taught us that powerful tooling can be built by aggregating existing, high-quality data and delivering it at the point of need.

What's next for Baseline Lite

Widely Available Suppression: Add a configuration option to suppress all diagnostics for "Widely available" features, decluttering the view and focusing only on the "Limited" and "Newly" statuses that require developer attention.
Framework-Specific Support: Extend API detection to be more framework-aware, for instance, checking if a feature is safely polyfilled by a popular build tool.
Feature Suggestions/Quick Fixes: Explore offering Quick Fixes (via the VS Code lightbulb) to suggest a common fallback or a polyfill import when a 'Limited' feature is detected.