We will be undergoing planned maintenance on January 16th, 2026 at 1:00pm UTC. Please make sure to save your work.

baseline-vscode

The VS Code assistant that keeps your web code future-proof instant Baseline diagnostics, MDN hovers, and smart Quick Fixes, all inside your editor.

Comment

Inspiration

As web APIs evolve faster than ever, developers often ship features that aren’t yet part of the Baseline standard causing hidden compatibility issues across browsers. I wanted a tool that could catch these pitfalls early, directly inside VS Code, without leaving the editor or checking external sites.

What it does

Baseline Assistant brings official Baseline compatibility data, MDN docs, and web-features intelligence into VS Code. It highlights risky or non-Baseline APIs, provides real-time hover insights, and even suggests safe Quick Fixes wrapping CSS rules in @supports, adding guards for JS APIs, or inserting fallbacks. Developers can also export full compatibility reports for their projects.

How I built it

I built a VS Code extension in TypeScript, powered by the official Baseline dataset, web-features, and MDN browser-compat-data. The engine parses JS, TS, CSS, and HTML files, matches patterns from the datasets, and displays diagnostics, CodeLens hints, and Quick Fixes. The extension architecture was designed for speed and safety: local caching, debounce scanning, and fully offline operation. Packaging was done via @vscode/vsce, ensuring a clean .vsix build for submission.

Challenges we ran into

Integrating multiple data sources (Baseline, MDN, web-features) consistently inside a live VS Code analysis loop was tricky. We also faced strict packaging rules — balancing .vscodeignore and files for VSCE, dependency sync issues with npm ci, and real-time performance in large projects. But each challenge helped us refine the design toward a stable, production-ready tool.

Accomplishments I'm proud of

  • Fully functional VS Code extension with real-time diagnostics and Quick Fixes.
  • MDN hover integration with instant documentation links.
  • JSON and Markdown report export directly from the Command Palette.
  • Lightweight

Polished README and demo showcasing real developer value.

What we learned

We deepened our understanding of VS Code’s extension API, data merging between multiple compatibility sources, and cross-language static analysis. We also learned how to optimize developer feedback loops making the tool fast, transparent, and genuinely useful without clutter.

What's next for baseline-vscode

The next steps include adding JavaScript Quick Fixes, richer workspace dashboards, and full unit test coverage. We also plan to release it on the VS Code Marketplace and integrate continuous data updates from MDN and Baseline automatically. Ultimately, we want Baseline Assistant to become a default part of every modern web developer’s toolkit helping the web move forward safely.

Built With

  • baseline
  • browserslist
  • eslint
  • json
  • mdn-docs
  • mdn/browser-compat-data
  • node.js
  • typescript
  • typescript-eslint
  • vs-code-api
  • vsce
  • web-features
Share this project:

Updates