开始使用 WebStorm
欢迎使用 WebStorm 入门指南！ 了解如何快速设置此 JetBrains IDE，大多数功能开箱即用。
打开或创建您的第一个项目
下载并安装 WebStorm 后，您会注意到的第一件事是需要一个项目来开始使用。 以项目为中心的方法可以帮助 WebStorm 更好地理解您将要处理的内容，并为您提供更高级的编码辅助。
您有几种选项可以选择来开始您的项目：
克隆存储库 – 从 Git 或 GitHub 获取现有项目。
新建项目 – 创建一个空项目或从现有模板生成一个项目，例如 React、Angular 或 Vue 的模板。
打开 – 打开存储在您机器上的项目。
您还可以从我们的演示项目开始，快速了解一些关键功能——前往 新建项目 | 新建项目 并勾选 生成带有入门提示的 Playground 项目 框。
一旦您打开了一个项目，就可以像往常一样开始编码。 要创建您的第一个文件，请打开 项目 工具窗口，选择您想要创建文件的文件夹，右键点击它，选择 新建 ，然后从列表中选择文件类型。
使用快捷键节省时间
如果您从未使用过 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 快捷键备忘单 – 您可以下载默认的 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 点击 点击链接以启动客户端调试。
测试
使用编辑器左侧的图标运行或调试特定的测试文件或套件。 您还可以通过右键点击 项目 工具窗口中的文件夹并选择 运行测试 来运行多个测试。 有关更多信息，请参见 本节。
AI 功能
如果您希望通过 AI 驱动的功能增强 WebStorm 中的工作流，您可以使用 JetBrains AI，它已原生集成到 IDE 中。 它同时包含 AI 助手 （智能编码辅助工具）以及 Junie （可独立执行编码任务的 AI 编码智能体）。
AI 助手 通过直接集成到您的 IDE，以智能功能增强您的开发工作流。 主要功能包括：
代码补全 – 自动完成单行和整段代码，确保遵循您的编码风格和命名约定。
下一步编辑建议 – 获取对您的代码可能进行的下一步修改的建议。 快速应用建议并跳转到下一个可能需要更改的位置，同时在整个文件中更新相关代码。
带有 Agent 模式的 AI 聊天 – 与受支持的语言模型之一聊天，提出有关您的项目的问题，或对某项任务进行迭代。 切换到 Agent 模式，以执行更复杂的活动，例如实施修复、重构代码、生成测试等。
上下文管理 – 添加文件、文件夹、图像、符号、提交或其他条目，为 AI 助手 提供与您的问题相关的附加上下文。
响应处理 – 审查并应用 AI 建议的更改。 直接从 AI 聊天中修改单个或多个文件、应用代码片段，或运行终端命令。
云端 LLM 支持 – 选择您偏好的 AI 模型，以在 AI 聊天中使用。 可从 Google Gemini、OpenAI 和 Anthropic 等云服务提供商中进行选择。
使用本地模型 – 配置第三方提供的自定义本地模型，并将其用于 AI 助手 的功能，例如代码补全、在编辑器中生成代码或生成提交消息。
以及 更多。
Junie 可独立执行任务，或与开发者协同工作。 常规任务可以完全委托给 Junie，同时它也可以协助完成更复杂的工作：
使用项目上下文和结构执行任务。
分析和搜索代码以找到相关信息。
使用 IDE 检查和校验功能进行代码编辑。
运行代码和测试以减少警告和错误。
在更改后验证项目状态和测试结果。
通过变更审查和指导支持复杂任务的协作。
以及 更多。
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 用户寻求帮助。