Keeping JavaScript/TypeScript projects up-to-date can be a challenge, especially when it’s time to upgrade a bunch of npm packages or adopt the latest frameworks. We’ve heard from many JS/TS developers that modernizing an older app (upgrading dependencies, fixing breaking changes, etc.) is often tedious and time-consuming. To help with this, we’re excited to introduce the JavaScript/TypeScript Modernizer, a new AI-assisted tool in Visual Studio Code. This Modernizer uses GitHub Copilot under the hood to upgrade your JavaScript or TypeScript apps, guiding you through code updates and package upgrades step by step. It’s like having an AI pair programmer dedicated to updating your project, helping reduce the manual effort and potential errors during upgrades.
What does the JS/TS Modernizer do? In a nutshell, it analyzes your project (looking at files like package.json), suggests an upgrade plan, and then automatically updates your npm packages to their latest versions. As it upgrades libraries, it also helps apply any necessary code changes to accommodate breaking changes or new APIs. All of this happens through an interactive Copilot Chat experience in VS Code. The tool will walk you through the changes and ask you questions or confirmation if needed, guiding you through each stage of the process (from updating dependencies to fixing code). The goal is to simplify modernization by letting the AI do the heavy lifting (updating files, running installs, suggesting code fixes) while you supervise and approve the changes. This means you can upgrade to modern JavaScript/TypeScript practices and latest packages much faster and with more confidence.
Download the extension
The JS/TS Modernizer is a part of the preview version of the GitHub Copilot App Modernization VS Code Extension when installed in VS Code. Install it with the link below.
As we improve the JS/TS Modernizer we will bring it to the release version of VS Code.
Getting Set Up
Before you can use the JS/TS Modernizer, you’ll need to make sure a few things are ready:
- Node.js and npm are installed – You probably already have Node/npm installed but if not, install them from npmjs. The modernization process will invoke Node/npm commands under the hood.
- GitHub Copilot access in VS Code – The Modernizer leverages GitHub Copilot, so you must be signed in with an account that has Copilot enabled in VS Code. If you haven’t set up Copilot in VS Code yet, follow the Set up GitHub Copilot in VS Code guide to sign in. (If you don’t have a subscription, GitHub Copilot Free may be available.)
- Install the GitHub Copilot App Modernization (Preview) extension – The JS/TS Modernizer is part of the preview version of the GitHub Copilot app modernization extension for VS Code. You can download and install this extension from the VS Code Marketplace. Once installed, Visual Studio Code will have a new “GitHub Copilot App Modernization” view that we’ll use in the steps below.
- Enable the experimental Modernizer setting – Because the JavaScript/TypeScript modernization feature is in preview, you need to explicitly enable it in VS Code’s settings. Open your VS Code settings (you can use File > Preferences > Settings (JSON) to edit the JSON directly. Then add the following line to your settings JSON file
{
"appmod.experimental.task.typescript.upgrade": true
}- This flag tells the extension that you want to turn on the JavaScript/TypeScript upgrade capabilities.
- After saving this setting, restart VS Code to ensure the change takes effect.
Once you have Node.js, Copilot, and the extension set up (and the feature flag enabled), you’re ready to modernize your first project!
Modernizing a JS/TS App: Step-by-Step
Using the JS/TS Modernizer is straightforward. Let’s walk through the process:
- Open your project in VS Code. In VS Code, open the folder containing your JavaScript or TypeScript application. Make sure this folder contains a package.json file with your project’s dependencies (the tool uses this to know what to upgrade). The tool will not create any branches or commits. You may want to switch to a different branch at this time.
- Open the GitHub Copilot app modernization panel. In the VS Code Activity Bar (the sidebar on the left), click the GitHub Copilot App Modernization icon/pane. This is the panel provided by the extension where modernization tasks are launched. (If you just installed the extension, it might already be visible; it typically looks like a Copilot or upgrade icon on the left.)
- Click Upgrade npm Packages. In the Copilot app modernization panel, you should see a button labeled “Upgrade npm Packages”. Click this button to start the modernization process for your TS/JS app. (If you don’t see this button, double-check that your workspace has a package.json, the tool shows this option only when a package.json is detected.)
