WebStorm 完整下载与使用教程

WebStorm 是由 JetBrains 公司推出的，专门为现代 JavaScript 开发而设计的集成开发环境，它提供了极其强大的代码补全、导航、重构和调试功能，能极大地提升前端开发效率。

本教程将分为以下几个部分：

1. 系统要求：确保你的电脑能流畅运行。
2. 下载 WebStorm：从官网获取安装包。
3. 安装 WebStorm：详细的安装步骤。
4. 首次启动与配置：导入设置、选择主题等。
5. 激活与授权：如何免费试用或使用正版许可。
6. 创建第一个项目：实战演练。
7. 常用功能简介：快速上手核心功能。
8. 常见问题解答：解决你可能遇到的疑惑。

第一步：系统要求

在下载之前,请确保你的计算机满足以下最低要求，以获得最佳体验：

• 操作系统:
  • Windows 10/11 (64-bit)
  • macOS 10.15 (Catalina) 或更高版本
  • 任何主流的 Linux 发行版 (如 Ubuntu 18.04+)
• 内存: 至少 4GB RAM，推荐 8GB 或更多。
• 硬盘空间: 至少 2GB 的可用空间。
• 屏幕分辨率: 最低 1024x768。
• Java 运行环境: WebStorm 基于 JVM，安装程序通常会自动捆绑所需版本的 JBR (JetBrains Runtime)，无需你手动安装 Java。

第二步：下载 WebStorm

1. 访问官网: 打开浏览器，访问 WebStorm 官方下载页面：https://www.jetbrains.com/webstorm/download/

2. 选择版本:

   • Stable Release (稳定版): 这是推荐大多数用户下载的版本，经过充分测试，稳定可靠。
   • EAP (Early Access Program, 预览版): 面向喜欢尝鲜的用户，包含最新功能和 bug 修复，但不稳定，可能存在风险。
   • Previous Versions (旧版本): 如果你有兼容性需求，可以在这里下载历史版本。

3. 选择操作系统: 官网会自动检测你的操作系统并提供对应的下载链接，你也可以手动点击 Windows, macOS, 或 Linux 的图标进行切换。

4. 下载安装包: 点击 "Download" 按钮，下载 .exe (Windows), .dmg (macOS), 或 .tar.gz (Linux) 安装包。

第三步：安装 WebStorm

安装过程根据操作系统略有不同。

Windows 系统安装

1. 找到下载的 WebStorm-<version>.exe 文件，双击运行。
2. 在弹出的安全提示窗口中,点击 "是"。
3. 选择安装位置: 你可以使用默认路径，也可以点击 "Browse..." 选择一个自定义位置。
4. 选择开始菜单文件夹: 默认即可，也可以修改。
5. 选择附加任务:
   • Create Desktop Shortcut: 在桌面创建快捷方式，方便启动。
   • Update PATH variable (restart needed): 将 WebStorm 添加到系统环境变量。强烈建议勾选，这样你就可以在命令行中直接使用 webstorm 命令。
   • Update context menu: 在右键菜单中添加 "Open Folder as WebStorm Project" 选项，方便快速打开项目。
6. 点击 "Install" 开始安装，等待几秒钟，安装完成后点击 "Finish"。

macOS 系统安装

1. 找到下载的 WebStorm-<version>.dmg 文件，双击它，会挂载成一个虚拟磁盘。
2. 打开挂载的磁盘,你会看到一个 WebStorm 图标。
3. 将 WebStorm 图标 拖拽 到你的 "应用程序" 文件夹中。
4. 拖拽完成后,在 "访达" 的 "应用程序" 文件夹里找到 WebStorm 并双击启动。
5. 首次启动时，系统可能会提示 "来自身份不明的开发者"，你需要在 "系统偏好设置" > "安全性与隐私" 中，点击 "仍要打开"。

Linux 系统安装

Linux 系统有几种安装方式，推荐使用 Snap 或 下载 AppImage，因为最简单。

• 使用 Snap (推荐):

  sudo snap install webstorm --classic

  使用 webstorm 命令即可启动。

• 下载 AppImage (推荐):

  1. 从官网下载 .AppImage 结尾的文件。
  2. 给文件添加可执行权限：chmod +x WebStorm-<version>.AppImage
  3. 双击运行或在终端中执行 ./WebStorm-<version>.AppImage。

• 手动安装 (通过 .tar.gz):

  1. 下载 .tar.gz 文件并解压。
  2. 进入解压后的 bin 目录。
  3. 执行 ./webstorm.sh 来启动 IDE。

第四步：首次启动与配置

