AI应用开发(VS Code 整体架构图)-Day06

参考资料： Monaco Editor 中文文档整理 Language Server 架构细节：LSP 进程间通信（IPC）详解 进程间通信（IPC）机制详解

一、VS Code 分层总架构（核心四层）

二、Mermaid 架构图（横向分层架构）

#mermaid-svg-C4xhbLWRaZwR8mKA{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-C4xhbLWRaZwR8mKA .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-C4xhbLWRaZwR8mKA .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-C4xhbLWRaZwR8mKA .error-icon{fill:#552222;}#mermaid-svg-C4xhbLWRaZwR8mKA .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-C4xhbLWRaZwR8mKA .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-C4xhbLWRaZwR8mKA .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-C4xhbLWRaZwR8mKA .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-C4xhbLWRaZwR8mKA .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-C4xhbLWRaZwR8mKA .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-C4xhbLWRaZwR8mKA .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-C4xhbLWRaZwR8mKA .marker{fill:#333333;stroke:#333333;}#mermaid-svg-C4xhbLWRaZwR8mKA .marker.cross{stroke:#333333;}#mermaid-svg-C4xhbLWRaZwR8mKA svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-C4xhbLWRaZwR8mKA p{margin:0;}#mermaid-svg-C4xhbLWRaZwR8mKA .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-C4xhbLWRaZwR8mKA .cluster-label text{fill:#333;}#mermaid-svg-C4xhbLWRaZwR8mKA .cluster-label span{color:#333;}#mermaid-svg-C4xhbLWRaZwR8mKA .cluster-label span p{background-color:transparent;}#mermaid-svg-C4xhbLWRaZwR8mKA .label text,#mermaid-svg-C4xhbLWRaZwR8mKA span{fill:#333;color:#333;}#mermaid-svg-C4xhbLWRaZwR8mKA .node rect,#mermaid-svg-C4xhbLWRaZwR8mKA .node circle,#mermaid-svg-C4xhbLWRaZwR8mKA .node ellipse,#mermaid-svg-C4xhbLWRaZwR8mKA .node polygon,#mermaid-svg-C4xhbLWRaZwR8mKA .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-C4xhbLWRaZwR8mKA .rough-node .label text,#mermaid-svg-C4xhbLWRaZwR8mKA .node .label text,#mermaid-svg-C4xhbLWRaZwR8mKA .image-shape .label,#mermaid-svg-C4xhbLWRaZwR8mKA .icon-shape .label{text-anchor:middle;}#mermaid-svg-C4xhbLWRaZwR8mKA .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-C4xhbLWRaZwR8mKA .rough-node .label,#mermaid-svg-C4xhbLWRaZwR8mKA .node .label,#mermaid-svg-C4xhbLWRaZwR8mKA .image-shape .label,#mermaid-svg-C4xhbLWRaZwR8mKA .icon-shape .label{text-align:center;}#mermaid-svg-C4xhbLWRaZwR8mKA .node.clickable{cursor:pointer;}#mermaid-svg-C4xhbLWRaZwR8mKA .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-C4xhbLWRaZwR8mKA .arrowheadPath{fill:#333333;}#mermaid-svg-C4xhbLWRaZwR8mKA .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-C4xhbLWRaZwR8mKA .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-C4xhbLWRaZwR8mKA .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-C4xhbLWRaZwR8mKA .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-C4xhbLWRaZwR8mKA .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-C4xhbLWRaZwR8mKA .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-C4xhbLWRaZwR8mKA .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-C4xhbLWRaZwR8mKA .cluster text{fill:#333;}#mermaid-svg-C4xhbLWRaZwR8mKA .cluster span{color:#333;}#mermaid-svg-C4xhbLWRaZwR8mKA div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-C4xhbLWRaZwR8mKA .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-C4xhbLWRaZwR8mKA rect.text{fill:none;stroke-width:0;}#mermaid-svg-C4xhbLWRaZwR8mKA .icon-shape,#mermaid-svg-C4xhbLWRaZwR8mKA .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-C4xhbLWRaZwR8mKA .icon-shape p,#mermaid-svg-C4xhbLWRaZwR8mKA .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-C4xhbLWRaZwR8mKA .icon-shape .label rect,#mermaid-svg-C4xhbLWRaZwR8mKA .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-C4xhbLWRaZwR8mKA .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-C4xhbLWRaZwR8mKA .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-C4xhbLWRaZwR8mKA :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

语言服务 LSP

共享核心服务（Common）

远程支持 Remote Development

Main 主进程【Electron】

Extension Host 扩展宿主进程

Renderer 渲染进程【UI层】

外部客户端

浏览器Web版(vscode-web)

桌面客户端(Electron)

Workbench 工作台菜单栏/侧边栏/状态栏/面板

Monaco Editor代码编辑器核心语法高亮、智能提示、折叠、选中

基础UI组件对话框、通知、输入框、树视图

VS Code Extension API

第三方插件语言插件、格式化、Git、Linter

IPC通信通道进程间消息通信

本地文件系统访问

窗口管理器

网络模块

终端服务代理

SSH远程

容器开发

WSL远程

Remote Server Code Server

配置服务 settings.json

日志服务

持久化存储缓存、全局状态

主题系统

Language Server Protocol

各类语言服务器Pyright、tsserver、gopls等

Main

三、精简垂直分层版本

