开始使用 WebStorm欢迎使用 WebStorm 入门指南！ 了解如何快速设置此 JetBrains IDE，大多数功能开箱即用。

要在 WebStorm 中打开设置，请按 Ctrl+Alt+S ，或单击 IDE 右上角的齿轮图标 并选择 设置。

打开或创建您的第一个项目在下载并安装 WebStorm 后，您将首先注意到的一件事是需要一个项目才能开始使用。 以项目为先的方式有助于 WebStorm 更好地理解您要处理的内容上下文，并为您提供更高级的编码辅助功能。

您可以选择以下几种方式来开始项目：

克隆版本库 – 从 Git 或 GitHub 获取现有项目。

新建项目 – 创建一个空项目或基于现有模板生成项目，例如 React、Angular 或 Vue 模板。

打开 – 打开存储在您计算机上的项目。

您也可以从我们的示例项目开始，快速了解部分主要功能 — 转到 新建项目 | 新建项目 并勾选 生成一个包含入门提示的示例项目 复选框。

打开项目后，您就可以照常编码了。 要创建您的第一个文件，请打开 项目 工具窗口，选择要创建文件的文件夹，右键点击它，选择 新建 ，然后从列表中选择文件类型。

使用快捷键节省时间如果您之前从未使用过 WebStorm 或其他 JetBrains IDE，适应新的快捷键可能会有些困难。 以下是一些可以帮助您的技巧。

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

如果您之前使用的是其他编辑器或 IDE，您可以切换到相应的键位映射。 可用选项包括 VS Code 和 Sublime Text。

您也可以使用 IdeaVim 插件 为 IDE 添加类 Vim 功能。

学习 WebStorm 快捷键学习 WebStorm 的快捷键即使将来切换到其他 JetBrains IDE 也很有用——几乎所有 IDE 的快捷键都是相同的。 以下内容可帮助您更快速地掌握快捷键：

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

安装 Key Promoter X – 此扩展可帮助您在实际工作中学习重要快捷键。 当您在 IDE 中使用鼠标点击按钮时，Key Promoter X 会显示您可以使用的快捷键。

使用 WebStorm 快捷键速查表 – 您可以下载适用于 macOS 或 Windows 和 Linux 的默认 WebStorm 键位映射参考页。

观看下方视频，了解更多关键快捷键和高效技巧。

自定义 WebStormWebStorm 的界面乍一看可能显得复杂。 您可以根据需要进行自定义，关闭任何不需要的功能。 以下是一些常规的自定义提示。

插件在 WebStorm 中，扩展称为 插件。 它们允许您扩展内置功能并根据需要自定义 IDE。 要探索可用插件，请转到 插件市场 标签页中的 设置 | 插件。

界面主题WebStorm 仅带有一些预定义的主题，但还提供多种自定义选项供您选择。 要探索这些选项，请转到 设置 | 插件 并在 插件市场 标签页中搜索 “theme”。

