WebStorm怎么用？新手入门教程看这里！-杰瑞科技汇

WebStorm 使用教程：从入门到精通

WebStorm 是由 JetBrains 公司出品的一款功能强大的 JavaScript IDE（集成开发环境），它为前端开发提供了无与伦比的智能代码补全、导航、重构和调试支持,是许多专业前端开发者的首选工具。

（图片来源网络，侵删）

第一部分：入门准备
- 安装与激活
- 界面初识
- 创建你的第一个项目
第二部分：核心功能详解
- 智能代码编辑器
- 代码导航与搜索
- 代码重构
- 调试器
- 版本控制集成
- 终端集成
第三部分：高级技巧与工作流优化
- 自定义与快捷键
- 插件生态
- 任务与待办事项
- 本地历史记录
- 与其他工具的协同
第四部分：实战项目工作流
- Vue.js / React / Angular 项目
- 前端框架调试技巧
- 使用 npm/yarn/pnpm
第五部分：常见问题与资源
- 常见问题
- 学习资源

第一部分：入门准备

安装与激活

下载：访问 JetBrains 官网下载 WebStorm，它提供 30 天的全功能免费试用。
安装：按照操作系统（Windows, macOS, Linux）的常规步骤进行安装。
激活：
- 学生/教师免费：如果你是学生或教师，可以申请免费的许可证。
- 个人开发者折扣：JetBrains 为个人开发者提供折扣。
- IDEA 免费版用户：如果你是 IntelliJ IDEA Community Edition 的用户，可以申请一个免费的 WebStorm 开发者许可证。
- 开源项目：如果你为知名开源项目做贡献,也可以申请免费许可。

界面初识

启动 WebStorm 后,你会看到以下主要区域：

菜单栏：所有操作的入口。
工具栏：常用操作的快捷按钮。
编辑器窗口：你编写代码的主要区域,支持多标签页。
项目工具窗口：左侧区域，显示你的项目文件结构，可以切换视图（Project, Structure, etc.）。
状态栏：位于底部，显示 Git 分支、行号、编码等信息。
其他窗口：
- 终端：集成在 IDE 中的命令行。
- Run/Debug：显示程序输出和调试信息。
- Git：版本控制操作窗口。
- TODO：显示代码中的 // TODO 注释。

创建你的第一个项目

欢迎界面：启动后，点击 "New Project"。
选择模板：
- Empty Project：创建一个空目录,适合手动配置。
- Static Website：创建一个包含 HTML, CSS, JS 文件的静态网站项目。
- Node.js Express App：快速创建一个 Node.js 后端项目。
- Vue / React / Angular：创建对应的前端框架项目。
配置项目：选择项目名称、位置、包管理器（npm, yarn, pnpm）等。
创建：点击 "Create" 按钮，WebStorm 会自动初始化项目并安装依赖。

第二部分：核心功能详解

智能代码编辑器

这是 WebStorm 的灵魂所在。

代码补全：
- 输入代码时，WebStorm 会智能地提供变量、函数、类等的补全建议。
- 支持成员访问、函数调用、[ ] 属性访问等上下文感知的补全。
- 按 Tab 或 Enter 接受建议。
实时错误检查与快速修复：
（图片来源网络，侵删）
- 代码中出现的语法错误、类型错误、未定义的变量等,会以红色波浪线标出。
- 将鼠标悬停在错误上,会显示具体原因和修复建议。
- 按 Alt + Enter（macOS: Option + Enter）可以快速应用修复方案，包裹代码块、添加缺失的 import、将变量转换为常量等。
代码格式化：
- 自动格式化：Ctrl + Alt + L (macOS: Cmd + Option + L)，一键美化你的代码，遵循预设的代码风格（Prettier, ESLint 等）。
- 格式化代码片段：选中代码片段，按上述快捷键,只格式化选中的部分。
代码折叠：
- 使用代码左侧的 / 图标，或快捷键 Ctrl + . (macOS: Cmd + .) 来折叠/展开代码块（如 if 语句、函数、类等）,让你专注于当前逻辑。

代码导航与搜索

