如何通过浏览器打开Visual Studio Code 及网站按钮唤起VS Code实现方法

Visual Studio Code安装时会自动在本地系统注册vscode://自定义URI协议，通过这个协议即可直接从浏览器唤起VSCode：

1. 直接在浏览器地址栏输入vscode://，按下回车
2. 在弹出的浏览器确认弹窗中选择允许，即可启动本地VSCode

如果需要直接打开指定本地文件/项目，可在地址栏输入带文件路径的协议地址：

• Windows 示例：vscode://file/C:/Users/用户名/Desktop/test.js
• macOS/Linux 示例：vscode://file/Users/用户名/Desktop/test.js

注意：操作的前提是本地已经正确安装VSCode，否则系统无法识别该协议

核心逻辑就是调用VSCode的vscode://自定义URI协议，无需复杂后端逻辑，前端直接实现即可，示例代码如下：

<!-- 基础唤起VSCode按钮 -->
<button type="button" onclick="window.open('vscode://', '_self')">启动VSCode</button>

<!-- 唤起VSCode并打开指定本地项目/文件 -->
<button type="button" onclick="window.open('vscode://file/Users/xxx/Desktop/project', '_self')">用VSCode打开指定项目</button>

相关注意事项：

• 仅当用户本地安装了VSCode时功能生效，未安装的用户点击后无响应
• 浏览器安全策略会强制弹出确认提示，需要用户手动确认后才会唤起VSCode，无法跳过该步骤
• 若需要适配VSCode内测版，将协议替换为vscode-insiders://即可

内容的提问来源于stack exchange，提问作者mrdenizlp