Baseline Shift: Your Intelligent Code Modernization Advisor

Inspiration

As developers, we know the biggest barrier to modernizing a codebase isn't a lack of knowledge, but the inertia of existing code. Manually auditing a large project for small upgrades (like changing indexOf to .includes) is tedious, time-consuming, and rarely prioritized. We were inspired to build a tool that solves this problem by making the "modern way" the "easiest way." We wanted to transform the Baseline dataset from a passive reference into an active, intelligent tool that accelerates the adoption of modern features by automating the upgrade process itself.

What it does

Baseline Shift is a VS Code extension that analyzes your code in real-time and provides proactive suggestions and automated refactoring for code modernization.

• Finds Legacy Patterns: Using Abstract Syntax Trees (AST) for both JavaScript and CSS, it accurately identifies outdated code patterns, such as array.indexOf(item) !== -1 for JS or float properties for layout in CSS.
• Validates Against Baseline: Before showing any suggestion, it queries a local copy of the web-features data package to guarantee that the modern alternative (e.g., array-includes or flexbox) is a fully supported Baseline feature. This makes its advice 100% trustworthy.
• Provides Automated Quick Fixes: For JavaScript, it doesn't just show a warning—it integrates with the VS Code "Quick Fix" API to offer a single-click lightbulb action that automatically refactors the legacy code into its modern equivalent.
• Offers Intelligent Suggestions: For CSS, where layouts are more complex, it provides informative hints that guide the developer toward better, Baseline-supported alternatives like Flexbox or Grid.

How we built it

This project was built from scratch by a solo developer, relying exclusively on free-tier services and open-source libraries.

• Platform: It's a VS Code extension built with TypeScript.
• Core Logic: It uses @babel/parser to create an AST for JavaScript files and postcss to create an AST for CSS files. This allows for extremely accurate and performant pattern detection without relying on fragile regular expressions.
• Data Integration: On activation, it uses a dynamic import() to asynchronously load the web-features npm package. All diagnostics are gated by a check against this data, ensuring every suggestion is verifiably part of Baseline.
• Editor Integration: It uses the official VS Code API for Diagnostics (to show underlines), HoverProvider (for informational messages), and CodeActionProvider (to power the "Quick Fix" lightbulb).

Challenges we ran into

The biggest challenge was integrating the web-features ECMAScript module into the CommonJS environment of a default VS Code extension. This caused numerous compilation and module resolution errors. We solved this by refactoring our data-loading logic to use a dynamic import() call within an async function. Another significant challenge was discovering that the type definitions within web-features had some incompatibilities with modern TypeScript settings, which we solved by enabling the "skipLibCheck": true compiler option—a standard practice for working with legacy-typed dependencies.

Accomplishments that we're proud of

We are incredibly proud of building a tool that goes beyond just displaying data. We successfully turned the Baseline dataset into the rulebook for an intelligent refactoring engine. The fact that it performs this analysis in real-time and offers a seamless, one-click fix is a huge accomplishment and a perfect demonstration of a truly useful developer tool.

What we learned

We learned the immense power of Abstract Syntax Trees for static code analysis and the critical importance of robust module compatibility in modern TypeScript development. Most importantly, we learned that a small, focused tool that solves a frequent, nagging pain point can have a much larger impact than a sprawling application with dozens of features.

What's next for Baseline Shift

Baseline Shift is built to be extensible. The next step is to formalize the "rule" system and open it up to the community. We envision a future where developers can easily contribute new modernization patterns, creating a comprehensive, crowd-sourced tool for automatically eliminating tech debt and keeping the web's codebase modern, fast, and secure.```

Built With

• babel/parser
• git
• github
• javascript
• node.js
• npm
• postcss
• typescript
• vs-code-extension-api
• web-features