一个基于Web的现代化代码编辑器，提供类似VS Code的开发体验。
- VSCode风格文件树：嵌套文件夹显示，支持多级目录结构
- 智能文件图标系统：基于文件类型显示30+种编程语言图标
- 右键上下文菜单：新建、重命名、删除、复制粘贴等完整操作
- 文件夹展开/折叠：支持文件夹的展开和折叠操作
- 文件选择交互：单击选择、双击打开、右键菜单
- 点击行号左侧的
▶/▼图标折叠或展开代码块 - 支持自动折叠检测
- 快捷键：无（鼠标点击操作）
Ctrl/Cmd + 点击：在点击位置添加光标Ctrl/Cmd + Alt + ↑/↓：在上下行添加光标- 支持多光标同时编辑和粘贴
- 快捷键：
Ctrl/Cmd + Shift + F - 右键菜单：右键点击编辑器 → "格式化代码"
- 支持语言：
- JavaScript/TypeScript/JSON
- HTML/XML
- CSS/Less/Scss
- Markdown
- 自动触发：输入任意字符、
.、/等符号 - HTML支持：标签名、属性名自动补全
- 代码片段：支持多语言代码片段
- 智能提示：基于上下文的智能建议
- 完整的Markdown语法高亮
- 实时预览（通过格式化功能）
- 支持表格、列表、代码块等
- 嵌套文件夹结构：支持多级目录的树形显示
- 文件夹展开/折叠：点击文件夹图标切换展开状态
- 缩进级别显示：清晰的层级关系视觉指示
- 智能排序：文件夹在前，文件在后，按名称排序
- 30+种文件类型图标：支持主流编程语言和文件格式
- 文件夹状态图标：展开/折叠状态的不同图标显示
- 图标分类：编程语言、配置文件、图片、文档等
- 备用方案：字体图标和emoji图标双重支持
- 新建操作：新建文件、新建文件夹
- 文件操作：打开、重命名、删除
- 复制粘贴：复制、剪切、粘贴文件
- 资源管理：在资源管理器中显示
- 菜单样式：VSCode风格的菜单设计和交互
- 文件选择：单击选择文件，支持多选
- 双击打开：双击文件打开，双击文件夹导航
- 拖拽排序：支持文件和文件夹的拖拽排序
- 视觉反馈：悬停、选中、拖拽状态的视觉指示
- 搜索框：在资源管理器顶部
- 实时过滤：输入关键字实时过滤文件
- 高亮显示：搜索结果高亮显示
- 右键菜单：右键点击文件 → "重命名"
- 输入确认：输入新名称后按回车确认
- 批量支持：支持批量重命名操作
- 新建文件夹：右键点击空白处 → "新建文件夹"
- 删除文件夹：右键点击文件夹 → "删除"
- 新建文件：右键点击空白处 → "新建文件"
- 位置：右上角 🌙/☀️ 按钮
- 支持主题：深色、浅色、高对比度
- 自动保存：主题偏好自动保存
- 打开文件：双击文件树中的文件
- 切换标签：点击标签页
- 关闭标签：点击标签页右侧的 ×
- 输出面板：显示运行结果和日志
- 终端面板：集成命令行终端
- 问题面板：显示代码错误和警告
- 资源管理器：文件树和搜索
- 搜索面板：全局内容搜索
- 设置面板：编辑器配置
| 快捷键 | 功能 |
|---|---|
Ctrl/Cmd + S |
保存当前文件 |
Ctrl/Cmd + Shift + F |
格式化代码 |
Ctrl/Cmd + Z |
撤销 |
Ctrl/Cmd + Y |
重做 |
Ctrl/Cmd + F |
查找 |
Ctrl/Cmd + H |
替换 |
Ctrl/Cmd + / |
注释/取消注释 |
Alt + ↑/↓ |
移动当前行 |
Ctrl/Cmd + D |
选择下一个相同内容 |
Ctrl/Cmd + 点击 |
多光标编辑 |
| 快捷键 | 功能 |
|---|---|
Ctrl/Cmd + O |
打开文件夹 |
Ctrl/Cmd + N |
新建文件 |
Ctrl/Cmd + W |
关闭当前标签 |
Ctrl/Cmd + Tab |
切换标签 |
F2 |
重命名文件/文件夹 |
Delete |
删除文件/文件夹 |
Ctrl/Cmd + C |
复制文件 |
Ctrl/Cmd + X |
剪切文件 |
Ctrl/Cmd + V |
粘贴文件 |
Enter |
打开文件/进入文件夹 |
Backspace |
返回上级目录 |
Ctrl/Cmd + F |
文件搜索 |
- 默认主题，适合长时间编程
- 护眼配色，减少眼部疲劳
- 高对比度，代码清晰易读
- 明亮清爽，适合白天使用
- 传统编辑器风格
- 适合光线充足的环境
- 极高对比度，适合视觉障碍用户
- 清晰的边界和分隔
- 最大化可读性
- JavaScript (
.js,.jsx) - 📄 图标 - TypeScript (
.ts,.tsx) - 📄 图标 - Python (
.py) - 🐍 图标 - Java (
.java) - ☕ 图标 - C/C++ (
.c,.cpp,.h) - ⚙️ 图标 - HTML (
.html,.htm) - 🌐 图标 - CSS (
.css,.scss,.less) - 🎨 图标 - Ruby (
.rb) - 💎 图标 - Go (
.go) - 🐹 图标 - Rust (
.rs) - 🦀 图标 - Swift (
.swift) - 🐦 图标 - Kotlin (
.kt) - 🅚 图标 - Dart (
.dart) - 🎯 图标 - PHP (
.php) - 🐘 图标
- JSON (
.json) - 📋 图标 - XML (
.xml) - 📄 图标 - YAML (
.yml,.yaml) - ⚙️ 图标 - Markdown (
.md) - 📝 图标 - Git (
.gitignore) - 📚 图标 - Docker (
.dockerfile,.dockerignore) - 🐳 图标 - 环境配置 (
.env,.properties,.ini) - ⚙️ 图标
- 文本文件 (
.txt) - 📝 图标 - PDF文档 (
.pdf) - 📕 图标 - Word文档 (
.doc,.docx) - 📄 图标 - Excel表格 (
.xls,.xlsx) - 📊 图标 - PowerPoint (
.ppt,.pptx) - 📽️ 图标 - 图片文件 (
.png,.jpg,.jpeg,.gif,.svg,.ico) - 🖼️ 图标
- 日志文件 (
.log) - 📄 图标 - Vue (
.vue) - 💚 图标 - Svelte (
.svelte) - 📄 图标 - Astro (
.astro) - 📄 图标
- 📁 普通文件夹
- 📂 展开的文件夹
- 开启方式：设置面板 → 自动保存
- 保存时机：失去焦点或定时保存
- 状态指示：文件名旁显示保存状态
支持自定义代码片段，包括：
- 函数定义
- 循环结构
- 条件语句
- HTML模板
- CSS样式
- 自动检测缩进风格
- 支持空格和制表符
- 智能换行对齐
-
应用无法启动
- 检查Python是否安装
- 确认端口8002未被占用
- 查看浏览器控制台错误
-
文件无法打开
- 检查文件权限
- 确认文件格式支持
- 尝试刷新页面
-
代码提示不工作
- 检查语言是否正确识别
- 重启应用
- 清除浏览器缓存
-
格式化失败
- 检查代码语法是否正确
- 确认语言类型
- 尝试手动格式化
-
大文件处理
- 自动禁用大文件的语法高亮
- 分页加载大文件内容
- 优化内存使用
-
内存管理
- 自动清理未使用的标签
- 限制打开文件数量
- 定期垃圾回收
如遇到问题或有功能建议，请通过以下方式联系：
- 问题反馈：在项目中提交Issue
- 功能建议：描述您的需求和用例
- 技术支持：提供详细的错误信息
- ✨ VSCode风格文件管理器：完整的VSCode风格文件树体验
- ✨ 智能文件图标系统：30+种编程语言和文件类型图标
- ✨ 右键上下文菜单：新建、重命名、删除、复制粘贴等完整操作
- ✨ 文件夹展开/折叠：支持多级目录的树形显示和交互
- ✨ 文件选择交互：单击选择、双击打开、右键菜单操作
- ✨ 新增代码折叠/展开功能
- ✨ 实现多光标编辑支持
- ✨ 添加代码格式化功能
- ✨ 增强代码提示和自动补全
- ✨ 支持Markdown语言
- ✨ 文件拖拽排序功能
- ✨ 文件重命名功能
- ✨ 文件夹创建和删除
- ✨ 文件搜索过滤功能
# 进入项目目录
cd d:\x-ide-project
# 启动Python HTTP服务器
python -m http.server 8001# 进入项目目录
cd d:\x-ide-project
# 安装依赖（首次运行）
npm install express cors
# 启动Node.js服务器
node server.js打开浏览器访问：http://localhost:8001
- 浏览器模式：会弹出目录选择对话框
- 服务器模式：需要手动输入目录路径
享受VSCode风格的开发体验！
享受编程的乐趣！ 🚀