Announcing the JavaScript/TypeScript Modernizer for VS Code

保持 JavaScript/TypeScript 项目与时俱进是一项挑战，尤其是在需要升级大量 npm 包或采用最新框架时。我们听到许多 JS/TS 开发者反馈，现代化一个老旧应用（升级依赖项、修复破坏性变更等）通常繁琐且耗时。为此，我们很高兴地推出 JavaScript/TypeScript Modernizer，这是 Visual Studio Code 中一个由 AI 辅助的新工具。此 Modernizer 在底层使用 GitHub Copilot 来升级您的 JavaScript 或 TypeScript 应用，逐步指导您完成代码更新和包升级。它就像一个专门负责更新项目的 AI 结对程序员，帮助减少升级过程中的手动工作和潜在错误。

JS/TS Modernizer 具体做什么？ 简而言之，它会分析您的项目（查看诸如 package.json 等文件），提出升级计划，然后自动将您的 npm 包更新到最新版本。在升级库的同时，它还会帮助应用必要的代码更改，以适应破坏性变更或新 API。所有这些都通过 VS Code 中交互式的 Copilot Chat 体验完成。该工具将引导您了解更改，并在需要时提出问题或请求确认，指导您完成流程的每个阶段（从更新依赖关系到修复代码）。其目标是通过让 AI 承担繁重工作（更新文件、运行安装、建议代码修复），而您监督并批准更改，从而简化现代化过程。这意味着您可以更快、更自信地升级到现代 JavaScript/TypeScript 实践和最新包版本。

下载扩展

JS/TS Modernizer 是 GitHub Copilot App Modernization VS Code Extension 预览版的一部分。通过下方链接安装。 GitHub Copilot App Modernization VS Code Extension 随着我们改进 JS/TS Modernizer，我们将把它引入 VS Code 的发布版本。

开始设置

在使用 JS/TS Modernizer 之前，您需要确保以下几点已准备就绪：

Node.js 和 npm 已安装 – 您可能已经安装了 Node/npm，但如果没有，请从 npmjs 安装。现代化过程将在底层调用 Node/npm 命令。
在 VS Code 中拥有 GitHub Copilot 访问权限 – Modernizer 利用了 GitHub Copilot，因此您必须在 VS Code 中使用已启用 Copilot 的账户登录。如果尚未在 VS Code 中设置 Copilot，请遵循在 VS Code 中设置 GitHub Copilot 指南进行登录。（如果您没有订阅，GitHub Copilot Free 可能可用。）
安装 GitHub Copilot App Modernization (Preview) 扩展 – JS/TS Modernizer 是 VS Code 的 GitHub Copilot 应用现代化扩展预览版的一部分。您可以从 VS Code Marketplace 下载并安装此扩展。安装后，Visual Studio Code 将有一个新的“GitHub Copilot App Modernization”视图，我们将在下面的步骤中使用。
启用实验性 Modernizer 设置 – 由于 JavaScript/TypeScript 现代化功能处于预览阶段，您需要在 VS Code 的设置中明确启用它。打开您的 VS Code 设置（可以使用 文件 > 首选项 > 设置 (JSON) 直接编辑 JSON）。然后在您的设置 JSON 文件中添加以下行：

1
2
3


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

此标志告诉扩展您希望开启 JavaScript/TypeScript 升级功能。保存此设置后，重启 VS Code 以确保更改生效。

一旦您设置好 Node.js、Copilot 和扩展（并启用了功能标志），您就可以开始现代化您的第一个项目了！

现代化 JS/TS 应用：分步指南

使用 JS/TS Modernizer 非常简单。让我们逐步了解该过程：

在 VS Code 中打开您的项目。在 VS Code 中，打开包含您的 JavaScript 或 TypeScript 应用程序的文件夹。确保此文件夹包含一个带有项目依赖项的 package.json 文件（该工具使用此文件来了解需要升级什么）。该工具不会创建任何分支或提交。此时您可能希望切换到另一个分支。
打开 GitHub Copilot 应用现代化面板。在 VS Code 活动栏（左侧的侧边栏）中，点击 GitHub Copilot App Modernization 图标/窗格。这是扩展提供的启动现代化任务的面板。（如果刚刚安装了扩展，它可能已经可见；通常看起来像是左侧的 Copilot 或升级图标。）
点击“Upgrade npm Packages”。在 Copilot 应用现代化面板中，您应该会看到一个标记为“Upgrade npm Packages”的按钮。点击此按钮开始您的 TS/JS 应用的现代化过程。（如果看不到此按钮，请仔细检查您的工作区是否有 package.json，该工具仅在检测到 package.json 时才显示此选项。）
按照 Copilot 聊天提示操作。一旦您点击升级按钮，扩展将启动现代化工作流。您将看到 GitHub Copilot Chat 打开（通常在 VS Code 右侧）。Copilot 现代化代理将分析您的项目并提出升级计划。例如，它可能会识别需要更新的过时包。然后它将开始应用更新。Copilot 将使用新的版本号更新您的 package.json，运行 npm install（或在底层运行 npm update），并开始建议所需的任何代码更改。在整个过程中，聊天中会出现消息解释正在发生的事情。Copilot 代理在运行时可能会问您一些问题。您可以在聊天中回应以指导它。
幕后发生了什么？ Copilot 现代化代理实际上是在您的项目上执行一系列由 AI 驱动的升级任务。它检查过时的依赖项，更新它们，然后处理由此产生的问题。例如，如果一个库的新版本更改了您的代码使用的 API，代理（通过 Copilot）可以建议代码修改以修复使用方式。所有这些都在聊天中以迭代循环完成：分析项目，进行更改，验证（例如运行构建或检查错误），然后重复。该扩展使用 Copilot 的“代理模式”来编排这些步骤，因此您会看到它解释每个步骤（“将包 X 从 v1 升级到 v2”、“为更新的 API 修复导入语句”等）。这有点像拥有一个智能脚本或助手引导您完成复杂的升级，但您仍然保持控制，因为您始终可以通过聊天进行干预。Modernizer 将继续此过程，直到它认为升级完成（例如，所有包都已更新，没有明显的错误）。
审查并最终确定更改。现代化运行完成后，务必审查所做的更改。该工具将更新您工作区中的文件（例如，package.json 以及可能的一些源文件）。您可以使用 VS Code 中的源代码管理视图检查这些更改的差异。（没有任何内容会自动提交；您有机会接受或调整更改。）运行您的构建或测试以再次检查一切是否正常。Copilot 聊天也可能总结所做的事情或您是否有任何后续步骤。一旦您满意，就可以提交更新后的代码。您刚刚用比手动完成少得多的精力现代化了您的应用！