#mermaid-svg-pRgmcdaLhbjBZmCO{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-pRgmcdaLhbjBZmCO .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-pRgmcdaLhbjBZmCO .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-pRgmcdaLhbjBZmCO .error-icon{fill:#552222;}#mermaid-svg-pRgmcdaLhbjBZmCO .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-pRgmcdaLhbjBZmCO .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-pRgmcdaLhbjBZmCO .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-pRgmcdaLhbjBZmCO .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-pRgmcdaLhbjBZmCO .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-pRgmcdaLhbjBZmCO .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-pRgmcdaLhbjBZmCO .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-pRgmcdaLhbjBZmCO .marker{fill:#333333;stroke:#333333;}#mermaid-svg-pRgmcdaLhbjBZmCO .marker.cross{stroke:#333333;}#mermaid-svg-pRgmcdaLhbjBZmCO svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-pRgmcdaLhbjBZmCO p{margin:0;}#mermaid-svg-pRgmcdaLhbjBZmCO .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-pRgmcdaLhbjBZmCO .cluster-label text{fill:#333;}#mermaid-svg-pRgmcdaLhbjBZmCO .cluster-label span{color:#333;}#mermaid-svg-pRgmcdaLhbjBZmCO .cluster-label span p{background-color:transparent;}#mermaid-svg-pRgmcdaLhbjBZmCO .label text,#mermaid-svg-pRgmcdaLhbjBZmCO span{fill:#333;color:#333;}#mermaid-svg-pRgmcdaLhbjBZmCO .node rect,#mermaid-svg-pRgmcdaLhbjBZmCO .node circle,#mermaid-svg-pRgmcdaLhbjBZmCO .node ellipse,#mermaid-svg-pRgmcdaLhbjBZmCO .node polygon,#mermaid-svg-pRgmcdaLhbjBZmCO .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-pRgmcdaLhbjBZmCO .rough-node .label text,#mermaid-svg-pRgmcdaLhbjBZmCO .node .label text,#mermaid-svg-pRgmcdaLhbjBZmCO .image-shape .label,#mermaid-svg-pRgmcdaLhbjBZmCO .icon-shape .label{text-anchor:middle;}#mermaid-svg-pRgmcdaLhbjBZmCO .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-pRgmcdaLhbjBZmCO .rough-node .label,#mermaid-svg-pRgmcdaLhbjBZmCO .node .label,#mermaid-svg-pRgmcdaLhbjBZmCO .image-shape .label,#mermaid-svg-pRgmcdaLhbjBZmCO .icon-shape .label{text-align:center;}#mermaid-svg-pRgmcdaLhbjBZmCO .node.clickable{cursor:pointer;}#mermaid-svg-pRgmcdaLhbjBZmCO .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-pRgmcdaLhbjBZmCO .arrowheadPath{fill:#333333;}#mermaid-svg-pRgmcdaLhbjBZmCO .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-pRgmcdaLhbjBZmCO .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-pRgmcdaLhbjBZmCO .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-pRgmcdaLhbjBZmCO .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-pRgmcdaLhbjBZmCO .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-pRgmcdaLhbjBZmCO .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-pRgmcdaLhbjBZmCO .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-pRgmcdaLhbjBZmCO .cluster text{fill:#333;}#mermaid-svg-pRgmcdaLhbjBZmCO .cluster span{color:#333;}#mermaid-svg-pRgmcdaLhbjBZmCO div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-pRgmcdaLhbjBZmCO .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-pRgmcdaLhbjBZmCO rect.text{fill:none;stroke-width:0;}#mermaid-svg-pRgmcdaLhbjBZmCO .icon-shape,#mermaid-svg-pRgmcdaLhbjBZmCO .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-pRgmcdaLhbjBZmCO .icon-shape p,#mermaid-svg-pRgmcdaLhbjBZmCO .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-pRgmcdaLhbjBZmCO .icon-shape .label rect,#mermaid-svg-pRgmcdaLhbjBZmCO .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-pRgmcdaLhbjBZmCO .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-pRgmcdaLhbjBZmCO .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-pRgmcdaLhbjBZmCO :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

IPC消息

RPC

用户输入/交互

【渲染进程 Renderer】Workbench工作台 + Monaco编辑器

【主进程 Main】文件、窗口、网络、终端

【扩展宿主 Extension Host】插件运行沙箱 + Extension API

LSP语言服务器代码补全、诊断、重构

Remote远程服务SSH/WSL/容器

四、文字版架构说明

1. Electron 多进程模型

• Main 主进程：Electron 入口，拥有操作系统权限，读写文件、创建窗口、管理终端；不处理界面渲染
• Renderer 渲染进程：网页技术（HTML/CSS/JS）渲染界面，Workbench + Monaco 运行在此；权限受限
• Extension Host（独立进程） ✅ 插件独立进程运行，插件崩溃不会让整个VS Code闪退； ✅ 通过API隔离，插件不能直接访问底层系统资源

2. Monaco Editor

独立开源代码编辑器内核，和VS Code解耦，可单独嵌入网页（vscode-web核心就是Monaco），只负责编辑能力，不含侧边栏、Git、终端等工作台功能。

3. LSP 语言服务协议

VS Code本身不内置各种语言解析器，通过LSP协议和外部语言服务器通信，实现跨语言智能提示。

4. Remote 远程架构

本地VS Code界面（Renderer）只负责UI，真正的文件解析、编译、终端运行在远端服务器/WSL/容器，依靠code-server作为后端。