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

WebStorm 是由 JetBrains 公司出品的一款功能强大的 JavaScript IDE（集成开发环境），它为现代 Web 开发提供了无与伦比的支持，包括对 HTML、CSS、JavaScript 及其所有主流框架（如 React, Vue, Angular, Node.js 等）的深度智能辅助。

webstorm的使用教程
（图片来源网络，侵删）

目录

  1. 第一部分：入门准备

    • 1 安装与激活
    • 2 熟悉界面布局
    • 3 首次配置

  2. 第二部分：核心功能详解

    • 1 智能代码编辑器
    • 2 代码导航与搜索
    • 3 代码重构
    • 4 调试器
    • 5 版本控制集成
    • 6 终端与任务运行器

  3. 第三部分：项目实战与最佳实践

    • 1 创建和管理项目
    • 2 使用 Live Edit 实时预览
    • 3 自定义代码风格
    • 4 使用 Emmet 快速编写 HTML/CSS
    • 5 插件生态

  4. 第四部分：进阶技巧与快捷键

    webstorm的使用教程
    （图片来源网络，侵删）
    • 1 必备快捷键
    • 2 多光标编辑
    • 3 代码片段
    • 4 远程开发

  5. 第五部分：总结与资源

    • 1 学习路径建议
    • 2 官方资源

第一部分：入门准备

1 安装与激活

  1. 下载：访问 WebStorm 官方网站，下载适合你操作系统的版本（Windows, macOS, Linux）。
  2. 安装：按照安装向导完成安装，在安装过程中，建议勾选 "Create Desktop Shortcut"（创建桌面快捷方式）和 "Update PATH variable (restart needed)"（更新 PATH 变量）。
  3. 激活：
    • 学生/教师免费：如果你是学生或教师，可以申请 免费许可。
    • 开源项目免费：如果你的项目是符合定义的开源项目,也可以申请免费许可。
    • 免费试用：可以免费试用 30 天。
    • 购买：购买个人或商业许可。
    • 激活方式：启动 WebStorm 后，选择 Activate...，然后选择 License server,输入官方提供的地址即可。

2 熟悉界面布局

启动 WebStorm 后，你会看到一个功能丰富的界面,了解主要区域的作用是高效工作的第一步。

  • Editor (编辑器)：中间最大的区域，是你编写代码的地方，支持多标签页、分屏等。
  • Tool Windows (工具窗口)：IDE 周围的浮动面板，可以自由拖动、停靠或隐藏。
    • Project (项目)：显示你的项目文件结构,是文件管理的核心。
    • Run (运行)：显示运行程序的控制台输出。
    • Debug (调试)：显示调试过程中的变量、断点等信息。
    • Terminal (终端)：内置的命令行终端，可以直接执行 npm, git 等命令。
    • Git / Mercurial / SVN (版本控制)：显示版本控制的变更、提交历史等。
    • TODO (待办)：列出代码中所有 // TODO: 的注释。
  • Status Bar (状态栏)：位于最底部，显示当前 Git 分支、文件编码、行号、光标位置等信息。
  • Main Menu (主菜单)：顶部的菜单栏,包含所有操作命令。
  • Toolbar (工具栏)：主菜单下方的图标栏,提供常用操作的快捷方式。

提示：你可以通过 View -> Tool Windows 来显示或隐藏任意工具窗口,也可以通过拖动它们的标题栏来重新排列布局。

3 首次配置

  1. 主题与字体：

    webstorm的使用教程
    （图片来源网络，侵删）
    • Settings/Preferences (Windows/Linux: Ctrl+Alt+S; macOS: Cmd+,)
    • 导航到 Appearance & Behavior -> Appearance。
    • 在 Theme 下拉菜单中选择你喜欢的主题（如 Darcula 暗色主题或 IntelliJ Light 亮色主题）。
    • 在 Editor -> Font 中设置你喜欢的字体和大小（推荐 Consolas, JetBrains Mono, Fira Code 等等宽字体）。

  2. 插件安装：

    • 打开 Settings/Preferences -> Plugins。
    • 在 Marketplace 中搜索并安装你需要的插件，
      • Chinese (Simplified) Language Pack: 中文语言包。
      • Prettier - Code formatter: 代码格式化工具。
      • ESLint: JavaScript 代码检查工具。
      • Vue.js: Vue.js 开发增强。
      • React: React 开发增强。

  3. 自动保存：

    • Settings/Preferences -> System Settings -> Synchronization。
    • 确保 Save files on frame deactivation 和 Save files with a delay 是开启的，或者直接勾选 Autosave，让 IDE 自动管理保存。

第二部分：核心功能详解

1 智能代码编辑器

