39. IDE/Code Editor 代码编辑器

V1 — 1个用户：纯前端代码编辑器

场景

你想做一个在线代码片段编辑器，写代码有语法高亮，方便分享。

你要解决什么

textarea实现代码编辑
语法高亮显示
本地保存代码文件

给AI的Prompt

用纯HTML+JS实现一个代码编辑器：

功能：
1. 编辑区域：textarea输入代码
2. 预览区域：用Prism.js实现语法高亮（实时同步）
3. 语言选择：JavaScript / Python / Go / HTML / CSS
4. 切换语言后高亮规则自动切换
5. 文件管理（localStorage）：
   - 新建文件（输入文件名）
   - 保存当前文件（Ctrl+S）
   - 文件列表侧边栏
   - 切换文件自动加载内容
   - 删除文件
6. 行号显示（与textarea同步滚动）
7. 基础快捷键：Tab缩进、Shift+Tab反缩进

引入CDN：Prism.js + 各语言插件
单个index.html文件

技术：纯HTML+CSS+JavaScript, Prism.js

验证清单

你学到了什么

语法高亮原理（词法分析+着色）→ Module: 编译原理基础
textarea与overlay同步 → Module: DOM操作
键盘快捷键监听 → Module: 事件处理

V2 — 10个用户：Monaco Editor集成

场景

textarea太简陋了，想用VS Code同款编辑器，支持多文件标签页。

你要解决什么

集成Monaco Editor（VS Code内核）
多文件标签页管理
主题切换

给AI的Prompt

用React+Monaco Editor实现专业代码编辑器：

Monaco Editor集成：
1. 安装@monaco-editor/react
2. 编辑器配置：
   - 行号、缩进参考线、括号匹配
   - 自动补全（Monaco内置基础补全）
   - 代码折叠
   - 搜索替换（Ctrl+F / Ctrl+H）
   - 多光标编辑（Alt+Click）

多文件标签页：
1. 顶部标签栏：显示打开的文件
2. 点击标签切换文件
3. 修改未保存的文件标签显示圆点
4. 右键标签：关闭/关闭其他/关闭所有
5. 文件内容存localStorage

主题切换：
1. VS Dark（默认）
2. VS Light
3. High Contrast
4. 主题偏好存localStorage

侧边栏：
1. 文件列表（树形结构支持文件夹）
2. 新建文件/文件夹
3. 重命名/删除
4. 双击打开文件到标签页

技术：React, Monaco Editor, Tailwind CSS, localStorage

验证清单

你学到了什么

Monaco Editor API → Module: 编辑器技术
标签页状态管理 → Module: React状态
树形数据结构（文件系统）→ Module: 数据结构
用户偏好持久化 → Module: 用户体验

V3 — 100个用户：后端文件系统

场景

需要编辑服务器上的真实文件，浏览目录、搜索文件内容。

你要解决什么

读写服务器本地文件系统
目录树浏览
文件内容搜索

给AI的Prompt

在V2基础上添加Go后端文件系统：

Go后端：
1. 工作区概念：指定一个根目录作为工作区
2. API：
   - GET /api/files/tree — 返回目录树（递归，限制深度5层）
   - GET /api/files/read?path=xxx — 读取文件内容
   - PUT /api/files/write — 写入文件内容（path+content）
   - POST /api/files/create — 创建文件/文件夹
   - DELETE /api/files/delete?path=xxx — 删除文件/文件夹
   - POST /api/files/rename — 重命名/移动
   - GET /api/files/search?q=keyword — 全文搜索（grep）

安全：
1. 路径安全：禁止..遍历，所有路径必须在工作区内
2. 文件大小限制：读取超过1MB的文件返回错误
3. 忽略.git, node_modules等目录
4. 文件类型检测：二进制文件不读取内容

前端改进：
1. 目录树从后端API加载（懒加载子目录）
2. 保存文件写入后端（不再用localStorage）
3. 文件搜索：输入关键词，显示匹配文件和行号
4. 点击搜索结果跳转到对应文件和行

PostgreSQL：
1. 存用户工作区配置
2. 存最近打开的文件列表

技术：Go+Gin, PostgreSQL, React+Monaco Editor

验证清单

目录树正确加载服务器文件
读取文件内容在编辑器中显示
保存文件写入服务器磁盘
创建/删除/重命名正常
路径遍历攻击被拦截
大文件和二进制文件处理正确
全文搜索返回正确结果

你学到了什么

文件系统API设计 → Module: RESTful API
路径安全（path traversal防护）→ Module: Web安全
懒加载优化 → Module: 前端性能
全文搜索实现 → Module: 搜索技术

V4 — 1000个用户：终端集成

场景

编辑代码后要运行，需要在编辑器里集成终端，直接执行命令。

你要解决什么

WebSocket连接后端伪终端（PTY）
前端终端模拟器
代码运行和输出展示

给AI的Prompt

在V3基础上集成终端：

