WebStorm 2026.2 Help

如何从 VS Code 迁移到 WebStorm

在本节中,您将找到一些从 VS Code 迁移到 WebStorm 的提示。

打开或创建您的第一个项目

下载并安装 WebStorm 后,您会注意到的第一件事是需要一个项目来开始。 以项目为中心的方法可以帮助 WebStorm 更好地理解您将要处理的内容,并为您提供更高级的编码辅助。

您有几种选项可以选择来开始您的项目:

  • 克隆仓库 – 从 Git 或 GitHub 获取现有项目。

  • 新建项目 – 创建一个空项目或从现有模板生成一个项目,例如 React、Angular 或 Vue 的模板。

  • 打开 – 打开存储在您机器上的项目。

您还可以从我们的 playground 项目开始,快速了解一些关键功能——前往 新建项目 | 新建项目 并勾选 生成带有入门提示的 Playground 项目 框。

欢迎界面

配置快捷键

如果您之前从未使用过 WebStorm 或其他 JetBrains IDE,习惯新的快捷键可能会有些挑战。 这里有一些可以帮助您的提示。

切换到 VS Code 键位图

如果您还没准备好告别 VS Code 的快捷键,您可以切换到 VS Code 键位图。 为此,请转到 设置 | 键位图 ,将 VSCodeVSCode (macOS) 设置为默认键位图,并保存更改。

将 VS Code 键位图设置为默认

学习 WebStorm 快捷键

学习 WebStorm 快捷键即使您以后决定切换到另一个 JetBrains IDE 也会很有用——几乎所有 JetBrains IDE 的快捷键都是相同的。 以下是可以帮助您更快学习它们的方法:

  • 记住 WebStorm 最通用的快捷键Shift + Shift ,或 随处搜索。 您可以使用它查找任意文件、操作、类或符号,并在同一位置查看所有匹配项。

  • 安装 Key Promoter X此扩展可帮助您在工作时学习基本快捷键。 当您在 IDE 内使用鼠标点击按钮时,Key Promoter X 会显示您可以使用的快捷键。

  • 使用 WebStorm 快捷键速查表 – 您可以下载默认的 WebStorm 键位图参考,适用于 macOSWindows 和 Linux

WebStorm 会根据您的环境建议一个预定义的键位图。 您可以在 设置 | 键位图 中找到此键位图。 如果您更改了某个操作的快捷键,WebStorm 会将这些更改存储在预定义键位图的副本中,并在未来默认使用该副本。

设置您的工作环境

WebStorm 和 VS Code 之间的一个关键区别是,您 无需安装和配置大量扩展 以使 WebStorm 更加强大。 大多数情况下,一切都可以开箱即用,因此您可以直接开始编码。

查看 这些视频 ,快速了解如何开始。 有关 WebStorm 提供的功能的总体概述,请参见 此页面

自定义 WebStorm

WebStorm 的 UI 起初可能看起来有些复杂。 您可以自定义它并关闭任何不需要的内容。 以下是一些通用的自定义提示。

扩展

在 JetBrains IDE 中,我们将扩展称为 插件。 它们的工作方式与 VS Code 中的扩展差不多,允许您扩展内置功能并自定义您的 IDE。 要探索可用的插件,请转到 市场 选项卡下的 设置 | 插件

自定义 WebStorm:已安装 Rainbow Brackets 插件

UI 主题

WebStorm 仅附带少量预定义主题,但有多种自定义选项可供选择。 要探索它们,请转到 设置 | 插件 并在 市场 选项卡中搜索“theme”。

自定义 WebStorm:选择 UI 主题

