Introducing the AI-Powered JavaScript/TypeScript Modernizer in VS Code

Keeping JavaScript and TypeScript projects updated can be challenging, particularly when faced with numerous npm package upgrades or adopting the latest framework versions. Many developers find modernizing older applications—involving dependency upgrades and fixing breaking changes—to be tedious and time-consuming.

To address this, we are excited to introduce the JavaScript/TypeScript Modernizer, a new AI-assisted tool integrated into Visual Studio Code. This Modernizer leverages GitHub Copilot to streamline the upgrade process for your JavaScript or TypeScript applications, guiding you through essential code updates and package enhancements step by step. It acts as an AI pair programmer, dedicated to project updates, significantly reducing manual effort and potential errors during upgrades.

What the JS/TS Modernizer Does

The Modernizer analyzes your project, including package.json files, to suggest an optimal upgrade plan. It then automatically updates your npm packages to their latest versions. As libraries are upgraded, the tool also assists in applying necessary code changes to accommodate breaking changes or new APIs.

This entire process unfolds through an interactive Copilot Chat experience within VS Code. The tool presents changes, asks questions, and seeks confirmation, guiding you through each stage from dependency updates to code fixes. The aim is to simplify modernization by allowing AI to handle the heavy lifting—such as updating files, running installs, and suggesting code fixes—while you supervise and approve. This enables faster and more confident adoption of modern JavaScript/TypeScript practices and the latest packages.

Download the Extension

The JS/TS Modernizer is part of the preview version of the GitHub Copilot App Modernization VS Code Extension. Install it from the VS Code Marketplace. As we refine the JS/TS Modernizer, it will eventually be incorporated into the release version of VS Code.

Getting Set Up

Before utilizing the JS/TS Modernizer, ensure the following prerequisites are met:

• Node.js and npm are installed: Most developers already have Node.js and npm; if not, install them from npmjs. The modernization process executes Node/npm commands internally.

• GitHub Copilot access in VS Code: The Modernizer relies on GitHub Copilot, so you must be signed in with an account that has Copilot enabled in VS Code. Follow the Set up GitHub Copilot in VS Code guide if you haven't configured it yet. (GitHub Copilot Free may be available without a subscription).

• Install the GitHub Copilot App Modernization (Preview) extension: This extension can be downloaded from the VS Code Marketplace. Upon installation, a new "GitHub Copilot App Modernization" view will appear in Visual Studio Code.

• Enable the experimental Modernizer setting: Since this feature is in preview, it must be explicitly enabled. Open your VS Code settings (e.g., File > Preferences > Settings (JSON)) and add the following line to your settings JSON file:

  {
      "appmod.experimental.task.typescript.upgrade": true
  }
  

  This flag activates the JavaScript/TypeScript upgrade capabilities. After saving, restart VS Code for the change to take effect.

Once Node.js, Copilot, the extension, and the feature flag are configured, you are ready to modernize your first project.

Modernizing a JS/TS App: Step-by-Step

Using the JS/TS Modernizer is straightforward:

1. Open your project in VS Code: Open the folder containing your JavaScript or TypeScript application. Ensure a package.json file with your project’s dependencies is present, as the tool uses this for upgrades. The tool does not create branches or commits, so you may wish to switch to a different branch beforehand.
2. Open the GitHub Copilot app modernization panel: In the VS Code Activity Bar (left sidebar), click the GitHub Copilot App Modernization icon. This panel, provided by the extension, is where modernization tasks are initiated.
3. Click "Upgrade npm Packages": Within the Copilot app modernization panel, locate and click the "Upgrade npm Packages" button. This starts the modernization process. (If the button is not visible, verify that your workspace contains a package.json file).
4. Follow the Copilot chat prompts: Clicking "Upgrade" initiates the modernization workflow. GitHub Copilot Chat will open (typically on the right of VS Code), and the Copilot modernization agent will analyze your project and propose an upgrade plan. It will identify outdated packages, update package.json with new versions, run npm install (or npm update), and suggest required code changes. Messages in the chat will explain the process, and the agent may ask questions, allowing you to guide it through responses.

What Happens Behind the Scenes?

The Copilot modernization agent iteratively performs a series of AI-driven upgrade tasks. It identifies and updates outdated dependencies, then resolves any resulting issues. For example, if a new library version alters an API, the agent (via Copilot) can suggest code modifications to correct its usage.

This iterative loop—analyze, change, verify (e.g., run a build or check for errors), and repeat—occurs within the chat. The extension uses Copilot’s "agent mode" to orchestrate these steps, explaining each action (e.g., "Upgrading package X from v1 to v2," "Fixing import statements for updated API"). This provides a guided upgrade experience, with you retaining control to intervene via chat if necessary. The Modernizer continues until it deems the upgrade complete, for instance, when all packages are updated and no obvious errors remain.

Review and Finalize Changes

After the modernization run, thoroughly review the changes made to your workspace files (e.g., package.json and source files). Inspect the diffs using VS Code’s source control view. No changes are auto-committed; you have full control to accept or adjust them. Run your build and tests to ensure everything functions correctly. The Copilot chat may also summarize actions taken or suggest follow-up steps. Once satisfied, you can commit the updated code, having modernized your application with significantly less manual effort.

Known Issues and Tips

As of this preview release, consider the following:

• One project at a time: The Modernizer currently targets only one JS/TS project if your workspace contains multiple (e.g., a monorepo). For now, it’s best to open and upgrade one project folder at a time. Multi-project workspace support may improve in future updates.
• Experimental feature: The JS/TS Modernizer is still in preview, undergoing active refinement. You may encounter minor issues or limitations with complex applications. If the tool gets stuck or behaves unexpectedly, please provide feedback.

Providing Feedback

Your feedback on bugs or improvement suggestions is highly valued. Please email webtoolsoutreach@microsoft.com with detailed descriptions of any issues. Your input is crucial for enhancing the Modernizer’s algorithms and coverage.

Try It Out Today

The JavaScript/TypeScript Modernizer saves time and eliminates the tediousness of manual upgrades. Instead of solely sifting through release notes and fixing broken imports, you gain an AI assistant to handle much of the work. This tool is part of our broader initiative to deliver GitHub Copilot-powered modernization tools to developers, and we are keen to expand these capabilities based on your input.

Ready to modernize your app? Install the GitHub Copilot App Modernization (Preview) extension in VS Code, enable the JS/TS Modernizer as described, and test it on one of your projects. We hope it proves invaluable for keeping your applications current.