然后，您可以返回编辑器，检查所安装主题的外观。 从主菜单中选择 视图 | 快速切换方案 ，或按 Ctrl+` 并选择 主题。 在此，您可以一次预览所有可用主题。

项目视图设置WebStorm 拥有自己的 资源管理器 ，即 项目 工具窗口，其默认行为与其他代码编辑器略有不同。 例如，您需要双击文件才能在编辑器中打开它。 以下是更改默认设置的方法：

您可以转到 项目 工具窗口设置，并在 行为 下选择部分或全部以下选项：

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

单击打开文件/目录 — 单击即可在编辑器中打开文件或目录。

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

紧凑模式紧凑模式 会缩小工具栏、工具窗口和按钮的尺寸，从而为代码腾出更多的屏幕空间。 如果您喜欢更整洁、极简的界面，或者在较小屏幕上工作，该模式非常适用。 要启用此功能，请从主菜单中选择 导航 | 全局搜索 ，或按 Shift + Shift ，输入 “compact mode” 并将其开启。

屏幕共享设置在 WebStorm 中展示代码或演示功能时，这些设置有助于提高可见性，使他人更轻松跟随演示内容：

您可以通过 全局搜索 访问这些设置：

演示助手 — 实时显示您使用的键盘快捷键。 转到 设置 | 外观与行为 | 演示助手 自定义弹出窗口中显示的内容。 例如，您可以选择显示其他操作系统的快捷键。

缩放 — 在 全局搜索 中输入 "zoom"，即可快速调整整个 IDE 界面的缩放比例。

演示模式 — 从 全局搜索 弹出窗口中选择 进入演示模式 以启用该功能。 您可以使用相同方式退出此模式——只需键入 "exit presentation mode"。

设置常用工作流在 WebStorm 中，大多数配置已准备就绪，助您直接开始编码。 以下是设置关键工作流的提示。 如需其他帮助，请使用文档搜索功能。

版本控制WebStorm 会自动检测您的版本控制系统。 以下是处理一些常见任务的方法：

更新项目 — 单击左上角的分支名称并选择 更新项目。 您可以将传入更改合并到当前分支，或将当前分支变基到这些更改之上。

提交更改 — 使用 提交 工具窗口快速提交更改。 若要进行部分提交，仅选择某些文件或文件中的特定更改。

查看差异 — 在 提交 工具窗口中双击要查看差异的文件。

查看日志 — 对于 Git，您可以查看提交历史。 打开 Git 工具窗口查看详细的更改日志。

运行与调试WebStorm 可帮助您运行并调试 Node.js 应用或脚本，以及前端应用和测试。 您可以调试从 WebStorm 启动的应用，也可以将调试器附加到外部 Node.js 程序。

Node.js 应用和脚本要在 WebStorm 中调试 Node.js 应用或脚本，请在编辑器中右键点击并从上下文菜单中选择 调试。 您也可以通过单击编辑器左侧的区域来设置断点。 如需将调试器附加到已运行的应用，请参阅 本节。

前端应用要启动前端应用的调试会话，首先运行 npm 脚本来启动该应用。 然后，在 终端 或 运行 工具窗口的输出中，按 Ctrl+Shift

点击

点击链接，启动浏览器中的 JavaScript 调试。

对于 Next.js，要开始服务器端调试，请调试一个 npm 脚本。 然后，在 终端 或 运行 工具窗口的输出中，按 Ctrl+Shift

点击

点击链接，启动客户端调试。

测试使用编辑器左侧的图标来运行或调试特定测试文件或套件。 您还可以在 项目 工具窗口中右键单击某个文件夹并选择 运行测试 来运行多个测试。 如需了解详情，请参阅 本节。

AI 功能如果您希望在 WebStorm 中通过 AI 驱动的功能提升工作流程，可以使用 JetBrains AI，此功能已原生集成在 IDE 中。 其功能包括 AI Assistant ，用于实现智能 AI 聊天、 内置编辑器代码生成 和 AI 驱动的代码补全 ，以及 Junie ，一款可独立执行编码任务的 AI 编码代理。

AI 功能采用全新的订阅模式提供，并包含一个免费版本。 免费版本提供无限代码补全、本地模型访问以及有限的云端功能。 您可以选择升级至 AI Pro 或 AI Ultimate 版本以获取更多功能。

启用 AI 助手请确保已使用有效的 JetBrains Account 登录。

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

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

保存时的操作您可以配置 WebStorm，使其在每次您修改并保存文件时自动执行特定操作或运行 Prettier 或 ESLint 等工具。 为实现此操作，请转至 设置 | 工具 | 保存时执行的操作 并在其中选中所需的复选框。

默认情况下，WebStorm 会自动保存您在文件中所做的更改。 您可以 在此处 了解更多相关信息。

协作式和远程开发WebStorm 提供可帮助您协作与远程开发项目的工具。

Code With Me该功能允许您实时共享本地运行的项目。 协作者可以加入您的编码会话，进行编辑以及一起运行或调试代码。 要开始操作，请单击 Code With Me 图标并向队友发送邀请。

如需了解详情，请参阅 本节。

远程开发WebStorm 还支持远程开发，使您能够连接远程计算机并像本地运行项目一样进行操作。 您可以直接在 IDE 中打开、编辑、运行并调试远程服务器上的代码。 要进行设置，请转至 文件 | 远程开发。

如需了解详情，请参阅 本节。

如何获取支持您可以访问 我们的社区论坛 ，查找常见问题的解答并向其他 WebStorm 用户寻求帮助。

如需报告 bug 或请求新功能，请在 此处 创建新 issue。 详细信息请参见 联系支持 和 报告 Bug。

最后修改日期： 2025年 9月 26日Touch Bar 支持WebStorm 快捷键