后端PTY：
1. 用creack/pty库创建伪终端
2. WebSocket端点：/api/terminal/ws
3. 连接时创建bash/zsh进程绑定PTY
4. WebSocket ↔ PTY双向数据流：
   - 客户端发送键盘输入 → 写入PTY stdin
   - PTY stdout输出 → 发送给客户端
5. 窗口大小同步：客户端resize → 更新PTY窗口大小
6. 会话管理：支持多个终端会话

前端终端：
1. 集成xterm.js终端模拟器
2. 底部面板显示终端（可拖拽调整高度）
3. 多终端标签（新建/关闭终端）
4. 终端主题跟随编辑器主题
5. 复制粘贴支持

运行代码：
1. 编辑器右上角"运行"按钮
2. 根据文件扩展名选择运行命令：
   - .js → node filename.js
   - .py → python3 filename.py
   - .go → go run filename.go
3. 在终端中执行并显示输出
4. 运行中可Ctrl+C终止

技术：Go+Gin, creack/pty, WebSocket, xterm.js, React

验证清单

你学到了什么

伪终端（PTY）原理 → Module: 操作系统
WebSocket双向流 → Module: 实时通信
xterm.js终端模拟 → Module: 终端技术
进程管理 → Module: 操作系统

V5 — 1万个用户：语言服务（LSP）

场景

想要智能补全、错误提示、跳转定义——像真正的IDE一样。

你要解决什么

LSP协议集成
自动补全和错误诊断
多语言支持

给AI的Prompt

在V4基础上集成Language Server Protocol：

LSP后端：
1. LSP代理服务：Go后端作为LSP客户端和前端之间的桥梁
2. 语言服务器管理：
   - Go: gopls
   - Python: pyright
   - JavaScript/TypeScript: typescript-language-server
3. 每种语言启动对应的语言服务器进程
4. WebSocket代理LSP消息（前端 ↔ Go后端 ↔ 语言服务器）

LSP功能：
1. 自动补全（textDocument/completion）
   - 输入时触发补全建议
   - 显示补全项的类型、文档
2. 错误诊断（textDocument/publishDiagnostics）
   - 语法错误红色波浪线
   - 警告黄色波浪线
   - 鼠标悬停显示错误信息
3. 悬停信息（textDocument/hover）
   - 鼠标悬停变量显示类型信息
4. 跳转定义（textDocument/definition）
   - Ctrl+Click跳转到定义位置
5. 查找引用（textDocument/references）
   - 右键菜单"查找所有引用"

前端集成：
1. Monaco Editor的LSP客户端（monaco-languageclient）
2. 文件打开/修改/关闭同步到语言服务器
3. 补全列表UI美化
4. 问题面板：汇总所有文件的错误和警告

技术：Go, LSP, gopls/pyright/typescript-language-server, WebSocket, Monaco Editor

验证清单

你学到了什么

LSP协议规范 → Module: 协议设计
进程间通信（stdio）→ Module: IPC
代理模式（Go转发LSP）→ Module: 代理架构
Monaco Editor高级集成 → Module: 编辑器技术

V6 — 10万+用户：协作编辑与Git集成

场景

团队需要实时协作编辑代码，集成Git管理版本。

你要解决什么

WebSocket实时同步（CRDT）
多光标显示
Git操作集成

给AI的Prompt

在V5基础上实现协作编辑和Git集成：

协作编辑：
1. Yjs CRDT库实现文本协作
   - 每个文件一个Y.Doc
   - y-monaco绑定Monaco Editor
2. WebSocket同步服务：
   - 房间概念：每个文件一个房间
   - 用户加入/离开房间
   - 操作广播给房间内其他用户
3. 多光标：
   - 每个用户分配颜色
   - 实时显示其他用户光标位置和选区
   - 光标旁显示用户名标签
4. 用户列表：显示当前在线协作者

Git集成：
1. Git状态面板：
   - 显示modified/staged/untracked文件
   - 文件差异对比（Monaco Diff Editor）
2. Git操作API：
   - POST /api/git/status — 获取状态
   - POST /api/git/diff?path=xxx — 文件diff
   - POST /api/git/add — 暂存文件
   - POST /api/git/commit — 提交（输入message）
   - POST /api/git/log — 提交历史
   - POST /api/git/branch — 分支列表/切换/创建
3. 执行：用os/exec调用git命令
4. 安全：白名单命令，禁止危险操作

前端Git面板：
1. 源代码管理侧边栏（类VS Code）
2. 文件修改列表，点击查看diff
3. 暂存/取消暂存
4. 提交信息输入+提交按钮
5. 分支选择器（底部状态栏）
6. 提交历史图形化展示

技术：Go, Yjs(CRDT), y-monaco, WebSocket, os/exec+git, React+Monaco

验证清单

你学到了什么

Yjs CRDT协作框架 → Module: 协作编辑
多光标同步 → Module: 实时系统
Git命令行集成 → Module: 版本控制
安全命令白名单 → Module: 安全设计