Editor File Sync VSCode Extension

这是一个VSCode插件，用于实现前端编辑器与Cursor的双向文件同步功能。

功能特性

• 🔄 双向文件同步: 支持前端编辑器与VSCode/Cursor之间的双向文件内容同步
• 📁 文件管理: 通过侧边栏管理同步的文件列表
• 🌐 WebSocket通信: 基于WebSocket的实时通信机制
• 🎯 SQL文件支持: 专门针对SQL文件进行优化
• 🖱️ 右键菜单: 在文件资源管理器和编辑器中提供右键菜单

安装

1. 克隆项目到本地
2. 在插件目录下运行：

   npm install
   npm run compile
   

3. 在VSCode中按 F5 启动调试模式，或打包为 .vsix 文件进行安装

使用方法

1. 启动同步服务

• 点击侧边栏中的 "Start Sync" 按钮
• 或使用命令面板执行 Editor File Sync: Start File Sync

2. 添加文件到同步

• 在侧边栏中点击 "运行sql" 按钮选择文件
• 或在文件资源管理器中右键SQL文件，选择 "运行sql"
• 或在编辑器中右键，选择 "运行sql"

3. 管理同步文件

• 在侧边栏中查看所有同步的文件
• 点击文件旁的 "Remove" 按钮移除同步

4. 停止同步服务

• 点击侧边栏中的 "Stop Sync" 按钮
• 或使用命令面板执行 Editor File Sync: Stop File Sync

配置选项

在VSCode设置中可以配置以下选项：

• editor-file-sync.port: WebSocket服务器端口（默认：3001）
• editor-file-sync.autoStart: 是否在插件激活时自动启动同步服务（默认：false）

技术架构

组件结构

src/
├── extension.ts              # 插件主入口
├── managers/
│   └── FileSyncManager.ts    # 文件同步管理器
├── providers/
│   └── FileSyncProvider.ts   # 侧边栏提供者
└── server/
    └── WebSocketServer.ts    # WebSocket服务器

通信协议

插件使用WebSocket进行前后端通信，支持以下消息类型：

• fileOpened: 文件被打开
• fileChanged: 文件内容变更
• fileRemoved: 文件被移除
• updateFile: 更新文件内容
• getFiles: 获取同步文件列表
• syncedFiles: 返回同步文件列表

开发

构建

npm run compile

调试

npm run watch

然后在VSCode中按 F5 启动调试。

测试

npm test

注意事项

1. 确保WebSocket端口（默认3001）未被其他程序占用
2. 插件仅支持SQL文件的同步
3. 文件变更会实时同步到前端编辑器
4. 建议在生产环境中配置适当的安全措施

许可证

MIT License