跳转到定义：
- 将光标放在一个变量或函数名上，按 Ctrl + B (macOS: Cmd + B),可以直接跳转到其定义的地方。
- 按住 Ctrl (macOS: Cmd) 并鼠标点击,也能实现跳转。
查找用法：
- 按 Alt + F7 (macOS: Option + F7)，可以查找当前符号（变量、函数等）在项目中的所有使用位置。
全局搜索：
- 双击 Shift：打开 "Search Everywhere" 窗口，可以搜索任何文件、类、符号、设置等,是最高效的搜索方式。
- 搜索：Ctrl + Shift + F (macOS: Cmd + Shift + F)，在指定范围内（整个项目、当前目录等）搜索文本。
文件结构：
- 按 Ctrl + F12 (macOS: Cmd + F12)，可以快速查看当前文件的结构（类、方法、变量）,并直接跳转到它们。

代码重构

重构是在不改变代码外部行为的前提下，改善其内部结构，WebStorm 的重构功能非常强大。

重命名：
- 将光标放在要重命名的符号上，按 Shift + F6。
- WebStorm 会智能地找到所有引用并一并重命名,安全又高效。
提取方法/变量：
- 选中一段代码，按 Ctrl + Alt + M (macOS: Cmd + Option + M),将其提取成一个独立的方法。
- 选中一个表达式，按 Ctrl + Alt + V (macOS: Cmd + Option + V),将其提取成一个变量。
内联：
- 与提取相反，对于方法或变量，如果其定义和使用都在一个地方，可以将其内联（删除定义，直接使用其内容）。
- 选中方法名或变量名，按 Ctrl + Alt + N (macOS: Cmd + Option + N)。
其他重构：还有更改签名、安全删除、移动/复制等，都可以通过 Ctrl + T (macOS: Cmd + T) 打开重构菜单来选择。

调试器

调试是解决问题的关键，WebStorm 的调试器非常直观。

设置断点：在代码行号左侧单击，会出现一个红色的圆点,这就是断点。
启动调试：
- 对于 Node.js 脚本：右键点击代码编辑区，选择 "Debug 'xxx'"。
- 对于前端框架：通常通过 npm run dev 启动开发服务器后，WebStorm 会自动检测并提供调试配置。
调试窗口：
- Variables：显示当前作用域内的所有变量及其值,可以修改变量值进行测试。
- Watches：可以添加你想要持续监控的表达式或变量。
- Frames：显示调用栈,可以查看函数的调用路径。
调试控制：
- F9 (macOS: F9)：Resume Program (继续执行，直到下一个断点)。
- F8 (macOS: F8)：Step Over (逐过程执行，跳过函数内部)。
- F7 (macOS: F7)：Step Into (逐语句执行，进入函数内部)。
- Shift + F8 (macOS: Shift + F8)：Step Out (跳出当前函数)。
- Alt + F9 (macOS: Option + F9)：Run to Cursor (运行到光标所在行)。

版本控制集成

WebStorm 对 Git 等版本控制系统有出色的支持。

左侧边栏的 Git 图标：点击后可以看到所有变更的文件。
上下文菜单：右键点击文件或代码块，可以进行：
- Commit：提交更改，可以填写提交信息,并选择要提交的文件。
- Add：将文件添加到暂存区。
- Revert：撤销对文件的修改。
- Diff：比较文件差异。
- Ignore：将文件添加到 .gitignore。
Log：查看提交历史，可以右键点击提交进行 Revert (撤销提交) 或 Reset (重置)。
Branches：管理分支，创建、切换、合并分支都非常方便。

终端集成

WebStorm 内置了终端,无需切换窗口即可执行命令。

打开/关闭终端：Alt + F12 (macOS: Option + F12)。
终端路径：终端的默认路径就是你当前打开的项目根目录。
智能提示：在终端中输入命令时，WebStorm 也会提供文件名和命令的补全。

第三部分：高级技巧与工作流优化

自定义与快捷键

快捷键：熟悉快捷键是提升效率的关键，你可以通过 File -> Settings -> Keymap 查看和修改快捷键方案,推荐花时间记忆最常用的那些。
主题与字体：File -> Settings -> Appearance & Behavior -> Appearance，可以切换深色/浅色主题,以及自定义编辑器字体和大小。
代码风格：File -> Settings -> Editor -> Code Style，可以为你使用的语言（如 JavaScript, Vue, HTML）配置代码缩进、空格、引号等规则，并能直接生成 .editorconfig 或 .prettierrc 文件。

