VSCode 源码学习—技术与结构分析

1,541 阅读4分钟

        前面我们学习了如何把VSCode的开源项目在本地启动,今天我们看一下源码的结构,以及用到的技术,看一下内部是如何实现的。

一、技术介绍

        VSCode 采用了 Electron,Electron是使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用。使用的代码编辑器名为 Monaco Editor,开发语言呢,VSCode当然是使用了自己家的 TypeScript 语言啦。可能有很多人还不知道这些技术是干什么,下面来科普一下,不过不知道typeScript的前端同学,先自己自我反省一下哈。

1、Electron介绍

        先来看一下官方是怎么介绍Electron:如果你可以建一个网站,你就可以建一个桌面应用程序。 Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架,它负责比较难搞的部分,你只需把精力放在你的应用的核心上即可。这样是不是清楚Electron是干什么的了。

         Electron 通过 BrowserWindow 可以创建一个本地窗口,并加载一个HTML文档,BrowserWindow中的内容就是一个浏览器窗口,不仅能创建DOM元素,同时能使用任意的Node模块,并且还可以通过IPC与主进程通讯。

2、编辑器 Monaco Editor

        Monaco Editor是为VS Code提供支持的代码编辑器,运行在浏览器环境中。编辑器提供代码提示,智能建议等功能。供开发人员远程更方便的编写代码。移动浏览器或移动Web框架不支持Monaco编辑器。

3、typeScript 介绍

        typeScript是javaScript的超集,遵循最新的 ES6、 Es5 规范。 TypeScript 从语言层面上扩展了JavaScript的语法。TypeScript是为大型应用开发而设计的,生产过程中可以保证安全性和兼容性。下面来介绍一下它的特点:

  • 类型批注和编译时的类型检查
  • 强类型语言
  • 面向对象
  • 类class
  • 接口
  • lambda函数
  • 泛型

二、多进程

1、Electron主进程和渲染进程

Electron 运行 package.jsonmain 脚本的进程被称为主进程。 在主进程中运行的脚本通过创建web页面来展示用户界面。 一个 Electron 应用总是有且只有一个主进程。
由于 Electron 使用了 Chromium 来展示 web 页面,所以 Chromium 的多进程架构也被使用到。 每个 Electron 中的 web 页面运行在它自己的渲染进程中。
在普通的浏览器中,web页面通常在一个沙盒环境中运行,不被允许去接触原生的资源。 然而 Electron 的用户在 Node.js 的 API 支持下可以在页面中和操作系统进行一些底层交互。

2、Electron主进程和渲染进程之间的区别

主进程使用 BrowserWindow 实例创建页面。 每个 BrowserWindow 实例都在自己的渲染进程里运行页面。 当一个 BrowserWindow 实例被销毁后,相应的渲染进程也会被终止。
主进程管理所有的web页面和它们对应的渲染进程。 每个渲染进程都是独立的,它只关心它所运行的 web 页面。
在页面中调用与 GUI 相关的原生 API 是不被允许的,因为在 web 页面里操作原生的 GUI 资源是非常危险的,而且容易造成资源泄露。 如果你想在 web 页面里使用 GUI 操作,其对应的渲染进程必须与主进程进行通讯,请求主进程进行相关的 GUI 操作。

3、vacode里的进程

  • 主进程:VSCode里的主进程主要负责创建窗口和菜单,生命周期管理,自动更新等与系统相关的功能。
  • 渲染进程:绝大多数代码都是运行在渲染进程中的,渲染进程负责界面的显示,响应用户操作。
  • 插件进程:每一个渲染进程同时也对应一个插件进程,插件运行在单独的进程不会对渲染进程造成影响,

三、项目结构

├── build                 // gulp打包编译相关脚本
├── extensions            // 内置插件
├── node_modules          // 依赖模块
├── out                   // 编译输出目录               
├── resources             // 平台相关静态资源,图标等
├── script                // 工具脚本,开发/测试
├── src                   // 源代码和素材(ts,js,css,svg,html等)
│    ├── typings          // 常用模块定义
│    ├── vs
│    │    ├── base         // 核心模块,常用库和基本组件
│    │    ├── editor       // 编辑器模块
│    │    ├── code         // VS Code主窗体相关
│    │    ├── platform     // 核心功能接口定义和基本实现
│    │    ├── workbench    // 业务逻辑功能实现
│    │    ├── loader.js    // vscode loader
│    │    └── vscode.d.ts  // 插件API定义
│    └── main.js          // 主进程入口
├── gulpfile.js          // gulp打包编译入口
├── product.json         // 产品描述文件
└── package.json

其中业务相关的最关键的部分是:

src/vs/code:主窗体工具栏菜单创建

src/vs/editor:代码编辑器IDE核心相关

src/vs/workbench:UI布局功能服务对接

VS Code的源码部分就讲到这里了,里面各个模块之间的关系,以及代码的具体实现,大家可以去github上把源码clone下来,启动项目,自己了解一下。可以对照着Electron的文档。