WebStorm 安装全教程 (Windows, macOS, Linux)

WebStorm 是由 JetBrains 公司推出的功能强大的 JavaScript IDE，特别适用于前端和全栈 Web 开发，本教程将引导你完成从下载、安装、激活到配置的每一个步骤。

第一步：下载 WebStorm

1. 访问官网： 打开你的浏览器，访问 JetBrains WebStorm 的官方网站：https://www.jetbrains.com/webstorm/

2. 选择版本：

   • Download 按钮：点击后会自动检测你的操作系统并下载最新稳定版,这是大多数用户的选择。
   • All Platforms：如果你想手动选择其他操作系统（如 Windows, macOS, Linux）或下载旧版本,可以点击这里。

3. 选择安装类型（重要！）：

   • Free Trial (30天)：如果你是第一次使用，可以选择此选项，它将获得一个全功能的 30 天免费试用版。
   • Free for students and teachers：如果你是学生或教师，可以申请免费的许可证，你需要使用 .edu 邮箱或通过其提供的身份验证渠道进行申请。
   • Free and open-source projects：如果你参与的是符合其条件的开源项目,也可以申请免费许可。

   对于新手，强烈建议先选择“Free Trial”,体验完整功能后再决定是否购买或申请免费许可。

4. 下载安装包： 点击 "Download" 按钮，等待下载完成，安装包根据平台不同，通常是一个 .exe (Windows), .dmg (macOS), 或 .tar.gz (Linux) 文件。

第二步：安装 WebStorm

安装过程在不同操作系统上略有不同,但都非常直观。

Windows 系统安装

1. 运行安装程序： 找到下载好的 WebStorm-...exe 文件,双击运行。

2. 选择安装位置：

   • 默认路径通常是 C:\Program Files\JetBrains\WebStorm ...。
   • 你可以点击 Browse... 更改安装路径，C 盘空间不足,建议安装到其他盘符。
   • 点击 Next。

3. 创建桌面快捷方式：

   • 勾选 Create Desktop Shortcut，这样你就可以从桌面快速启动 WebStorm。
   • 点击 Next。

4. 开始安装： 点击 Install 按钮,安装程序会自动完成所有工作。

5. 完成安装： 安装完成后，点击 Finish，通常会自动勾选 Run WebStorm,你可以直接启动它。

macOS 系统安装

1. 打开 DMG 文件： 双击下载的 WebStorm...dmg 文件,它会挂载成一个虚拟磁盘。

2. 拖拽到 Applications： 会看到一个窗口，里面有一个 WebStorm 的图标。将这个图标直接拖拽到右侧的“应用程序”文件夹中。

3. 打开 WebStorm： 打开你的“应用程序”文件夹，双击 WebStorm 图标即可启动。

4. 绕过 Gatekeeper (如果需要)： 如果系统提示“无法验证开发者”,请按以下步骤操作：

   • 打开“系统设置” > “隐私与安全性”。
   • 在最下方，你会看到“App Store 和被认可的开发者”旁边有一个关于 WebStorm 的警告。
   • 点击“仍然打开”,即可运行。

Linux 系统安装

Linux 系统有几种安装方式，推荐使用 Snap 或 AppImage,因为它们最简单且能自动更新。

• 使用 Snap (推荐)

  1. 确保你的系统已安装 Snap。
  2. 打开终端，运行以下命令：

     sudo snap install webstorm --classic

  3. 安装完成后，可以在应用菜单中找到 WebStorm，或在终端输入 webstorm 启动。

• 使用 AppImage

  1. 下载 .AppImage 文件。
  2. 给文件添加可执行权限：

     chmod +x WebStorm-*.AppImage

  3. 双击运行或在终端中执行：

     ./WebStorm-*.AppImage

• 使用 .tar.gz 安装包 (不推荐新手)

  1. 下载 .tar.gz 文件。
  2. 解压到你喜欢的目录，~/opt。
  3. 进入解压后的 bin 目录，运行 ./webstorm.sh 启动。
  4. 注意：这种方式需要手动处理更新和路径配置。

第三步：激活与配置

启动 WebStorm 后,需要进行一些初始配置。

导入设置

首次启动时，WebStorm 会询问你是否要导入之前的设置。

• 如果你是第一次使用，选择 "Do not import settings"。
• 如果你之前使用过其他 JetBrains IDE (如 IntelliJ IDEA)，可以选择从该路径导入,这样快捷键和插件设置可以复用。

激活 WebStorm

这是关键一步,你需要一个有效的许可证。

• 选项 A：使用 30 天免费试用

  最简单直接，点击 "Evaluate for free"，即可获得 30 天全功能使用。

• 选项 B：激活许可证

  • 如果你已经购买了许可证或申请到了免费许可，点击 "Activate..."。
  • 通过账户激活：输入你的 JetBrains 账户邮箱和密码，这是最推荐的方式,方便管理多台机器的许可证。
  • 激活码：如果你有一个单独的激活码，选择 "Activation code"，然后输入码并点击 "Activate"。

• 选项 C：离线激活

  • 如果你的电脑无法连接到互联网,可以使用离线激活。
  • 点击 "Activate..."，然后选择 "Offline activation"。
  • WebStorm 会生成一个 Offline Activation.properties 文件，你需要将这个文件上传到有网络的电脑，访问 JetBrains 提供的离线激活页面，它会返回一个 activation.key 文件。
  • 将下载的 activation.key 文件拖回离线电脑的 WebStorm 激活窗口中,即可完成激活。

配置初始设置

激活后，WebStorm 会引导你进行一些基本配置。

1. UI 主题： 你可以选择 Light (浅色)、Darcula (深色，默认) 或 High contrast (高对比度)，建议新手使用 Darcula,对眼睛更友好。

2. 关键映射： 你可以选择你熟悉的编辑器快捷键方案，

   • Windows / Linux: Default (IntelliJ IDEA), Visual Studio, Eclipse, NetBeans。
   • macOS: macOS Keymap (默认), Eclipse, Visual Studio - Classic。
   • 强烈建议新手使用 Default,因为它功能最全面且经过优化。

3. 启用 Early Access Program (可选)： 如果你希望提前体验最新、最前沿的功能，可以勾选此项，但请注意，EAP 版本可能不够稳定。

4. 完成向导： 点击 "Start Using WebStorm",进入主界面。

第四步：首次使用与基本配置

现在你已经进入了 WebStorm 的主界面，让我们做一些基本配置,让它更符合你的使用习惯。

插件市场

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

• 打开设置：File > Settings (Windows/Linux) 或 WebStorm > Settings (macOS)。
• 导航到 Plugins。
• 在市场标签页，你可以搜索并安装各种插件，
  • Chinese Language Pack: 提供完整的中文界面。
  • Vetur 或 Vue Language Features (Volar): Vue.js 开发必备。
  • ESLint: 代码质量检查工具。
  • Prettier: 代码格式化工具。

新建项目

1. 点击欢迎界面的 "New Project"。
2. Location: 选择你想要创建项目的文件夹。
3. Type: 选择你的项目类型，如 Static Website (静态网站), Node.js Express App (Node.js 后端) 等。
4. 点击 "Create"。

终端集成

WebStorm 内置了一个强大的终端。

• 在窗口底部，点击 Terminal 标签，即可直接在 IDE 中打开命令行。
• 你可以直接在这里运行 npm install, git 命令等,无需切换到外部终端。

常见问题与解决方案

• Q: 启动速度很慢怎么办？

  • A: 这很正常，因为 WebStorm 功能强大，启动时需要加载大量插件和索引，你可以尝试：
    1. 在 Settings > Appearance & Behavior > System Settings 中，勾选 Offline mode (离线模式),可以加快启动速度。
    2. 禁用不必要的插件 (Settings > Plugins > Installed)。
    3. 关闭项目，重启 IDE。

• Q: 许可证快到期了怎么办？

  • A: 如果你是付费用户，可以在账户中续费，试用期用户可以在过期前重新申请一个试用版（虽然官方不鼓励，但技术上可行）。

• Q: 如何卸载 WebStorm？

  • Windows: 通过 "控制面板" > "程序和功能" 卸载。
  • macOS: 将 "应用程序" 文件夹中的 WebStorm 拖到废纸篓即可。
  • Linux (Snap): sudo snap remove webstorm。