插件生态

WebStorm 的强大之处在于其丰富的插件。

安装插件：File -> Settings -> Plugins。
推荐插件：
- Prettier - Code formatter：代码格式化神器。
- ESLint：代码质量检查工具。
- Vetur / Vue Language Features (Volar)：Vue.js 开发必备。
- ES7+ React/Redux/React-Native snippets：React 代码片段。
- .env files support：支持 .env 环境变量文件。
- Docker：如果你使用 Docker,这个插件非常有用。

任务与待办事项

在代码中添加 // TODO: 你的描述 或 // FIXME: 需要修复的问题 注释。
在右下角的 TODO 工具窗口中,可以集中查看和管理所有待办事项。

本地历史记录

即使你没有使用 Git，WebStorm 也会自动记录文件的修改历史。

右键点击一个文件，选择 Local History -> Show History,可以看到该文件的所有版本。
你可以比较版本差异，或将任何版本恢复回来，这是一个非常强大的“后悔药”。

与其他工具的协同

浏览器开发者工具：WebStorm 的 "Run" 窗口可以直接显示前端应用的日志输出，与浏览器 DevTools 的 Console 结合使用,调试更方便。
Postman：WebStorm 集成了 REST Client，可以直接在编辑器里发送 HTTP 请求，无需切换到 Postman。

第四部分：实战项目工作流

Vue.js / React / Angular 项目

WebStorm 对主流框架有“开箱即用”的支持。

项目创建：通过 New Project 向导选择对应框架，WebStorm 会自动配置好所有必要的依赖和运行/调试配置。
组件/文件导航：在 Vue 或 React 项目中，你可以轻松地通过 Ctrl + B 跳转到组件定义，智能识别 .vue 或 .jsx 文件。
模板语法高亮：对 v-for, v-if, 或等语法提供高亮和检查。

前端框架调试技巧

Source Maps：确保你的项目配置了 sourceMap: true，这样调试时，你就可以在 WebStorm 的源码中设置断点,而不是在压缩后的代码中。
配置调试器：
1. 打开 Run -> Edit Configurations...。
2. 点击号，选择 JavaScript Debug。
3. 在 URL 输入框中，填入你的开发服务器地址（如 http://localhost:5173）。
4. 确保 Host 和 Port 与你的开发服务器一致。
5. 点击 OK 保存。
6. 点击工具栏上的 "Debug" 虫子图标,即可启动调试。

使用 npm/yarn/pnpm

package.json 智能识别：在 package.json 的 scripts 部分，右键点击任何一个脚本（如 start, build），选择 Run 'xxx' 或 Debug 'xxx'，WebStorm 会自动执行该命令。
依赖管理：在 node_modules 目录中，WebStorm 会自动只显示你项目直接依赖的包,方便你查找。

第五部分：常见问题与资源

常见问题

Q: WebStorm 启动或运行很慢怎么办？
- A: 可以尝试禁用不使用的插件，禁用自动索引（Settings -> Advanced Settings -> Auto Import），或者增加 IDE 的内存分配（在 webstorm64.exe.vmoptions 文件中修改 -Xms 和 -Xmx 参数）。
Q: 如何禁用某个检查或警告？
- A: 将光标放在警告上，按 Alt + Enter，选择 "Edit Inspection Profile..." 或 "Suppress for...",可以全局或局部地禁用该检查。
Q: 如何同步设置到多台电脑？
- A: JetBrains 提供了 Settings Repository 功能，你可以将你的配置上传到 GitHub Gist 或其他 Git 仓库,然后在另一台电脑上同步。

学习资源

官方文档：WebStorm - Help，这是最权威、最全面的学习资料。
官方教程：JetBrains Academy 和官方 YouTube 频道上有大量视频教程。
快捷键地图：在 Settings -> Keymap 中,你可以随时查看和打印快捷键表。

WebStorm 是一款值得投入时间去学习的工具，它的学习曲线相对陡峭，但一旦你掌握了其核心功能和快捷键，你的开发效率和代码质量都会得到质的飞跃，从今天开始，尝试在日常开发中有意识地使用一两个新功能，你会很快爱上这个强大的“瑞士军刀”。

WebStorm怎么用？新手入门教程看这里！