使用 VS Code Tunnel 实现跨设备浏览器访问本机文件
背景需求
在学习过程中，我习惯边学习边用 Obsidian 记录笔记。但问题来了：
- 学习内容和笔记软件在同一台电脑上，需要频繁切屏
- 手边有另一台电脑和显示器，但那台电脑只能通过浏览器访问外部资源
- 希望在第二块屏幕上直接编辑 Markdown 笔记，实现真正的双屏工作流
目标：让 VS Code 作为服务器，通过浏览器远程访问和编辑本机的 Obsidian vault 目录。
方案对比
在实现「浏览器访问本机文件」这个需求上，主要有以下几种方案：
| 方案 | 原理 | 优点 | 缺点 |
|---|---|---|---|
| VS Code Tunnel | 微软官方隧道服务，自动穿透网络 | 免费、无需公网IP、配置简单、官方支持 | 依赖微软服务、需要 GitHub 账号 |
| code-server | 自托管 VS Code 网页版 | 完全自主控制、不依赖外部服务 | 需要配置端口、局域网外访问需内网穿透 |
| Obsidian Publish | 官方发布服务 | 官方支持 | 付费、只读不能编辑 |
| Obsidian Livesync | 社区插件 + CouchDB | 实时同步 | 配置复杂、需要数据库 |
结论：对于「浏览器编辑本机文件」这个需求，VS Code Tunnel 是最佳选择——免费、配置简单、无需公网 IP。
工作原理
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ 你的主电脑 │ │ 微软云服务 │ │ 另一台电脑 │
│ │ │ (中转隧道) │ │ │
│ VS Code Tunnel │◄───────►│ │◄───────►│ 浏览器访问 │
│ + Obsidian目录 │ │ │ │ vscode.dev │
└─────────────────┘ └─────────────────┘ └─────────────────┘
- 主电脑运行 VS Code Tunnel 服务
- 微软云服务负责网络穿透和中转
- 另一台电脑通过浏览器访问 vscode.dev，连接到你的主电脑
- 你在浏览器中的所有操作，实际都在主电脑上执行
配置步骤
第一步：在主电脑上安装 VS Code CLI
打开 PowerShell，执行：
winget install Microsoft.VisualStudioCode.CLI
安装完成后，code 命令就可以在终端中使用了。
第二步：启动隧道服务
code tunnel
首次运行会提示：
- 选择登录方式：推荐使用 GitHub 账号（免费）
- 授权设备：浏览器会打开授权页面，确认授权
- 命名设备：给这台电脑起一个名字，如
home-pc
启动成功后，终端会显示类似信息：
*
* Visual Studio Code Server
*
* By using the software, you agree to
* the Visual Studio Code Server License Terms (https://aka.ms/vscode-server-license) and
* the Microsoft Privacy Statement (https://privacy.microsoft.com/en-US/privacystatement).
*
✔ Logged in to GitHub
✔ Created tunnel with name: home-pcOpen this link in your browser https://vscode.dev/tunnel/home-pc
第三步：在另一台电脑的浏览器中访问
- 打开浏览器，访问 https://vscode.dev
- 使用同一个 GitHub 账号登录
- 点击左下角的「远程资源管理器」图标（或按
F1输入Remote Tunnels: Connect to Tunnel） - 选择你命名的设备（如
home-pc） - 连接成功后，点击「打开文件夹」，选择你的 Obsidian vault 路径，如
D:\Notes
现在你就可以在浏览器中编辑主电脑上的 Markdown 文件了！
进阶配置
让隧道服务开机自启
每次手动启动 code tunnel 比较麻烦，可以配置为 Windows 服务：
code tunnel service install
这会将 VS Code Tunnel 安装为 Windows 服务，开机自动运行。
如需卸载服务：
code tunnel service uninstall
查看服务状态
code tunnel service status
推荐安装的 VS Code 扩展
为了获得更好的 Markdown 编辑体验，建议在 VS Code 中安装：
| 扩展名 | 功能 |
|---|---|
| Markdown All in One | Markdown 快捷键、目录生成、格式化 |
| Markdown Preview Enhanced | 增强的实时预览 |
| Paste Image | 直接粘贴图片到 Markdown |
| Foam | 双向链接支持（类似 Obsidian 的 [[]] 语法） |
常见问题
Q: 主电脑关机或休眠后还能访问吗？
不能。隧道服务需要主电脑保持运行状态。如果需要长期访问，建议：
- 禁用自动休眠
- 或使用远程唤醒（Wake-on-LAN）
Q: 安全吗？
相对安全。访问需要：
- 登录同一个 GitHub 账号
- 知道设备名称
- 数据通过微软服务中转，传输加密
如果对安全性有更高要求，可以考虑 code-server + 内网方案。
Q: 有延迟吗？
有轻微延迟（通常几十到几百毫秒），日常编辑 Markdown 完全不影响体验。
Q: 可以用手机/平板访问吗？
可以！任何有浏览器的设备都能通过 vscode.dev 访问。
效果展示
配置完成后的工作流：
┌──────────────────────────────────────────────────────────────────┐
│ 你的工作场景 │
├─────────────────────────────────┬────────────────────────────────┤
│ 显示器 1 (主电脑) │ 显示器 2 (另一台电脑) │
│ │ │
│ 浏览器 / IDE / 学习资料 │ 浏览器打开 vscode.dev │
│ │ 编辑 D:\Notes 中的笔记 │
│ │ │
│ 专注学习，无需切屏 │ 实时记录，同步保存 │
└─────────────────────────────────┴────────────────────────────────┘
总结
通过 VS Code Tunnel，我们实现了：
- ✅ 无需公网 IP，自动网络穿透
- ✅ 免费使用，官方支持
- ✅ 浏览器即可访问，无需安装额外软件
- ✅ 完整的 VS Code 编辑体验
- ✅ 开机自启，无感运行
这个方案完美解决了「双屏学习 + 笔记记录」的场景需求，告别频繁切屏！