开始使用 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 功能
如果您正在寻找与 WebStorm 原生集成的 AI 编码助手，您可以试试 JetBrains AI Assistant。 它包括许多功能，例如上下文感知的智能聊天或生成代码和编写文档的能力。 提供 7 天免费试用。
您还可以在 WebStorm 中使用 GitHub Copilot、Supermaven、Tabnine 和其他 AI 工具——通过 插件市场 标签在 设置 | 插件 中搜索相应的插件。 请注意，这些插件并非由 JetBrains 维护。
保存时的操作
您可以配置 WebStorm 在每次保存文件后执行特定操作或运行工具，例如 Prettier 或 ESLint。 为此，请转到 设置 | 工具 | 保存时的操作 并勾选必要的选项。
协作和远程开发
WebStorm 提供工具来帮助您协作并远程处理您的项目。
Code With Me
此功能允许您实时共享本地运行的项目。 您的协作者可以加入您的编码会话，进行编辑，并一起运行或调试代码。 要开始，请点击 Code With Me 图标并向您的团队成员发送邀请。
有关更多信息，请参见 本节。
远程开发
WebStorm 还支持远程开发，允许您连接到远程机器并像项目在本地运行一样工作。 您可以直接从 IDE 打开、编辑、运行和调试远程服务器上的代码。 要进行设置，请前往 文件 | 远程开发。
有关更多信息，请参见 本节。
如何获取支持
您可以查看 我们的社区论坛 ，找到许多常见问题的答案，并向其他 WebStorm 用户寻求帮助。
要报告错误或请求新功能，请在 此处 创建一个新问题。