已知问题与提示

截至此预览版发布，有几件事需要注意：

一次处理一个项目：如果您的工作区包含多个 JS/TS 项目（例如，一个 monorepo 或子文件夹中有多个 package.json 文件），Modernizer 目前将只针对其中一个（通常是它检测到的第一个）。在当前预览版中，最好一次打开并升级一个项目文件夹。如果您需要单独现代化多个项目，请在 VS Code 中分别打开每个项目并为每个运行该工具。对多项目工作区的支持可能会在未来更新中改进。
实验性功能：JS/TS Modernizer 仍处于预览阶段，这意味着我们的团队正在积极改进它。您可能会遇到一些粗糙的边缘情况，或者该工具无法完全现代化复杂应用的情况。如果工具卡住或某些功能未按预期工作，请告诉我们。

立即尝试

JavaScript/TypeScript Modernizer 可以节省您的时间，并帮助消除手动升级的单调工作。您无需独自梳理发布说明和修复破损的导入，而是有一个 AI 助手准备为您完成大部分工作。这是我们更广泛努力的一部分，旨在为开发者带来 GitHub Copilot 驱动的现代化工具。我们渴望根据您的反馈扩展和改进这些功能。

准备好现代化您的应用了吗？在 VS Code 中安装 GitHub Copilot App Modernization (Preview) 扩展，按照上述描述启用 JS/TS Modernizer，并在您的一个项目上尝试一下。我们希望您发现它对保持您的应用与时俱进非常有用。

如果遇到问题该怎么办？

如果在 TypeScript 升级过程中某些功能未按预期工作，您可以使用以下位置来诊断问题。

在 VS Code 中检查 TypeScript MCP 服务器日志 您可以直接在 VS Code 中打开来自 TypeScript Package Updater MCP 服务器的日志。
1. 打开命令面板。
2. 运行：MCP: List Servers。
3. 选择 TypeScript Package Updater。
4. 选择 Show Output。这将打开 MCP 服务器日志，并可以揭示任何启动或运行时问题。
查找 PROGRESS.md 文件 触发升级后，该工具会在您的 package.json 旁边创建一个名为 .tsupgrader 的文件夹。
- 如果存在名为 PROGRESS.md 的文件，它将显示有关当前升级状态的详细信息。
- 如果缺少此文件，通常表示发生了意外错误。
检查本地应用现代化日志目录 如果缺少 PROGRESS.md 或结果看起来不正确，您可以在 <your user profile>/.ghcp-appmod/ts/logs/ 下找到更详细的日志。

提供反馈

我们非常希望听到您的反馈和遇到的任何问题。如果您遇到错误或想提出改进建议，请告诉我们！您可以通过 webtoolsoutreach@microsoft.com 向我们发送电子邮件，并附上问题的详细信息。反馈对于帮助我们改进 Modernizer 的算法和覆盖范围非常宝贵。

在报告 JS 或 TS Modernizer 的问题时，请尽可能包含更多上下文。这有助于我们更快地诊断问题。您可以包含：

MCP 服务器输出中的任何错误或警告。
PROGRESS.md 文件的内容（如果存在）。
.ghcp-appmod/ts/logs/ 下的任何相关文件。
对您预期发生的情况和实际发生的情况的简短描述。

如果工具似乎卡住或产生意外结果，上述日志通常包含有用的线索。

微软发布 VS Code JavaScript/TypeScript 现代化升级工具

本文介绍了微软为 Visual Studio Code 推出的 JavaScript/TypeScript Modernizer 预览版工具。该工具利用 GitHub Copilot 的 AI 能力，自动化分析项目、升级 npm 包并提供必要的代码修改建议，旨在简化老旧 JS/TS 应用的现代化升级过程。