# ArenaPro Creator

**Repository Path**: box3lab/arena-vscode-plugin

## Basic Information

- **Project Name**: ArenaPro Creator
- **Description**: ArenaPro Creator 旨在攻克神岛Arena编辑器使用上的难题，通过与其生态中强大的VSCode编辑器实现无缝对接，极大地扩展了创作者的创作效率。让创作者能够更专注于代码创作本身，无需为繁琐的编辑操作分心，从而激发无限创意与灵感。
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://box3lab.com/
- **GVP Project**: No

## Statistics

- **Stars**: 23
- **Forks**: 5
- **Created**: 2024-07-04
- **Last Updated**: 2026-01-10

## Categories & Tags

**Categories**: text-editor

**Tags**: None

## README

# 🚀 神岛Arena编辑器专业版 | ArenaPro Creator

- **双形态编辑器**：支持 Arena 在线编辑器（轻便易上手）与 ArenaPro 本地编辑器（极致效率、专业流程），满足不同创作者需求。
- **统一模块规范**：前后端全面采用 ES Modules，代码复用更简单，生态兼容性更强。
- **Git 原生集成**：轻松管理分支、合并与历史追溯，团队协作无忧。
- **NPM 生态开放**：自由引入现代 NPM 包，快速构建高质量项目。
- **资源同步**：一键同步地图资源，自动生成资源清单，告别手动复制和路径错误。
- **数据库可视化**：无需运行游戏，直接在 VS Code 中远程管理和编辑地图数据库。
- **自动化代码质量**：集成 ESLint/Prettier，统一团队代码风格。
- **VS Code 生态兼容**：支持 VS Code、Cursor、Trae 等主流 AI 编程工具。

## 🆚 在线 vs 本地：选择你的最佳工作流

| 特性             | Arena 在线编辑器       | ArenaPro 本地编辑器      |
|------------------|----------------------|-------------------------|
| 适用场景         | 新手/快速试水         | 专业/高效/团队协作      |
| 运行环境         | 浏览器                | VS Code 插件            |
| 代码风格         | 基础支持              | TypeScript/ESM/自动化   |
| 资源管理         | 手动                  | 一键同步/自动补全       |
| 数据库操作       | 游戏内                | VS Code 可视化          |
| 扩展能力         | 有限                  | NPM/AI/多插件           |

## 🛠️ 快速开始

### 系统要求

- Node.js v20+
- Visual Studio Code 1.90+
- Windows 10/11 / macOS / Linux

### 安装与使用

1. 在 VS Code 插件市场搜索并安装 `ArenaPro Creator`。
2. 打开神岛项目文件夹，按 `Alt + Y` 或在命令面板输入“同步地图资源”。
3. 享受智能资源补全、数据库可视化等专业功能。

## 💡 亮点功能详解

### 统一模块语法

无论前端还是后端，全部采用 ES Modules 语法：

```js
import { sayHello } from "./utils";
sayHello();
```

### 资源同步与自动补全

- 所有地图资源自动生成清单，路径自动补全，引用错误即时高亮。
- 快捷键 `Alt + Y` 一键同步资源。

### 数据库可视化

- 直接在 VS Code 中浏览、编辑、排序所有地图数据，无需启动游戏。

### 生态集成

- 原生支持 Git/NPM，自动化代码质量工具，兼容主流智能编程插件。

## 📚 相关链接

- [官方文档 (zh-CN)](https://docs.dao3.fun/arenapro/zh)
- [QQ交流群：492953731](https://qm.qq.com/q/tvrI6iSl56)





## ✨ Key Features

- **Dual Editor Modes**: Arena Online Editor (lightweight, beginner-friendly) & ArenaPro Local Editor (professional, efficient, for teams).
- **Unified Module Standard**: Full ES Modules adoption for both frontend and backend, making code reuse and ecosystem compatibility easy.
- **Native Git Integration**: Effortlessly manage branches, merges, and history—ideal for collaboration.
- **Open NPM Ecosystem**: Leverage modern NPM packages to build high-quality projects fast.
- **Resource Sync**: One-click map resource sync, auto-generated resource list, no more manual copying or path errors.
- **Database Visualization**: Manage and edit map data directly in VS Code—no need to run the game.
- **Automated Code Quality**: Built-in ESLint/Prettier for consistent team code style.
- **VS Code Ecosystem Compatible**: Works with VS Code, Cursor, Trae, and major AI coding tools.

## 🆚 Online vs Local: Choose Your Workflow

| Feature           | Arena Online Editor     | ArenaPro Local Editor       |
|-------------------|------------------------|----------------------------|
| Use Case          | Beginner/Quick Start   | Pro/Efficiency/Teamwork    |
| Environment       | Browser                | VS Code extension          |
| Code Style        | Basic support          | TypeScript/ESM/Automation  |
| Resource Mgmt     | Manual                 | One-click sync/Auto-complete|
| DB Operations     | In-game                | VS Code visualization      |
| Extensibility     | Limited                | NPM/AI/Multi-plugin        |

## 🛠️ Getting Started

### Requirements

- Node.js v20+
- Visual Studio Code 1.90+
- Windows 10/11 / macOS / Linux

### Installation & Usage

1. Search and install `ArenaPro Creator` in the VS Code Marketplace.
2. Open your Shendao project folder, press `Alt + Y` or run "Sync Map Resources" from the command palette.
3. Enjoy smart resource completion, database visualization, and more.

## 💡 Feature Highlights

### Unified Module Syntax

ES Modules everywhere, frontend & backend:

```js
import { sayHello } from "./utils";
sayHello();
```

### Resource Sync & Auto-completion

- All map resources are auto-listed for path completion and instant error highlighting.
- One-click sync: `Alt + Y`.

### Database Visualization

- View, edit, and sort all map data directly in VS Code—no need to launch the game.

### Ecosystem Integration

- Native Git/NPM support, automated code quality tools, compatible with major AI coding plugins.

## 📚 Links

- [Official Documentation (en)](https://docs.dao3.fun/arenapro/en)