开始使用 WebStorm
欢迎使用 WebStorm 入门指南！ 了解如何快速设置此 JetBrains 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 键位映射参考页。
观看下方视频，了解更多关键快捷键和高效技巧。
自定义 WebStorm
WebStorm 的界面乍一看可能显得复杂。 您可以根据需要进行自定义，关闭任何不需要的功能。 以下是一些常规的自定义提示。
插件
在 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 提供可帮助您协作与远程开发项目的工具。
Code With Me
该功能允许您实时共享本地运行的项目。 协作者可以加入您的编码会话，进行编辑以及一起运行或调试代码。 要开始操作，请单击 Code With Me 图标并向队友发送邀请。
如需了解详情，请参阅 本节。
远程开发
WebStorm 还支持远程开发，使您能够连接远程计算机并像本地运行项目一样进行操作。 您可以直接在 IDE 中打开、编辑、运行并调试远程服务器上的代码。 要进行设置，请转至 文件 | 远程开发。
如需了解详情，请参阅 本节。
如何获取支持
您可以访问 我们的社区论坛 ，查找常见问题的解答并向其他 WebStorm 用户寻求帮助。