BaseLine Auto Linter

Baseline Auto-Linter flags unsupported web features in real time using official Baseline data — helping developers write browser-safe, modern code effortlessly.

Comment 15

Inspiration

Every web developer has faced that uncertainty — you add a new CSS property or JavaScript API and wonder, “Will this break in Safari or Firefox?” Constantly checking MDN or caniuse slows development. We wanted a single tool that gives instant answers inside your editor.

What it does

Baseline Auto-Linter analyzes your HTML, CSS, and JavaScript code using official Baseline data from the W3C. It highlights features that are unsupported or partially supported across browsers — providing clear feedback and fallback suggestions. It’s available as both a web app and a VS Code extension (installable via .vsix from GitHub Releases).

How we built it

  • Frontend: React + TypeScript + Vite + Tailwind + shadcn/ui for a fast and minimal UI.
  • Extension: Built with TypeScript and packaged using VSCE for manual installation.
  • Data: Integrated Baseline compatibility data via the official web-features dataset.
  • Used static analysis to parse code and detect usage of web APIs, CSS properties, and HTML elements.

Challenges we ran into

  • Parsing mixed React + HTML + CSS files accurately without false positives.
  • Managing the Baseline dataset locally and keeping it in sync with web.dev’s latest data.
  • Publishing the VS Code extension without Marketplace access (resolved via GitHub Releases).

Accomplishments that we're proud of

  • Built a working linter that runs both on web and inside VS Code.
  • Integrated real Baseline data successfully for live compatibility insights.
  • Created a simple UX that delivers real-time feedback without interrupting developer flow.

What we learned

  • How Baseline data is structured and how browser compatibility is computed.
  • Packaging and distributing VS Code extensions with VSCE.
  • The importance of usability — real-time, low-friction feedback makes a huge difference.

What's next for Baseline Auto-Linter

  • Add a CLI version for CI/CD pipeline integration.
  • Extend support for frameworks like Vue and Angular.
  • Introduce auto-fix and poly-fill suggestions directly within the IDE.
  • Explore publishing to the VS Code Marketplace once account verification is available.

Built With

  • babel
  • baseline
  • compute-baseline
  • compute-baseline`)
  • css-**frameworks-&-libraries:**-react
  • github
  • html
  • javascript
  • js/react
  • node.js
  • npm-**data-&-apis:**-w3c-webdx-baseline-(`web-features`
  • parser
  • postcss
  • postcss-**tools-&-platforms:**-vsce-(for-packaging-vs-code-extension)
  • shadcn/ui
  • tailwind-css
  • typescript
  • vite
  • web-features
  • web.dev-baseline-dataset-**other-technologies:**-monaco-editor-(for-live-code-editing)
+ 13 more
Share this project:

Updates