vs code 无多界面概念,仅支持多窗口(code --new-window)或插件内嵌 webview;多窗口互隔离,webview 需 typescript 开发且受沙盒限制。

VS Code 本身没有“多界面”概念,只有多窗口或多标签页
VS Code 是单实例应用,默认所有文件、文件夹都在同一个主窗口里用标签页管理。所谓“另一个界面”,实际只有两种可行路径:开新窗口(独立进程),或用 Webview 做内嵌轻量 UI。别被“界面”这个词带偏——它不是 Electron 应用那种自由拖拽的子窗体。
想并排看两个项目?用 code --new-window
这是最常用也最可靠的方案。VS Code 的每个窗口是独立工作区,互不干扰,还能分别设置主题、字体大小、扩展启用状态。
- 终端执行
code --new-window /path/to/project-a打开第一个项目 - 再执行
code --new-window /path/to/project-b打开第二个——它们就是两个完全隔离的“界面” - Windows/macOS 下快捷键
Ctrl+Shift+N(Win)或Cmd+Shift+N(Mac)也能快速新建空窗口 - 注意:
code .在已有窗口中会复用标签页;加--new-window才强制新开进程
想在编辑器里嵌入自定义 UI?用 Webview API(仅限插件开发)
如果你正在写 VS Code 插件,并希望在侧边栏或面板里显示 HTML/CSS/JS 界面,就得用 vscode.webviewView。这不是用户能点几下配置出来的功能,必须写 TypeScript + WebView 模板。
1、数据调用该功能使界面与程序分离实施变得更加容易,美工无需任何编程基础即可完成数据调用操作。2、交互设计该功能可以方便的为栏目提供个性化性息功能及交互功能,为产品栏目添加产品颜色尺寸等属性或简单的留言和订单功能无需另外开发模块。3、静态生成触发式静态生成。4、友好URL设置网页路径变得更加友好5、多语言设计1)UTF8国际编码; 2)理论上可以承担一个任意多语言的网站版本。6、缓存机制减轻服务器
- Webview 是沙盒环境,不能直接访问 Node.js API,通信靠
postMessage和onDidReceiveMessage - 资源路径必须用
webview.asWebviewUri转换,否则图片/CSS 加载失败——这是新手最常卡住的地方 - 不要试图在 Webview 里调
require('fs')或process.env,会报ReferenceError: require is not defined - 示例关键行:
const panel = vscode.window.createWebviewPanel('myView', 'My Tool', vscode.ViewColumn.One, { enableScripts: true });
别踩这些坑
有人试过改 argv.json、用 --disable-extensions 启动多个实例,或幻想通过设置项打开“双屏模式”——都无效。VS Code 没有内置的多文档界面(MDI)或浮动面板系统。
- 任务栏里看到多个 VS Code 图标?那是多个
code --new-window实例,不是“界面切换” - 用
workbench.action.newWindow命令(快捷键Ctrl+Shift+N)和命令面板里选 “New Window” 效果一致,但不会继承当前工作区设置 - 如果开了很多窗口又关不全,残留进程可能卡住端口或锁文件,用任务管理器(Windows)或
ps aux | grep code(macOS/Linux)清理
真正的复杂点在于:你以为的“界面”其实是工作区隔离、窗口生命周期、插件作用域三者叠加的结果。没写插件就别碰 Webview;想对比两个代码库,老老实实开两个窗口就行。