1. 启动 WebStorm: 双击桌面快捷方式或在应用程序中找到 WebStorm 并启动。
2. 导入设置: 首次启动时，会弹出一个窗口询问是否导入之前的设置，如果你是第一次使用，选择 "Do not import settings" 即可。
3. 主题与外观: 你可以立即选择一个主题，点击 "Appearance & Behavior" > "Appearance"，然后在 "Theme" 下拉菜单中选择 "Darcula" (深色) 或 "IntelliJ Light" (浅色)，点击 "Apply" 应用。
4. 关键插件: WebStorm 默认安装了最核心的插件，你可以稍后在 "Settings/Preferences" > "Plugins" 中管理和安装更多插件（如 Vue.js, React, ESLint 等）。

第五步：激活与授权

WebStorm 是一款付费软件，但提供了非常友好的免费试用和免费许可选项。

免费试用 (30天)

1. 启动 WebStorm 后，会自动弹出激活窗口。
2. 选择 "Evaluate for free"。
3. 点击 "Evaluate"，你将获得 30 天的全功能免费使用期。

使用免费许可 (学生、教师、开源项目)

如果你是学生、教师，或者你的项目符合开源许可，可以申请免费许可。

1. 访问 JetBrains 官方许可申请页面：https://www.jetbrains.com/shop/eform/student
2. 填写你的信息,并验证你的学生身份（通常需要学校邮箱）。
3. 审核通过后,你会收到一封邮件，邮件中包含一个 .zip 文件，里面是你的 license.key 文件。
4. 在 WebStorm 的激活窗口中，选择 "Activate"。
5. 选择 "License server"。
6. 在输入框中填入 JetBrains 的公共许可服务器地址：https://services.jetbrains.com/sso
7. 点击 "Activate"，即可成功激活。

购买正版

如果你是商业用户,可以选择购买正版授权。

1. 在激活窗口选择 "Activate"。
2. 选择 "License server"。
3. 输入你购买后收到的服务器地址或激活码。
4. 点击 "Activate"。

第六步：创建你的第一个项目

让我们用 WebStorm 创建一个简单的 HTML 项目。

1. 点击欢迎界面上的 "New Project"。
2. Name: 给你的项目起个名字，my-first-project。
3. Location: 选择项目存放的路径。
4. Type: 选择 "Static Website"，这是创建纯 HTML/CSS/JS 项目的最佳选择。
5. 模板: 可以选择一个预定义的模板，"HTML5 boilerplate"，或者留空。
6. 点击 "Create"。

WebStorm 会为你创建项目结构，并自动打开 index.html 文件，你可以在右侧的编辑器中编写代码，在左下角的 "Run" 窗口中实时预览效果。

第七步：常用功能简介

WebStorm 功能强大，这里介绍几个最核心、最常用的功能，帮助你快速上手：

• 代码编辑与智能补全:

  • 输入代码时,WebStorm 会自动提供上下文相关的建议（变量、函数、HTML 标签等）。
  • 按 Ctrl + Space (Windows/Linux) 或 Cmd + Space (macOS) 可以手动触发补全。

• 代码导航:

  • 按住 Ctrl 并点击 (Windows/Linux) 或 Cmd 并点击 (macOS) 任何函数、变量或类名，可以快速跳转到其定义处。
  • 使用 Shift + F12 查看当前符号的所有引用。

• 代码格式化:

  • 选中代码或直接按 Ctrl + Alt + L (Windows/Linux) 或 Cmd + Option + L (macOS)，可以一键格式化代码，使其符合统一的风格。

• 运行和调试:

  • 运行: 点击编辑器右上角的绿色 "Run" 按钮（▶），或在代码中右键选择 "Run 'index.html'"。
  • 调试: 点击右上角的 "Debug" 按钮（🐞），可以设置断点，逐行执行代码，查看变量值，是排查 Bug 的利器。

• 终端集成:

  • 在 WebStorm 底部点击 Terminal 标签，可以直接在 IDE 内打开命令行，无需切换窗口，非常适合运行 npm install 或 git 命令。

第八步：常见问题解答

Q: WebStorm 启动很慢怎么办？ A: 这通常是因为项目太大或插件过多，可以尝试：

1. 关闭不必要的插件：File > Settings > Plugins，禁用不用的插件。
2. 增加分配给 WebStorm 的内存：Help > Customize Memory Settings，适当调高 -Xms 和 -Xmx 的值。
3. 使用 "Safe Mode" 启动，排查是否是插件冲突导致的问题。

Q: 如何更新 WebStorm？ A: Windows/Linux: Help > Check for Updates...，macOS: WebStorm > Check for Updates...，或者直接下载新版本覆盖安装。

Q: 试用期快结束了怎么办？ A: 如果你是学生或教师，请尽快申请免费许可，如果不是，可以购买正版，试用期结束后，WebStorm 会进入只读模式，你只能查看代码，不能编辑。

Q: 中文界面怎么设置？ A: File > Settings > Appearance & Behavior > Appearance，在 "UI Options" 中找到 "UI language"，选择 "Chinese (Simplified)"，然后重启 WebStorm。