🇨🇳 中文  |  🇺🇸 English

---

✨ 功能一览

在浏览器中打开即用的极简代码编辑器，VSCode 风格界面，支持多语言编写、编译、运行。

📁 文件资源管理器 多磁盘驱动器切换 文件夹展开 / 折叠 右键菜单（新建 / 重命名 / 删除） 面包屑路径导航 文件名搜索	📝 代码编辑器 CodeMirror 5 内核 20+ 语言语法高亮 代码折叠 & 括号匹配 自动缩进 & 括号补全 多标签页管理 行号 & 当前行高亮
▶️ 一键运行 🐍 Python — 直接运行 🟨 JavaScript — Node.js 运行 ☕ Java — 自动编译 + 运行 ⚙️ C / C++ — GCC 编译运行 🌐 HTML — iframe 实时预览 💻 Shell — Bash 执行	🎨 界面与体验 深色 / 浅色主题一键切换 侧栏宽度拖拽调整 底部输出面板纵向拖拽 终端输出 + HTML 预览双模式 实时状态栏（语言 / 行列 / 工具链） 运行前自动保存

---

🚀 快速开始

安装

git clone https://github.com/WuXiaoMuer/vscode-mini.git
cd vscode-mini
npm install

启动

node server.js

打开浏览器访问 http://localhost:3456

零配置，开箱即用。CodeMirror 已本地化，无需联网。

┌─────────────────────────────────────────────────────┐
│  ▶ VSCode Mini Pro              http://localhost:3456 │
├──────┬──────────────────────────────────────────────┤
│ 📁   │  tabs │ test.py ×  test.js ×                │
│ 🔍   ├───────┼──────────────────────────────────────┤
│ 🧩   │       │  1 │ print("Hello World")           │
│      │ 📁 src│  2 │                                │
│      │ 📄 app│  3 │ for i in range(10):            │
│      │ 📄 ser│  4 │     print(f"Line {i}")         │
│      │ 📄 ind│  5 │                                │
│      │ 📄 sty│     │                                │
│      │       │─────┴──────────────────────────────│
│      │       │  ▶ 运行输出                          │
│      │       │  Hello World                        │
│      │       │  Line 0 ~ Line 9                    │
├──────┴───────┴──────────────────────────────────────┤
│  🐍 Python ✅  🟨 Node ✅  ☕ Java ✅  │ 行 4, 列 12 │
└─────────────────────────────────────────────────────┘

---

⌨️ 快捷键

快捷键	功能	说明
F5	▶ 运行代码	自动保存后运行当前文件
Ctrl+S	💾 保存文件	写入磁盘
Ctrl+N	📄 新建文件	在当前目录下创建
Ctrl+B	📐 切换侧栏	显示 / 隐藏左侧面板
Ctrl+J	📋 输出面板	显示 / 隐藏底部终端
Ctrl+F	🔍 编辑器搜索	CodeMirror 内搜索替换
鼠标中键	✕ 关闭标签	中键点击标签页关闭

---

🌐 支持语言

语言	运行	语法高亮	备注
Python	✅	✅	Python 3.x
JavaScript	✅	✅	Node.js 运行时
TypeScript	✅	✅	通过 Node.js 运行
Java	✅	✅	自动编译 → 运行 → 清理 .class
C	⚙️	✅	需安装 MinGW-w64 (GCC)
C++	⚙️	✅	需安装 MinGW-w64 (G++)
HTML	✅	✅	iframe 实时预览
Shell / Bash	✅	✅	通过 bash 执行
CSS / SCSS / Less	—	✅
SQL	—	✅
Go / Rust / PHP / Swift	—	✅
Markdown / YAML / JSON / XML	—	✅

---

🏗️ 技术架构

vscode-mini/
├── server.js          # Express 后端 — REST API + 代码运行引擎
├── index.html         # 前端入口 — 页面结构
├── style.css          # VSCode 风格主题 — 深色 / 浅色
├── app.js             # 前端逻辑 — 文件树 / 编辑器 / 运行 / 输出
├── package.json       # 依赖管理
└── node_modules/      # CodeMirror + Express（本地化，零 CDN）

后端 API

端点	方法	功能
/api/list	POST	列出目录内容
/api/read	POST	读取文件内容
/api/save	POST	保存文件
/api/create	POST	新建文件 / 文件夹
/api/delete	POST	删除文件 / 文件夹
/api/rename	POST	重命名
/api/run	POST	编译 & 运行代码
/api/tools	GET	检测可用工具链
/api/drives	GET	获取磁盘驱动器列表
/preview	GET	HTML 文件预览

---

🔧 环境要求

依赖	版本	必需	用途
Node.js	≥ 18	✅	后端服务
npm	≥ 9	✅	包管理
Python 3	any	可选	运行 .py 文件
JDK	≥ 8	可选	编译运行 Java
MinGW-w64	any	可选	编译运行 C / C++

---

📸 截图预览

深色主题	浅色主题
深色编辑器界面	浅色编辑器界面

---

📜 License

本项目基于 MIT License 开源，可自由使用、修改、分发。

---

🌟 Star History

---

Made with ❤️ by WuXiaoMuer

如果这个项目对你有帮助，请给个 ⭐ Star！