Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Editor File SyncNew to Visual Studio Code? Get it now.
Editor File Sync

Editor File Sync

cdp

| (0) | Free
VSCode extension for file synchronization with frontend editor
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Editor File Sync VSCode Extension

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

📚 文档导航

  • 🚀 快速开始 - 5分钟快速上手
  • 📖 使用说明 - 详细功能使用指南
  • 🏗️ 技术架构 - 系统设计和技术实现
  • 🔧 开发指南 - 本地开发和调试

功能特性

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

安装

💡 快速安装: 查看 快速启动指南 获取详细步骤

  1. 克隆项目到本地
  2. 在插件目录下运行:
    npm install
    npm run build
    
  3. 在VSCode中按 F5 启动调试模式,或使用 npm run package 打包为 .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 build

# 开发模式 - 同时启动插件和webview开发服务
npm run dev

# 分别启动服务
npm run watch          # 插件开发模式
npm run watch:webview  # webview开发模式

调试

npm run watch

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

测试

npm test
npm run test-compile

打包和发布

# 构建webview并打包插件到本地
npm run package

# 发布到远程VSCode插件市场
npm run release

# 本地重新安装插件
npm run reinstall

详细文档

  • 📖 快速启动指南 - 详细的安装和配置步骤
  • 📖 使用说明 - 完整的功能使用流程和故障排除
  • 📖 技术架构 - 系统架构设计和技术实现细节

注意事项

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

📚 完整文档索引

文档 描述 适用场景
README.md 项目概览和快速入门 首次了解项目
QUICK_START.md 详细的安装和配置步骤 环境搭建和首次运行
USAGE.md 完整的功能使用流程和故障排除 日常使用和问题解决
TECHNICAL_ARCHITECTURE.md 系统架构设计和技术实现 开发、维护和扩展

许可证

MIT License

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft