WebStorm 安装全攻略 (2025 最新版)

WebStorm 是 JetBrains 公司出品的一款功能强大的 JavaScript IDE，为前端开发提供了顶级的代码编辑、调试和项目管理体验，本教程将引导你完成从零开始的安装和配置。

webstorm 安装教程
（图片来源网络，侵删）

第一部分：准备工作

在开始安装之前,请确保你已经：

  1. 一台可用的电脑：

    • 操作系统：Windows 10/11, macOS 10.15+, 或主流 Linux 发行版 (如 Ubuntu, Fedora)。
    • 内存：建议至少 8GB，推荐 16GB 或以上，以保证流畅运行。
    • 硬盘空间：至少需要 2GB 的可用空间。

  2. 一个 JetBrains 账户：

    • 这是必须的，因为 WebStorm 是付费软件，你需要一个账户来下载、激活和管理许可证。
    • 访问 JetBrains 官网 点击 "Sign In / Sign Up" 创建一个免费账户。

第二部分：下载 WebStorm

  1. 访问官网：

    webstorm 安装教程
    （图片来源网络，侵删）

  2. 选择版本：

    • Stable Channel (稳定版)：这是大多数用户的选择，经过充分测试，非常稳定，推荐新手和日常开发使用。
    • EAP (Early Access Program, 预览版)：包含最新功能，但可能存在不稳定的问题，适合希望体验新功能的开发者。
    • 我们以 稳定版 为例进行讲解。

  3. 选择操作系统：

    • 网站会自动检测你的操作系统,并提供对应的下载选项。
    • Windows: 提供 .exe 安装程序。
    • macOS: 提供 .dmg 磁盘映像文件。
    • Linux: 提供 .tar.gz 压缩包。

  4. 下载：

    点击 "Download" 按钮开始下载。

    webstorm 安装教程
    （图片来源网络，侵删）

第三部分：安装步骤 (分操作系统详解)

A. Windows 系统安装 (以 .exe 为例)

  1. 运行安装程序：

    • 下载完成后,找到 WebStorm-<version>.exe 文件，双击运行。
    • 如果系统弹出“用户账户控制”对话框，点击“是”以允许程序对计算机进行更改。

  2. 选择安装选项：

    • Destination Folder：选择安装路径，默认路径即可，如果你 C 盘空间不足，可以更改为其他盘符。
    • 64-bit launcher：勾选此项，为 64 位系统创建快捷方式。
    • Create Desktop Shortcut：勾选此项，在桌面创建快捷方式。
    • Update PATH variable (restart needed)：强烈建议勾选此项，这会将 WebStorm 添加到系统环境变量中，你就可以在任何目录下通过命令行启动 WebStorm。

  3. 开始安装：

    点击 "Install" 按钮，等待安装进度条完成。

  4. 完成安装：

    • 安装完成后,点击 "Next" -> "Finish"。
    • 如果勾选了 "Update PATH"，此时需要重启电脑使配置生效。

B. macOS 系统安装 (以 .dmg 为例)

  1. 挂载 DMG 文件：

    • 下载完成后,双击 WebStorm-<version>.dmg 文件，它会挂载成一个虚拟磁盘。

  2. 拖拽到应用程序：

    • 在弹出的窗口中,你会看到一个名为 "WebStorm" 的图标，还有一个名为 "Applications" (应用程序) 的文件夹图标。
    • 将 WebStorm 图标直接拖拽到 Applications 文件夹图标中，这是 macOS 应用安装的标准方式。

  3. 打开 WebStorm：

    • 打开你的 "应用程序" 文件夹，找到 WebStorm，双击打开。
    • 首次打开时，系统可能会提示你“来自身份不明的开发者”，无法打开，这是因为你从官网下载，未经过 Apple 的公证。
    • 解决方法：
      1. 进入 系统偏好设置 > 安全性与隐私。
      2. 在通用标签页下,你会看到一条关于 WebStorm 的警告信息。
      3. 点击 “仍要打开” 或解锁后点击 “允许来自以下位置的应用”，然后选择 WebStorm。

  4. 完成安装：

    之后就可以正常启动和使用 WebStorm 了。

C. Linux 系统安装 (以 .tar.gz 为例)

在 Linux 上，推荐使用 tar.gz 压缩包进行安装，这种方式最通用，不会污染系统包管理器。

  1. 下载并解压：

    • 打开终端,使用 cd 命令进入你下载文件的目录。
    • 执行以下命令进行解压（请将文件名替换为你实际下载的文件名）：
      tar -xzf WebStorm-<version>.tar.gz
    • 解压后,会生成一个名为 WebStorm-<version> 的文件夹。

  2. 移动到 opt 目录 (推荐)：

    • 为了方便管理,通常会将大型软件移动到 /opt 目录下。
      sudo mv WebStorm-<version> /opt/webstorm

  3. 创建桌面快捷方式：

    • 为了能像其他应用一样方便地启动,我们创建一个 .desktop 文件。
    • 创建一个文件,webstorm.desktop：
      sudo nano /usr/share/applications/webstorm.desktop
    • 在文件中输入以下内容（请确保路径正确）：
      [Desktop Entry]
