# 第一步：安装开发环境

欢迎来到 ArenaPro 的世界！在开始你的创作之旅前，我们需要先搭建好专业的开发环境。本章将引导你完成所有必要工具的安装，为后续的开发工作打下坚实的基础。

## 📋 环境要求

| 工具              | 版本要求  | 用途                              |
| ----------------- | --------- | --------------------------------- |
| **VS Code**       | `v1.9.0+` | 专业的代码编写与项目管理工具      |
| **Node.js**       | `v20+`    | 代码编译和打包所需的基础运行环境  |
| **ArenaPro 插件** | 最新版    | 连接 VS Code 与神岛平台的核心插件 |

## 1️⃣ 安装 VS Code (Visual Studio Code)

VS Code 是一款功能强大且免费的代码编辑器，它将是你未来编写代码、管理项目的主要工具。

> 如果你已经安装了 VS Code，请直接跳到下一步。

1.  **访问官网**：打开 [VS Code 官方网站](https://code.visualstudio.com/)。
2.  **下载安装**：点击网站首页的下载按钮，下载对应你操作系统的安装包，然后按默认设置完成安装。
3.  **编辑器汉化**：可选功能，点击 [简体中文插件](vscode:extension/MS-CEINTL.vscode-language-pack-zh-hans) 安装，安装后点击右下角弹出框的提示，切换为中文。

## 2️⃣ 安装 Node.js

Node.js 是 ArenaPro 用来进行代码编译、打包等重要任务所必需的底层环境。

> 如果你已经安装了 Node.js，请直接跳到下一步。

1.  **访问官网**：打开 [Node.js 官方网站](https://nodejs.org/)。
2.  **下载安装**：点击网站首页的下载按钮，下载对应你操作系统的安装包，然后按默认设置完成安装。

### 验证安装

安装完成后，我们需要在“终端”里验证一下。终端是一个通过输入文本命令来和电脑交互的工具。

**最简单的方式是使用 VS Code 内置的终端：**

1.  打开 VS Code。
2.  从顶部菜单栏选择 `终端(Terminal)` > `新建终端(New Terminal)`。
3.  在下方出现的面板中，输入以下命令并按回车：

```bash
node -v
```

如果能看到版本号输出，就说明你已成功安装。

> **❓ 命令未找到？**
> 如果终端提示 `node` 命令未找到或无法识别，这通常是因为系统的环境变量（PATH）在新安装后尚未刷新。请尝试：
>
> 1.  **重启 VS Code**：完全关闭所有 VS Code 窗口，然后重新打开。
> 2.  如果问题依旧，**重启电脑**。这会强制系统加载所有最新的配置。

<details>
<summary><b>或者，你也可以使用系统自带的终端 (点击展开)</b></summary>

- **Windows 用户**:
  - 按下 `Win` 键，输入 `cmd` 或 `PowerShell`，然后打开它。
- **macOS 用户**:
  - 在 `Launchpad` (启动台) 的 `其他` 文件夹里找到 `终端 (Terminal)`。
  - 或者，按下 `Cmd + 空格`，输入 `Terminal` 并打开。

</details>

## 3️⃣ 安装 ArenaPro Creator 插件

这是最后一步。ArenaPro 插件是连接 VS Code 和神岛平台的桥梁。

1.  **打开 VS Code**。
2.  **访问插件市场**：点击 VS Code 左侧边栏的“扩展”图标 (四个方块的标志)。
3.  **搜索并安装**：在搜索框中输入 `ArenaPro Creator`，找到插件后点击“安装”按钮。
    - 你也可以直接点击此链接进行安装：[安装 ArenaPro Creator 插件](vscode:extension/box3lab.box3arenapro)。

![在扩展市场中搜索并安装插件](/QQ20240926-151900.png)

插件安装后，会自动检查你的 Node.js 版本是否符合要求。如果一切正常，你的开发环境就已经全部准备就绪。

## ✅ 安装完成

恭喜你！现在，你可以进入下一章节，学习如何 **[创建你的第一个 ArenaPro 项目](./02-create-project.md)** 了。

现在，你的开发环境已经准备就绪。在下一篇指南中，我们将一起创建第一个 ArenaPro 项目。
