AI-Powered Modernization: How the JS/TS Modernizer in VS Code Transforms Project Upgrades

Modernizing JavaScript and TypeScript projects is often a daunting task filled with outdated dependencies and the risk of breaking your codebase. Microsoft’s new JavaScript/TypeScript Modernizer Extension for Visual Studio Code brings AI into the mix, streamlining upgrades and making the process accessible for every developer. By leveraging GitHub Copilot, the Modernizer acts as an AI-powered pair programmer, guiding you step-by-step through the entire upgrade journey.

Key Features of the JS/TS Modernizer

The Modernizer offers a host of smart features designed to minimize manual work and maximize productivity.

• Automated analysis of your project dependencies and outdated npm packages
• Step-by-step AI-driven guidance for upgrading packages and adjusting code
• Interactive Copilot Chat workflow for clarity and hands-on control
• Actionable guidance on addressing breaking changes in APIs
• Manual review opportunities before finalizing any updates

This results in fewer upgrade errors and a clearer understanding of all changes made.

Getting Started: What You Need

Before diving into the Modernizer, ensure you have these prerequisites covered:

1. Node.js and npm installed on your system
   
   
2. Signed in to GitHub Copilot in VS Code
   
   
3. The GitHub Copilot App Modernization (Preview) extension installed from the Marketplace
   
   
4. The experimental Modernizer setting enabled by adding "appmod.experimental.task.typescript.upgrade": true Copy to your VS Code settings
   
   
5. VS Code restarted for the changes to take effect

Once set up, you’re ready to let AI assist with your first modernization project.

Modernization Workflow: Step-by-Step

The process is designed to be intuitive and developer-friendly:

1. Open your project folder in VS Code, ensuring it contains a package.json file.
   
   
2. Access the GitHub Copilot App Modernization panel from the sidebar.
   
   
3. Click “Upgrade npm Packages” to kick off the upgrade process.
   
   
4. Interact with Copilot Chat: the AI scans your project, proposes updates, and applies them 
   
   
5. Watch as dependencies are updated, installations are run, and code fixes for breaking changes are suggested, all with clear prompts and the ability to review or modify as needed.
   
   
6. Review all changes via your source control tools and test your build before committing.

This interactive, iterative process ensures you stay in control while benefiting from automation and AI insight.

Limitations and How to Help Improve

Currently, the Modernizer supports only one project at a time. Monorepo users will need to run the upgrade tool for each project folder separately. As this is a preview release, you might run into limitations with particularly complex codebases. Microsoft welcomes feedback and bug reports via email, helping them enhance the tool’s coverage and reliability.

Empowering Developers with AI

The JavaScript/TypeScript Modernizer is part of Microsoft’s larger push to bring AI-powered tools into developers’ daily workflows. Instead of manually hunting for outdated dependencies and deciphering changelogs, you let the Modernizer handle the heavy lifting, freeing you up for more meaningful development tasks and reducing the risk of upgrade failures.

Upgrade Projects with Confidence

Staying up-to-date with JavaScript and TypeScript best practices no longer needs to be overwhelming. The JS/TS Modernizer provides a seamless, AI-driven way to upgrade your projects efficiently and with peace of mind. If you’re ready to modernize your workflow, install the preview extension, enable the Modernizer, and experience how AI can revolutionize your coding process.

Source: Microsoft for Developers Blog – Announcing the JavaScript/TypeScript Modernizer for VS Code