::: danger **ArenaPro VSCode 插件版已停止更新与维护**

由于 **VSCode 插件形态在适配能力和扩展性上存在较大限制**，很多开发者难以根据自身项目特点进行灵活配置与升级。结合产品调整与资源集中，我们已决定不再对 **ArenaPro VSCode 插件版** 进行后续功能迭代和文档更新。

- 你 **仍然可以继续使用现有版本**，但如遇到问题或兼容性故障，**我们将不再提供修复和更新**。
- 对于 **已有的老项目**，如果当前工作流稳定，你可以继续使用该插件，无需立刻迁移。
- 对于 **新项目**，我们更推荐使用功能更完整、扩展性更好的 **[ArenaPro CLI 版本](/zh/cli/guide/)**，以获得更好的适配能力和后续支持。

  :::

# 欢迎来到 ArenaPro VSCode 插件版

你好，勇敢的创作者！

你是否曾梦想过，在神岛上构建一个完全属于自己的、拥有独特规则和奇妙体验的互动世界？

在踏上这段激动人心的旅程之前，每位伟大的工匠都需要一套称心如意的工具。接下来，我们将带你“开箱”这套为你量身打造的“创作者工具箱”。它将是你施展创意、将想象变为现实的得力助手。

准备好了吗？让我们开始吧！

## 第一站：指挥中心 (VSCode + ArenaPro)

想象一下，你的面前出现了一个充满未来感的工作台，这就是你的创作“指挥中心”。

### 你的超级工具箱：`VSCode`

**VSCode (Visual Studio Code)** 是你施展所有创造力的“工作室”。它远不止是一个写字的地方，更像一个装备齐全的未来工作台：

- **自带分类格 (语法高亮)**：不同类型的代码（变量、函数、注释）会被自动用不同颜色标记出来，一目了然，让你告别眼花缭乱。
- **零件搜索器 (智能提示)**：当你想要使用某个功能时，只需输入几个字母，它就会“猜”到你想要什么，并把对应的代码直接递到你手上。
- **聘请一位“AI 编程伙伴” (AI 插件)**：通过安装 `GitHub Copilot` 等 AI 插件，你将获得一位经验丰富的“编程大师”坐在你旁边。你只需用一句话描述你想要的功能，它就能帮你将完整的代码写出来！

最重要的是，这个工作台拥有无穷无尽的“扩展插槽”，可以安装各种神奇的工具。而我们最重要的工具，就是下面这个。

### 连接神岛的魔法通道：`ArenaPro`

**ArenaPro** 就是我们为你的 VSCode 工作台安装的第一个，也是最重要的“魔法插件”。它打通了你的工作室与神岛世界之间的连接。

在没有 ArenaPro 的时候，你需要在两个完全不同的地方工作：在编辑器里写代码，然后手动复制粘贴到神岛引擎里去运行和调试，这个过程非常繁琐。

而现在，**ArenaPro 就像一个任劳任怨的机器人助手**，为你带来：

- **一键同步**：你只需要在 VSCode 里轻轻一点保存，ArenaPro 就会瞬间把所有最新的代码同步到神岛，并完美地组装好。
- **实时预览 (HMR 热更新)**：你改了一行代码，游戏里立刻就能看到效果，无需重启游戏，就像导航地图实时更新路况一样。
- **慢动作回放 (Debugger)**：代码出错了？没关系，你可以随时“暂停时间”，像电影慢动作一样，一步步检查代码到底哪里出了问题，轻松修复 Bug。

**简单来说：VSCode 提供了工作台，而 ArenaPro 则让这个工作台变成了为神岛量身定制的“总控室”。**

## 第二站：工坊的“动力核心” (Node.js + TypeScript + Webpack)

现在，你的指挥中心已经就绪。但是，要让整个工坊运转起来，我们还需要强大的“动力核心”在幕后支持。你通常感觉不到它们的存在，但它们是保证一切顺利运行的基石。

### 能量反应堆：`Node.js`

在过去，我们用来编写游戏逻辑的语言 `JavaScript` (简称 JS) 只能生活在“浏览器”这个小岛上。

