VSCode源码分析 - 主启动流程

    git仓库地址： https://github.com/microsoft/vscode

    通过Eletron集成了桌面应用，可以跨平台使用，开发语言主要采用微软自家的TypeScript。 整个项目结构比较清晰，方便阅读代码理解。成为了最流行跨平台的桌面IDE应用

    微软希望VSCode在保持核心轻量级的基础上，增加项目支持，智能感知，编译调试。

    下载最新版本,目前我用的是1.37.1版本 官方的wiki中有编译安装的说明

    Linux, Window, MacOS三个系统编译时有些差别，参考官方文档， 在编译安装依赖时如果遇到connect timeout, 需要进行科学上网。

    技术架构

    img

    Monaco Editor

    核心层

    • base: 提供通用服务和构建用户界面
    • platform: 注入服务和基础服务代码
    • editor: 微软Monaco编辑器，也可独立运行使用
    • wrokbench: 配合Monaco并且给viewlets提供框架：如：浏览器状态栏，菜单栏利用electron实现桌面程序

    整个项目完全使用typescript实现，electron中运行主进程和渲染进程，使用的api有所不同，所以在core中每个目录组织也是按照使用的api来安排， 运行的环境分为几类：

    • common: 只使用javascritp api的代码，能在任何环境下运行
    • browser: 浏览器api, 如操作dom; 可以调用common
    • node: 需要使用node的api,比如文件io操作
    • electron-brower: 渲染进程api, 可以调用common, brower, node, 依赖
    • electron-main: 主进程api, 可以调用: common, node 依赖于electron main-process AP

    Electron通过package.json中的main字段来定义应用入口。

    main.js是vscode的入口。

    • src/main.js
      • vs/code/electron-main/main.ts
      • vs/code/electron-main/app.ts
      • vs/code/electron-main/windows.ts
      • vs/workbench/electron-browser/desktop.main.ts
      • vs/workbench/browser/workbench.ts
    2.     //启动追踪，后面会讲到，跟性能检测优化相关。
    3.     if (args['trace']) {
    4.         // @ts-ignore
    5.         const contentTracing = require('electron').contentTracing;
    7.         const traceOptions = {
    8.             categoryFilter: args['trace-category-filter'] || '*',
    9.             traceOptions: args['trace-options'] || 'record-until-full,enable-sampling'
    10.         };
    12.         contentTracing.startRecording(traceOptions, () => onReady());
    13.     } else {
    14.         onReady();
    15.     }
    16. });
    17. function onReady() {
    18.     perf.mark('main:appReady');
    20.     Promise.all([nodeCachedDataDir.ensureExists(), userDefinedLocale]).then(([cachedDataDir, locale]) => {
    21.         //1. 这里尝试获取本地配置信息，如果有的话会传递到startup
    22.         if (locale && !nlsConfiguration) {
    23.             nlsConfiguration = lp.getNLSConfiguration(product.commit, userDataPath, metaDataFile, locale);
    24.         }
    26.         if (!nlsConfiguration) {
    27.             nlsConfiguration = Promise.resolve(undefined);
    28.         }
    31.         nlsConfiguration.then(nlsConfig => {
    33.             //4. 首先会检查用户语言环境配置，如果没有设置默认使用英语 
    34.             const startup = nlsConfig => {
    35.                 nlsConfig._languagePackSupport = true;
    36.                 process.env['VSCODE_NLS_CONFIG'] = JSON.stringify(nlsConfig);
    37.                 process.env['VSCODE_NODE_CACHED_DATA_DIR'] = cachedDataDir || '';
    39.                 perf.mark('willLoadMainBundle');
    40.                 //使用微软的loader组件加载electron-main/main文件
    41.                 require('./bootstrap-amd').load('vs/code/electron-main/main', () => {
    42.                     perf.mark('didLoadMainBundle');
    43.                 });
    44.             };
    46.             // 2. 接收到有效的配置传入是其生效，调用startup
    47.             if (nlsConfig) {
    48.                 startup(nlsConfig);
    49.             }
    51.             // 3. 这里尝试使用本地的应用程序
    52.             // 应用程序设置区域在ready事件后才有效
    53.             else {
    54.                 let appLocale = app.getLocale();
    55.                 if (!appLocale) {
    56.                     startup({ locale: 'en', availableLanguages: {} });
    57.                 } else {
    59.                     appLocale = appLocale.toLowerCase();
    60.                     // 这里就会调用config服务，把本地配置加载进来再调用startup
    61.                     lp.getNLSConfiguration(product.commit, userDataPath, metaDataFile, appLocale).then(nlsConfig => {
    62.                         if (!nlsConfig) {
    63.                             nlsConfig = { locale: appLocale, availableLanguages: {} };
    64.                         }
    66.                         startup(nlsConfig);
    67.                     });
    68.                 }
    69.             }
    70.         });
    71.     }, console.error);
    72. }

    electron-main/main 是程序真正启动的入口,进入main process初始化流程.

    这里主要做了两件事情：

    1. 初始化Service
    2. 启动主实例

    直接看startup方法的实现,基础服务初始化完成后会加载 CodeApplication, mainIpcServer, instanceEnvironment，调用 startup 方法启动APP

    1. private async startup(args: ParsedArgs): Promise<void> {
    3.         //spdlog 日志服务
    4.         const bufferLogService = new BufferLogService();
    6.         // 1. 调用 createServices
    7.         const [instantiationService, instanceEnvironment] = this.createServices(args, bufferLogService);
    8.         try {
    10.             // 1.1 初始化Service服务
    11.             await instantiationService.invokeFunction(async accessor => {
    13.                 const environmentService = accessor.get(IEnvironmentService);
    14.                 // 配置服务
    15.                 const configurationService = accessor.get(IConfigurationService);
    16.                 // 持久化数据
    17.                 const stateService = accessor.get(IStateService);
    19.                 try {
    20.                     await this.initServices(environmentService, configurationService as ConfigurationService, stateService as StateService);
    21.                 } catch (error) {
    23.                     // 抛出错误对话框
    24.                     this.handleStartupDataDirError(environmentService, error);
    26.                     throw error;
    27.                 }
    28.             });
    30.             // 1.2 启动实例
    31.             await instantiationService.invokeFunction(async accessor => {
    32.                 const environmentService = accessor.get(IEnvironmentService);
    33.                 const logService = accessor.get(ILogService);
    34.                 const lifecycleService = accessor.get(ILifecycleService);
    35.                 const configurationService = accessor.get(IConfigurationService);
    37.                 const mainIpcServer = await this.doStartup(logService, environmentService, lifecycleService, instantiationService, true);
    39.                 bufferLogService.logger = new SpdLogService('main', environmentService.logsPath, bufferLogService.getLevel());
    40.                 once(lifecycleService.onWillShutdown)(() => (configurationService as ConfigurationService).dispose());
    42.                 return instantiationService.createInstance(CodeApplication, mainIpcServer, instanceEnvironment).startup();
    43.             });
    44.         } catch (error) {
    45.             instantiationService.invokeFunction(this.quit, error);
    46.         }
    47.     }

    vs/code/electron-main/app.ts

    openFirstWindow 主要实现 CodeApplication.openFirstWindow 首次开启窗口时，创建 Electron 的 IPC，使主进程和渲染进程间通信。 window会被注册到sharedProcessClient，主进程和共享进程通信 根据 environmentService 提供的参数(path,uri)调用windowsMainService.open 方法打开窗口

    1. private openFirstWindow(accessor: ServicesAccessor, electronIpcServer: ElectronIPCServer, sharedProcessClient: Promise<Client<string>>): ICodeWindow[] {
    3.         ...
    4.         // 1. 注入Electron IPC Service, windows窗口管理，菜单栏等服务
    6.         // 2. 根据environmentService进行参数配置
    7.         const macOpenFiles: string[] = (<any>global).macOpenFiles;
    8.         const context = !!process.env['VSCODE_CLI'] ? OpenContext.CLI : OpenContext.DESKTOP;
    9.         const hasCliArgs = hasArgs(args._);
    10.         const hasFolderURIs = hasArgs(args['folder-uri']);
    11.         const hasFileURIs = hasArgs(args['file-uri']);
    12.         const noRecentEntry = args['skip-add-to-recently-opened'] === true;
    13.         const waitMarkerFileURI = args.wait && args.waitMarkerFilePath ? URI.file(args.waitMarkerFilePath) : undefined;
    15.         ...
    17.         // 打开主窗口，默认从执行命令行中读取参数 
    18.         return windowsMainService.open({
    19.             context,
    20.             cli: args,
    21.             forceNewWindow: args['new-window'] || (!hasCliArgs && args['unity-launch']),
    22.             diffMode: args.diff,
    23.             noRecentEntry,
    24.             waitMarkerFileURI,
    25.             gotoLineMode: args.goto,
    26.             initialStartup: true
    27.         });
    28.     }

    vs/code/electron-main/windows.ts

    接下来到了electron的windows窗口，open方法在doOpen中执行窗口配置初始化，最终调用openInBrowserWindow -> 执行doOpenInBrowserWindow是其打开window,主要步骤如下：

    1. private openInBrowserWindow(options: IOpenBrowserWindowOptions): ICodeWindow {
    3.     ...
    4.     // New window
    5.     if (!window) {
    6.         //1.判断是否全屏创建窗口
    7.         // 2. 创建实例窗口
    8.         window = this.instantiationService.createInstance(CodeWindow, {
    9.             state,
    10.             extensionDevelopmentPath: configuration.extensionDevelopmentPath,
    11.             isExtensionTestHost: !!configuration.extensionTestsPath
    12.         });
    14.         // 3.添加到当前窗口控制器
    15.         WindowsManager.WINDOWS.push(window);
    17.         // 4.窗口监听器
    18.         window.win.webContents.removeAllListeners('devtools-reload-page'); // remove built in listener so we can handle this on our own
    19.         window.win.webContents.on('devtools-reload-page', () => this.reload(window!));
    21.         window.win.on('unresponsive', () => this.onWindowError(window!, WindowError.UNRESPONSIVE));
    22.         window.win.on('closed', () => this.onWindowClosed(window!));
    24.         // 5.注册窗口生命周期
    25.         (this.lifecycleService as LifecycleService).registerWindow(window);
    26.     }
    28.     ...
    30.     return window;
    31. }

    doOpenInBrowserWindow会调用window.load方法 在window.ts中实现

    main process的使命完成, 主界面进行构建布局。

    在workbench.html中加载了workbench.js， 这里调用return require(‘vs/workbench/electron-browser/desktop.main’).main(configuration);实现对主界面的展示

    vs/workbench/electron-browser/desktop.main.ts

    创建工作区，调用workbench.startup()方法，构建主界面展示布局

    1. ...
    2. async open(): Promise<void> {
    3.     const services = await this.initServices();
    4.     await domContentLoaded();
    5.     mark('willStartWorkbench');
    7.     // 1.创建工作区
    8.     const workbench = new Workbench(document.body, services.serviceCollection, services.logService);
    10.     // 2.监听窗口变化
    11.     this._register(addDisposableListener(window, EventType.RESIZE, e => this.onWindowResize(e, true, workbench)));
    13.     // 3.工作台生命周期
    14.     this._register(workbench.onShutdown(() => this.dispose()));
    15.     this._register(workbench.onWillShutdown(event => event.join(services.storageService.close())));
    17.     // 3.启动工作区
    18.     const instantiationService = workbench.startup();
    20.     ...
    21. }
    22. ...

    vs/workbench/browser/workbench.ts

    工作区继承自layout类，主要作用是构建工作区，创建界面布局。

    1. export class Workbench extends Layout {
    2.     ...
    3.     startup(): IInstantiationService {
    4.         try {
    5.             ...
    7.             // Services
    8.             const instantiationService = this.initServices(this.serviceCollection);
    10.             instantiationService.invokeFunction(async accessor => {
    11.                 const lifecycleService = accessor.get(ILifecycleService);
    12.                 const storageService = accessor.get(IStorageService);
    13.                 const configurationService = accessor.get(IConfigurationService);
    15.                 // Layout
    16.                 this.initLayout(accessor);
    18.                 // Registries
    19.                 this.startRegistries(accessor);
    21.                 // Context Keys
    22.                 this._register(instantiationService.createInstance(WorkbenchContextKeysHandler));
    24.                 // 注册监听事件
    25.                 this.registerListeners(lifecycleService, storageService, configurationService);
    27.                 // 渲染工作区
    28.                 this.renderWorkbench(instantiationService, accessor.get(INotificationService) as NotificationService, storageService, configurationService);
    30.                 // 创建工作区布局
    31.                 this.createWorkbenchLayout(instantiationService);
    33.                 // 布局构建
    34.                 this.layout();
    36.                 // Restore
    37.                 try {
    38.                     await this.restoreWorkbench(accessor.get(IEditorService), accessor.get(IEditorGroupsService), accessor.get(IViewletService), accessor.get(IPanelService), accessor.get(ILogService), lifecycleService);
    39.                 } catch (error) {
    40.                     onUnexpectedError(error);
    41.                 }
    42.             });
    44.             return instantiationService;
    45.         } catch (error) {
    46.             onUnexpectedError(error);
    48.             throw error; // rethrow because this is a critical issue we cannot handle properly here
    49.         }
    50.     }
    51. }