开始使用 WebStorm

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

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

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

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

克隆仓库 – 从 Git 或 GitHub 获取现有项目。
新建项目 – 创建一个空项目或从现有模板生成一个项目，例如 React、Angular 或 Vue 的模板。
打开 – 打开存储在您机器上的项目。

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

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

使用快捷键节省时间

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

自定义您的键位映射

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

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

您还可以通过 IdeaVim 插件为您的 IDE 添加类似 Vim 的功能。

学习 WebStorm 快捷键

学习 WebStorm 快捷键将非常有用，即使您之后决定切换到另一个 JetBrains IDE——几乎所有这些 IDE 中的快捷键都是相同的。以下是可以帮助您更快学习它们的方法：

记住 %instance% 最常用的快捷键 – Shift Shift ，或随处搜索。您可以使用它查找任意文件、操作、类或符号，并在同一位置查看所有匹配项。
安装 Key Promoter X – 此扩展可帮助您在工作时学习基本快捷键。当您在 IDE 内使用鼠标点击按钮时，Key Promoter X 会显示您可以使用的快捷键。
使用 %instance% 快捷键备忘单 – 您可以下载默认的 WebStorm 键位映射参考，适用于 macOS 或 Windows 和 Linux。

观看下方视频，了解更多基本快捷键和提高生产力的技巧。

自定义 WebStorm

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

插件

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

UI 主题

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

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

项目视图设置

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

您可以转到项目工具窗口设置，并在行为下选择任意或所有这些选项：

启用预览标签页 – 在编辑器中预览您在项目工具窗口中选择的文件。
点击即可打开文件/目录 – 点击即可在编辑器中打开文件或目录。
始终选择已打开的文件 – 自动选择当前在项目工具窗口中打开的文件。

紧凑模式

紧凑模式减小工具栏、工具窗口和按钮的大小，为您的代码创建更多屏幕空间。如果您更喜欢简洁的极简界面或在较小的屏幕上工作，这是理想的选择。要启用它，请从主菜单中选择导航 | 全局搜索或按 Shift + Shift ，输入“compact mode”，并将其打开。

屏幕共享设置

在展示您的代码或演示 WebStorm 中的功能时，这些设置可以帮助提高可见性并使其他人更容易跟随：

您可以通过随处搜索访问所有这些设置：

Presentation Assistant – 在使用快捷键时实时显示它们。转到设置 | 外观与行为 | 演示助手自定义弹出窗口中显示的内容。例如，您可以选择显示其他操作系统的快捷键。
缩放 – 在随处搜索中输入“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点击 点击链接以启动客户端调试。

测试

使用编辑器左侧的图标运行或调试特定的测试文件或套件。您还可以通过右键点击项目工具窗口中的文件夹并选择运行测试来运行多个测试。有关更多信息，请参见本节。

保存时的操作

您可以配置 WebStorm 在每次保存文件后执行特定操作或运行工具，例如 Prettier 或 ESLint。为此，请转到设置 | 工具 | 保存时的操作，并勾选其中必要的选项。

在 WebStorm 中开始使用 AI Assistant。

要通过 AI 驱动的功能增强你的工作流，请使用 JetBrains AI 服务，它已原生集成进 WebStorm，并提供多种 AI 模型。你也可以使用第三方提供商的 AI 模型，只需用你自己的 API 密钥，或者连接本地部署模型。详细了解支持的模型

AI 代理通过与 AI 模型集成，在项目中自动规划并执行多步开发任务。 WebStorm 支持 Agent Client Protocol (ACP) ，允许连接外部 AI 智能体并在 AI 聊天中使用。 ACP 定义了标准通信接口，因此实现了该协议的任何智能体都可以被添加，无需自定义集成。详细了解 AI 代理。

激活代理并连接模型

请确保已使用有效的 JetBrains Account 登录。
请按 AI Assistant 帮助中的描述激活你的许可证。
按照从 JetBrains Marketplace 安装插件的说明，在设置 | 插件页面、市场标签上安装 AI Assistant 插件。
按下 Alt+Shift+1 ，打开 AI 聊天工具窗口。
如需使用集成于 WebStorm 的代理，请在代理人下拉列表中选择。如果尚未安装该代理，当你首次运行提示时，WebStorm 会建议你安装。
如需使用自定义代理，请通过 Agent Client Protocol (ACP) 连接。
在 AI 聊天中输入提示。如果所选代理尚未安装，WebStorm 会建议你安装。
可选
- 建议你对所选代理接受默认模型。如需选择其他模型，请在模型列表中选择。
- 也可以自行选择逻辑推理等级，替换默认选择的默认。
详细了解支持的模型。