VS Code背后使用的技术栈是什么？(Electron, TypeScript)

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

VS Code背后使用的技术栈是什么？(Electron, TypeScript)

2025-12-05

浏览次数：次

返回列表

VS Code 底层基于 Electron 和 TypeScript，但其高效、可扩展的核心在于一整套协同技术：Electron 提供跨平台桌面容器，主进程管理系统能力，渲染进程处理 UI；深度定制 Chromium 实现高性能文本渲染，计算任务下沉至独立进程或 Web Worker 避免阻塞；全部代码约 100 万行几乎均用 TypeScript 编写，利用接口、泛型和声明文件构建强类型扩展 API 与模块化服务，实现自举开发；关键模块自研，如 Monaco Editor 支持浏览器级编辑能力，LSP 协议解耦语言支持，增量文本模型高效处理大文件；进程间通过 IPC + JSON-RPC 轻量通信；构建采用 webpack 按需打包、gulp 控制流程，tsc 编译，vscode-test 进行端到端测试，CI/CD 基于 GitHub Actions 全流程自动化。最终成就其稳定、快速与开放生态。

vs code背后使用的技术栈是什么？(electron, typescript)

VS Code 底层主要基于 Electron 和 TypeScript，但它的技术栈比这两者更丰富——Electron 提供桌面壳，TypeScript 支撑核心逻辑，而真正让 VS Code 高效、可扩展、跨平台的，是一整套协同工作的技术组合。

Electron 是运行容器，不是全部

VS Code 使用 Electron 将 Chromium 渲染引擎和 Node.js 运行时打包在一起，实现跨平台桌面应用。主进程管理窗口、菜单、更新等系统级能力；渲染进程（多个）负责编辑器界面、语法高亮、代码补全等 UI 逻辑。但要注意：VS Code 并非“网页套壳”，它深度定制了 Chromium 的渲染行为（比如用 canvas 实现高性能文本绘制），并把大量计算密集型任务（如搜索、语言分析）下沉到独立进程或 Web Worker 中，避免阻塞 UI。

TypeScript 是主力开发语言，也是架构基石

整个 VS Code 桌面端代码库（约 100 万行）几乎全部用 TypeScript 编写。它不只是“加了类型的 J*aScript”，而是直接支撑了关键设计：

通过接口和泛型定义清晰的扩展 API（如 vscode.ExtensionContext），让插件生态有强类型保障
利用声明文件（.d.ts）统一暴露内部服务（如 IEditorService、ILanguageService），便于模块解耦和测试
编译时类型检查大幅降低大型协作中的出错率，配合 VS Code 自身的智能提示，形成“自举式”开发体验

核心能力依赖自研与轻量第三方库

VS Code 避免重度依赖大型框架，倾向自研关键模块：

Monaco Editor：从 Azure 门户中拆分出来的代码编辑器内核，支持语法高亮、折叠、自动缩进、多光标等，完全用 TypeScript 编写，可单独在浏览器中使用
Language Server Protocol (LSP)：不内置语言支持，而是通过标准协议对接外部语言服务器（如 TypeScript Server、rust-analyzer），实现松耦合与高性能
Text Model：自研的增量式文本模型，支持超大文件（GB 级）、只读区域、装饰器等，比通用 DOM 操作高效得多
底层通信使用 IPC（Inter-Process Communication） + JSON-RPC，主进程与渲染进程、插件主机进程之间靠这套轻量协议交互

构建与工程化围绕 TypeScript 生态展开

项目使用 webpack 打包前端模块（按需加载 UI 组件），gulp 负责构建流程（生成产品版本、签名、国际化资源），所有源码经 tsc 编译，再通过 vscode-test 运行基于 Electron 的端到端测试。CI/CD 流水线全程基于 GitHub Actions，验证跨平台构建与自动化测试。