**Node.js 就好像一个“能量反应堆”**，它被安装到你的电脑上之后，就把 `JavaScript` 从浏览器里解放了出来，并赋予了它读写电脑文件、访问网络等强大的新能力。

**它是我们整个开发流程能够顺利运转的地基。** 我们后续提到的所有自动化工具，都需要在这个“能量反应堆”提供的能源之上才能运行。

### 智能安全系统：`TypeScript`

`JavaScript` 有个小小的“缺点”：它性格太随和了，甚至有点马虎。如果你不小心把一个数字写成了一段文字，它在写代码的时候并不会提醒你，直到游戏运行起来才可能会崩溃。

**TypeScript (简称 TS)**，就是为 JS 配备的一位“智能副驾”或“安全系统”。它要求你在写代码时，就明确告知每个“零件”的规格（即“类型”）。

```ts
// 以前的 JS，你可以这么写，但有隐患
function addHealth(player, amount) {
  player.health = player.health + amount;
}

// 现在用 TS，必须“说清楚”，否则安全系统会报警
function addHealth(player: Player, amount: number) {
  player.health = player.health + amount;
}
```

当你试图传入一个错误的零件时，`TypeScript` 会立刻在你的编辑器里画出红线并发出警报。**这能让你在写代码的那一刻，就消灭掉绝大多数潜在的 Bug！** 这也是 ArenaPro 默认使用 TypeScript 的原因。

### 全自动打包机：`Webpack`

当你用 TypeScript 写了成百上千个代码文件，还引入了图片、音效等各种素材后，我们如何把这些零散的“原材料”变成神岛引擎能“吃”下去的成品呢？

答案就是 **Webpack**，一个在幕后工作的“全自动魔法打包机”。

它会自动分析你所有的代码和资源，然后：

1.  **翻译**：把 `TypeScript` 代码翻译成神岛引擎认识的 `JavaScript` 代码。
2.  **打包**：把所有零散的文件，智能地合并、压缩成一两个可以直接上传的成品文件。

**你只需要负责创作，Webpack 会像一个强大的中央厨房，为你搞定所有“洗菜、切菜、烹饪”的繁琐过程。**

## 第三站：时光机与协作蓝图 (`Git`)

你的工坊已经全副武装，可以开始创造了！但别急，还有最后一样宝物。

想象一下，你正在建造一个复杂的建筑，或者玩一个高难度的游戏，你会做什么？

**存档！**

**Git 就是你代码世界的“存档系统”和“时光机”。** 它能让你：

- **随时“存档” (Commit)**：在代码的任何一个稳定节点，创建一个“存档点”。
- **读档/穿越 (Checkout)**：随时可以回到过去的任何一个“存档点”，查看甚至恢复当时的代码。再也不怕把代码改坏了！
- **开辟平行世界 (Branch)**：当你想要尝试一个新功能时，可以创建一个“分支”，在这个“平行世界”里尽情探索，而完全不用担心会影响到你的主线版本。

更重要的是，**Git 还是团队协作的基石**。它就像一个“项目云端蓝图中心”，让你可以和朋友们一起，在各自的分支上独立工作，互不干扰，最后再安全地将大家的心血合并到一起。

**不使用 Git 进行开发，就像玩一个不能存档的高难度游戏，危险且低效。** 掌握它，你将真正迈入专业创作者的大门。

## 工具箱一览

恭喜！你已经完成了对整个“创作者工具箱”的开箱检验！让我们来回顾一下：

- **指挥中心**:
  - `VSCode`: 你的超级工作台。
  - `ArenaPro`: 连接神岛的魔法通道。
- **动力核心**:
  - `Node.js`: 赋予 JS 超能力的能量堆。
  - `TypeScript`: 保证代码质量的智能安全系统。
  - `Webpack`: 将原材料变为成品的自动打包机。
- **保障体系**:
  - `Git`: 防止代码丢失的时光机与团队协作蓝图。

所有基础概念已经铺垫完毕，让我们从 **[安装 ArenaPro 插件](/zh/guide/02-getting-started/01-install)** 开始，正式踏上激动人心的创造之旅吧！