然后,您可以返回编辑器并检查已安装主题的外观。 从主菜单中选择 查看 | 快速切换方案 ,或按 Ctrl+` 并选择 主题。 从那里,您将能够一次预览所有可用的主题。

专注模式

与 VS Code 一样,您可以随时切换到 禅模式 模式以专注于编码。 在主菜单中,选择 导航 | 全局搜索 并输入“enter zen mode”。 完成后,执行相同操作,但选择 退出禅模式

自定义 WebStorm:专注模式

复刻常见的 VS Code 工作流程

让我们看看您如何设置一些内容,使其像在 VS Code 中一样工作。

命令面板

随处搜索 是 VS Code 的 命令面板 的替代品。 您可以使用它查找任何文件、操作、类或符号,并在一个地方查看所有匹配项。 要打开 随处搜索 ,请按 Shift + Shift ,或使用默认的 命令面板 快捷键(如果您使用的是 VS Code 键位图)。

自定义 WebStorm:命令面板

查找并替换

尽管 WebStorm 的搜索和替换工作流与 VS Code 略有不同,但原理是相同的。 WebStorm 允许您在特定文件和整个项目中查找和替换文本字符串。

要开始,在主菜单中转到 编辑|查找 并选择 查找 (针对特定文件)或 在文件中查找 (针对整个项目)。 要替换文本字符串,请在同一子菜单下选择 替换在文件中替换

自定义 WebStorm:搜索和替换

AI 功能

如果您希望在 WebStorm 中借助 AI 驱动的功能提升工作流程,您可以使用 JetBrains AI,它已原生集成到 IDE 中。 它同时包含 AI 助手 (智能编码辅助工具)以及 Junie (可独立执行编码任务的 AI 编码智能体)。

AI 助手 将 AI 驱动的编码代理和 AI 功能直接引入 WebStorm。 可以使用内置代理、连接外部代理、通过其他工具进行扩展,还能选择适合工作流的模型和服务。 主要功能包括:

  • 编码代理 – 可将多步任务委托给 编码代理 ,如 JunieClaude AgentCodexGitHub Copilot。 代理会规划工作、编辑文件、运行命令和测试,并报告进度,可以对更改进行审核、保留或回滚。

  • 通过 ACP 的外部代理 – 从精选注册表或自定义配置中连接任何支持 代理客户端协议 的代理,无需自定义集成。

  • MCP 工具 – 通过 模型上下文协议 使用外部工具和数据源扩展代理,或将 IDE 作为 MCP 服务器暴露。

  • 灵活的设置 – 可通过 JetBrains AI 订阅 开始, 自带密钥用于第三方模型, 通过提供商账号授权代理 ,或运行 本地模型。 可以复用已有的 AI 订阅。

  • 上下文感知 AI 聊天 – 可与支持的模型 聊天并咨询有关项目的问题。 可将文件、文件夹、符号或提交作为上下文,然后切换到代理模式以对代码库进行更改。

  • 编辑器内代码辅助 — 按照编码风格和命名约定自动补全单行或整段代码。 下一步编辑建议会推荐后续编辑,并引导到可能需要修改的位置。

  • 以及 更多

Junie 徽标Junie 可独立执行任务,或与开发者协同工作。 常规任务可以完全委托给 Junie,同时它也可以协助完成更复杂的工作:

  • 使用项目上下文和结构执行任务。

  • 分析和搜索代码以找到相关信息。

  • 使用 IDE 检查和校验功能进行代码编辑。

  • 运行代码和测试以减少警告和错误。

  • 在更改后验证项目状态和测试结果。

  • 通过变更审查和指导支持复杂任务的协作。

AI 功能基于新的订阅模式提供,其中包含免费套餐。 免费套餐提供无限制的代码补全、本地模型访问权限以及有限的基于云的功能。 您可以选择升级为 AI Pro 或 AI Ultimate 套餐,以获取更多功能。

激活 AI 助理

  1. 请确保已使用有效的 JetBrains Account 登录。

  2. 请按照 AI 助手 帮助 中的说明激活您的许可证。

您还可以在 WebStorm 中使用 GitHub Copilot、Tabnine 以及其他 AI 工具——通过 市场 选项卡在 设置 | 插件 中搜索相应的插件。 请注意,这些插件并非由 JetBrains 维护。

项目视图设置

WebStorm 有其自己的 资源管理器 ,即 项目 视图,其工作方式略有不同。 例如,您需要双击文件以在编辑器中打开它。 以下是如何更改默认设置以匹配您在 VS Code 中习惯的方式:

项目视图:自定义默认设置

您可以转到 项目 视图设置,并在 行为 下选择以下任意或全部选项:

  • 启用预览标签页 – 在编辑器中预览您在 项目 工具窗口中选择的文件。

  • 点击即可打开文件/目录 – 点击即可在编辑器中打开文件或目录。

  • 始终选择已打开的文件 – 自动选择当前在 项目 工具窗口中打开的文件。

保存时的操作

您可以配置 WebStorm 在每次保存文件后执行特定操作或运行工具,例如 Prettier 或 ESLint。 为此,请转到 设置 | 工具 | 保存时的操作 ,并勾选其中必要的选项。 要了解有关保存时执行操作的更多信息,请参见我们文档的 此部分

自定义 WebStorm:设置保存时的操作

如何获取支持

您可以查看 我们的社区论坛 ,找到许多常见问题的答案,并向其他 WebStorm 用户寻求帮助。

要报告错误或请求新功能,请在 此处创建一个新问题。

2026年 7月 14日