Version=1.0
Type=Application
Name=WebStorm
Icon=/opt/webstorm/bin/webstorm.svg
Exec="/opt/webstorm/bin/webstorm.sh" %f
Comment=A powerful IDE for modern web development
Categories=Development;IDE;
Terminal=false
StartupNotify=true
    • 保存并退出 (在 nano 中是 Ctrl+X，然后按 Y，再按 Enter)。

  4. 赋予执行权限：

    • 为了能通过命令行启动,需要给启动脚本添加执行权限。
      sudo chmod +x /opt/webstorm/bin/webstorm.sh
    • 你可以在应用菜单中找到 WebStorm，或者在终端中输入 webstorm 来启动它。

第四部分：激活与配置

安装完成后,首次启动 WebStorm 会要求你进行激活和配置。

  1. 启动 WebStorm：

    双击桌面快捷方式或在应用菜单中打开 WebStorm。

  2. 选择导入设置：

    • 如果是第一次使用,选择 "Do not import settings"。
    • 如果你之前安装过其他 JetBrains 产品（如 IntelliJ IDEA），可以选择从那里导入设置。

  3. 激活 WebStorm：

    • 这是最关键的一步,弹出的激活窗口提供了几种方式：
      • Trial (30天免费试用)：如果你只是想先试用一下，可以选择此选项，试用期结束后，你需要购买许可证才能继续使用。
      • License server：
        • 这是最受欢迎的激活方式之一,使用一个公共的许可证服务器地址，可以免费激活 JetBrains 全家桶。
        • 注意：公共 License Server 地址可能随时失效或被封禁，你需要在网上搜索最新的、可用的 License Server 地址（通过搜索引擎搜索 "JetBrains License Server 2025"）。
        • 在 "License server address" 输入框中填入你找到的有效地址，然后点击 "Activate"。
      • Activation code：

        如果你购买了正版许可证,会收到一个激活码，在这里输入即可。

      • Account：

        登录你的 JetBrains 账户，如果你的账户下有有效的许可证（你个人购买的，或公司/学校提供的），会自动激活。

  4. 配置主题和插件：

    • 成功激活后,WebStorm 会引导你完成一些初始配置。
    • Appearance (外观)：选择你喜欢的主题，如 "IntelliJ Light"（亮色）、"Darcula"（暗色）或 "High contrast"（高对比度），暗色主题是开发者的最爱。
    • Plugins (插件)：WebStorm 已经包含了开箱即用的核心功能，但你还可以安装更多插件来增强功能。
      • 推荐插件：
        • Prettier: 代码格式化工具，保持代码风格统一。
        • ESLint: 代码质量检查工具，发现潜在问题。
        • Vue.js: 如果你开发 Vue 项目，安装此插件可以获得更好的支持。
        • React: 如果你开发 React 项目，安装此插件。
      • 你可以在 Settings/Preferences > Plugins 中搜索并安装。

第五部分：首次使用与技巧

  1. 创建新项目：

    • File > New > Project...
    • 选择你想要创建的项目类型,如 HTML5, Node.js Express, React, Vue 等，然后选择项目路径和包管理器（npm, yarn, pnpm），点击 "Create"。

  2. 常用快捷键：

    • Windows/Linux:
      • Ctrl + Shift + A: 搜索任何操作或设置。
      • Ctrl + N: 快速查找类/文件。
      • Ctrl + Shift + N: 快速查找文件。
      • Ctrl + Alt + L: 格式化代码。
      • Ctrl + /: 注释/取消注释代码。
      • Alt + Enter: 智能修复代码问题。
    • macOS:
      • Cmd + Shift + A: 搜索任何操作或设置。
      • Cmd + O: 快速查找类/文件。
      • Cmd + Shift + O: 快速查找文件。
      • Cmd + Option + L: 格式化代码。
      • Cmd + /: 注释/取消注释代码。
      • Alt + Enter: 智能修复代码问题。

  3. 更新 WebStorm：

    • Help > Check for Updates...，WebStorm 会定期检查并提供更新。

恭喜！现在你已经成功安装并配置好了 WebStorm，它是一个功能极其丰富的工具，随着你使用的深入，你会发现越来越多能极大提升开发效率的特性，如果你在使用过程中遇到任何问题，可以随时查阅 WebStorm 官方文档，或者使用 Ctrl+Shift+A 搜索功能，它几乎能回答你所有关于 IDE 操作的问题。

祝你编码愉快！