这是 WebStorm 的灵魂所在。

  • 智能代码补全：输入代码时，WebStorm 会根据上下文（变量类型、函数签名等）提供精准的代码建议,远超普通文本编辑器。
  • 实时错误检查：代码中的语法错误、类型错误、潜在的 Bug 会被实时用红色下划线标出,并将错误信息显示在右下角。
  • 快速修复：将光标停在错误或警告上，按 Alt+Enter (macOS: Option+Enter)，WebStorm 会提供修复建议，修正拼写、自动导入缺失的模块、优化代码等。
  • 格式化代码：Code -> Reformat Code (快捷键: Ctrl+Alt+L / Cmd+Option+L) 可以一键按照预设的代码风格格式化整个文件。
  • 代码检查：Code -> Inspect Code... (快捷键: Alt+Ctrl+I / Cmd+Option+I) 可以对整个文件或选中的代码进行深度分析,发现潜在问题。

2 代码导航与搜索

  • 跳转到定义：将光标放在一个变量、函数或类上，按 Ctrl+B (macOS: Cmd+B),可以直接跳转到其定义的地方。
  • 查找用法：Alt+F7 (macOS: Option+F7) 可以在整个项目中查找某个符号（变量、函数等）的所有使用位置。
  • 文件导航：
    • Ctrl+Shift+N (macOS: Cmd+Shift+O)：快速打开任意文件（按文件名搜索）。
    • Ctrl+Shift+Alt+N (macOS: Cmd+Shift+Alt+O)：快速查找并跳转到符号（类、方法、变量等）。
  • 全局搜索：Ctrl+Shift+F (macOS: Cmd+Shift+F)：在整个项目中搜索文本内容。

3 代码重构

重构是在不改变代码外部行为的前提下，改善其内部结构，WebStorm 提供了强大的自动化重构工具。

  • 重命名：选中一个符号（变量名、函数名等），按 Shift+F6，IDE 会智能地重命名所有相关的引用。
  • 提取方法：选中一段代码，按 Ctrl+Alt+M (macOS: Cmd+Option+M),可以将这段代码提取成一个独立的新方法。
  • 提取变量：选中一个复杂的表达式，按 Ctrl+Alt+V (macOS: Cmd+Option+V),可以将其提取为一个新变量。
  • 内联：与提取相反，将一个变量或方法的使用处替换为其定义内容，然后删除定义，快捷键通常是 Ctrl+Alt+N。
  • 其他：还包括更改函数签名、移动类/方法等，你可以在 Refactor 菜单中找到所有重构选项。

4 调试器

调试是查找和修复 Bug 的关键，WebStorm 的图形化调试器非常强大。

  1. 设置断点：在编辑器左侧的行号栏上单击，即可设置一个断点,程序运行到断点时会暂停。
  2. 启动调试：
    • 在代码编辑器右上角，点击绿色的 "Debug" 按钮（虫子图标）。
    • 或者，右键点击代码编辑器空白处，选择 Debug 'xxx'。
  3. 调试控制：
    • Step Over (F8)：执行当前行，如果当前行是函数调用,则进入该函数执行。
    • Step Into (F7)：如果当前行是函数调用,则进入该函数内部。
    • Step Out (Shift+F8)：跳出当前正在执行的函数。
    • Resume (F9)：恢复程序运行,直到遇到下一个断点。
    • Stop (Ctrl+F2)：停止调试。
  4. 查看变量：在调试过程中，Debug 工具窗口会显示当前作用域内的所有变量和它们的值,你可以随时查看和修改它们。

5 版本控制集成

WebStorm 对 Git, SVN, Mercurial 等版本控制系统有深度集成。

  • 状态栏：在底部状态栏可以轻松看到当前文件的 Git 状态（已修改、已暂存、未跟踪等）。
  • 工具窗口：打开 Git 工具窗口，可以可视化地查看变更、暂存区、提交历史。
  • 常用操作：
    • Commit：在 Git 窗口，填写提交信息，点击 Commit 按钮。
    • Push/Pull：在 Git 窗口或状态栏的 Git 分支名上右键选择。
    • 解决冲突：当合并发生冲突时，WebStorm 会用特殊的标记标出冲突部分,并提供可视化工具来解决。
    • 分支管理：轻松创建、切换、合并分支。

6 终端与任务运行器

  • 内置终端：View -> Tool Windows -> Terminal (快捷键: Alt+F12)，WebStorm 集成了一个功能完整的终端，它会自动定位到你的项目根目录，无需手动 cd，你可以在这里运行 npm install, npm run dev 等所有命令。
  • 任务运行器：
    • WebStorm 能智能识别 package.json 中的 scripts。
    • 打开 package.json 文件，在 scripts 部分点击左侧的运行按钮,即可执行对应的脚本。
    • 执行结果会显示在 Run 工具窗口中,非常方便。

第三部分：项目实战与最佳实践

1 创建和管理项目

  • 创建新项目：File -> New Project。
    • 可以选择创建一个空项目，或者基于模板（如 HTML5 Boilerplate, React, Vue, Angular, Node.js Express 等）创建。
    • WebStorm 会自动检测项目类型,并加载相应的插件和配置。
  • 打开已有项目：File -> Open,选择你的项目文件夹。
  • 关闭项目：File -> Close Project。

2 使用 Live Edit 实时预览

这是一个非常酷的功能，可以让你在修改 HTML 和 CSS 时，在浏览器中实时看到效果,无需手动刷新。

  1. 配置：Settings/Preferences -> Build, Execution, Deployment -> Debugger。
  2. 勾选 Auto-reload in Chrome 或 Auto-reload in Firefox。
  3. 使用：
    • 在 HTML 文件中，点击右上角的 "Open in Browser" 按钮。
    • 修改 HTML 或 CSS 代码,浏览器会自动刷新并显示最新结果。

3 自定义代码风格

统一的代码风格对于团队协作至关重要。

  1. Settings/Preferences -> Editor -> Code Style。
  2. 在这里你可以为 HTML, CSS, JavaScript, JSON 等各种语言设置代码风格。
  3. 你可以修改缩进（空格或 Tab）、缩进大小、大括号位置、空格规则等。
  4. 你可以导入或导出配置,以便在团队中共享。

4 使用 Emmet 快速编写 HTML/CSS

Emmet 是一个能极大提升 HTML 和 CSS 编写速度的工具，WebStorm 内置了对 Emmet 的完美支持。

  • 基本语法：
    • div>p -> 生成一个 div 包含一个 p。
    • ul>li*5 -> 生成一个 ul 包含 5 个 li。
    • p.item$*3 -> 生成 3 个 p 类名分别为 item1, item2, item3。
    • lorem -> 生成一段乱文。
  • 使用方法：在编辑器中输入 Emmet 语法，然后按 Tab 键，WebStorm 会自动将其展开为完整的 HTML/CSS 代码。

5 插件生态

WebStorm 的强大之处在于其可扩展性，通过插件,你可以为它添加任何你需要的功能。

  • 安装插件：Settings/Preferences -> Plugins -> Marketplace。
  • 推荐插件：
    • Material Theme UI: 美化界面,提供多种主题和图标。
    • Rainbow Brackets: 用不同颜色匹配括号,提高代码可读性。
    • GitToolBox: 增强 Git 功能，在状态栏显示分支信息、最新提交等。
    • Docker: 开发 Docker 应用必备。
    • WakaTime: 记录你的编码时间。

第四部分：进阶技巧与快捷键

1 必备快捷键

熟练使用快捷键是成为高效开发者的必经之路。

功能 Windows/Linux macOS
代码补全 Ctrl+Space Control+Space
快速修复 Alt+Enter Option+Enter
格式化代码 Ctrl+Alt+L Cmd+Option+L
重构 Ctrl+Alt+Shift+T Ctrl+T
查找文件 Ctrl+Shift+N Cmd+Shift+O
全局搜索 Ctrl+Shift+F Cmd+Shift+F
跳转到定义 Ctrl+B Cmd+B
查找用法 Alt+F7 Option+F7
重命名 Shift+F6 Shift+F6
运行 Ctrl+Shift+F10 Ctrl+R
调试 Alt+Shift+F9 Ctrl+D
切换终端 Alt+F12 Alt+F12

2 多光标编辑

一次在多个位置进行编辑。

  • 添加下一个光标：按住 Ctrl (macOS: Cmd) 并点击你想要添加光标的位置。
  • 选择相同单词：选中一个单词，然后按 Ctrl+G (macOS: Cmd+G)，所有相同的单词都会被选中,并出现多个光标。
  • 列选择：按住 Alt (macOS: Option) 并拖动鼠标，可以创建一个矩形选择区域,非常适合批量修改代码。

3 代码片段

代码片段是预定义好的代码模板,可以通过简短的触发词来快速插入。

  • 使用：输入触发词（如 fori），然后按 Tab 键。
  • 创建：
    1. Settings/Preferences -> Editor -> Live Templates。
    2. 选择语言（如 JavaScript），点击 号创建新模板。
    3. 填写 Abbreviation (触发词)，Template text (代码模板)，可以使用 $VAR$ 定义变量。
    4. 设置 Applicable contexts 为适用的场景（如 JavaScript）。

4 远程开发

WebStorm 支持通过 SSH 或 Docker 连接到远程服务器进行开发，所有文件操作和调试都在远程服务器上完成,而本地机器只负责显示。

  • 配置：Settings/Preferences -> Build, Execution, Deployment -> Deployment。
  • 添加一个新的 SFTP 连接，配置远程服务器的 IP、用户名和密码。
  • 设置本地和远程文件夹的映射关系。
  • 之后，你就可以在 Project 工具窗口中通过右键菜单，直接在远程服务器上打开、编辑和运行文件。

第五部分：总结与资源

1 学习路径建议

  1. 新手：先熟悉界面和核心编辑功能（补全、错误检查、格式化）,掌握最基本的文件和代码导航快捷键。
  2. 进阶：深入学习调试器的使用，熟练运用版本控制（Git）进行日常操作,开始使用代码重构来优化你的代码。
  3. 专家：掌握多光标、代码片段、自定义代码风格等高级技巧，根据你的技术栈（React/Vue/Node.js），深入学习对应的框架支持功能，探索插件生态，打造你专属的 IDE。

2 官方资源

希望这份教程能帮助你快速上手并精通 WebStorm,祝你编码愉快！