使用的vscode版本 1.30.0

总纲

—- 主进程 —-

  • src/main.js
  • vs/code/electron-main/main.ts
  • vs/code/electron-main/app.ts
  • vs/code/electron-main/window.ts 启动渲染进程的关键

—- 渲染进程 —-

  • vs/code/electron-browser/workbench/workbench.html 渲染进程的html
  • vs/workbench/electron-browser/main.ts
  • vs/workbench/electron-browser/shell.ts
  • vs/workbench/electron-browser/workbench.ts 界面渲染逻辑的核心，重点关注的
  • vs/workbench/browser/parts/titlebar/titlebarPart

src/main.js

electron-main/main.ts

做了那几件事情？

electron-main/app.ts

electron-main/window.ts

创建渲染进程的关键

CodeWindow 这个类

  1. import { screen, BrowserWindow, systemPreferences, app, TouchBar, nativeImage } from 'electron';
  3. export class CodeWindow extends Disposable implements ICodeWindow {
  5.   private createBrowserWindow(config: IWindowCreationOptions): void {
  7.     this._win = new BrowserWindow(options);
  9.   }
  11.   load(config: IWindowConfiguration, isReload?: boolean, disableExtensions?: boolean): void {
  12.     this._win.loadURL(this.getUrl(configuration));
  13.   }
  16.   private doGetUrl(config: object): string {
  17.       // 通过url参数把配置传入workbench.html
  18.       return `${require.toUrl('vs/code/electron-browser/workbench/workbench.html')}?config=${encodeURIComponent(JSON.stringify(config))}`;
  19.   }
  21. }

workbench.html(渲染进程)

  1. <!-- Copyright (C) Microsoft Corporation. All rights reserved. -->
  2. <!DOCTYPE html>
  3. <html>
  4.     <head>
  5.         <meta charset="utf-8" />
  6.         <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self' https: data: vscode-remote:; media-src 'none'; child-src 'self'; object-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; connect-src 'self' https:; font-src 'self' https:;">
  7.     </head>
  8.     <body class="monaco-shell vs-dark" aria-label="">
  9.     </body>
  11.     <!-- Startup via workbench.js -->
  12.     <script src="workbench.js"></script>
  13. </html>

workbench.js(渲染进程)

先加载了非常多前置的依赖，然后运行了主进程

  1. // Load workbench main
  2. // 要先加载三个文件
  3. bootstrapWindow.load([
  4.     'vs/workbench/workbench.main',
  5.     'vs/nls!vs/workbench/workbench.main',
  6.     'vs/css!vs/workbench/workbench.main'
  7. ],
  8.     function (workbench, configuration) {
  9.         perf.mark('didLoadWorkbenchMain');
  11.         return process['lazyEnv'].then(function () {
  12.             perf.mark('main/startup');
  14.             // @ts-ignore
  15.       // 即运行下面的主进程
  16.             return require('vs/workbench/electron-browser/main').startup(configuration);
  17.         });
  18.     }, {

workbench.main

  1. // Base
  2. import 'vs/base/common/strings';
  3. import 'vs/base/common/errors';
  5. // Configuration
  6. import 'vs/workbench/services/configuration/common/configurationExtensionPoint';
  8. // Editor
  9. import 'vs/editor/editor.all';
  11. // Platform
  12. import 'vs/platform/widget/browser/contextScopedHistoryWidget';
  13. import 'vs/platform/label/electron-browser/label.contribution';

main (vs/workbench/electron-browser/main.ts)

openWorkbench -> WorkbenchShell.open 

  1. import * as browser from 'vs/base/browser/browser';
  3. export function startup(configuration: IWindowConfiguration): Promise<void> {
  5.     // Massage configuration file URIs
  6.     revive(configuration);
  8.     // Setup perf
  9.     perf.importEntries(configuration.perfEntries);
  11.     // Configure emitter leak warning threshold
  12.     setGlobalLeakWarningThreshold(-1);
  14.     // Browser config
  15.     browser.setZoomFactor(webFrame.getZoomFactor()); // Ensure others can listen to zoom level changes
  16.     browser.setZoomLevel(webFrame.getZoomLevel(), true /* isTrusted */); // Can be trusted because we are not setting it ourselves (https://github.com/Microsoft/vscode/issues/26151)
  17.     browser.setFullscreen(!!configuration.fullscreen);
  18.     browser.setAccessibilitySupport(configuration.accessibilitySupport ? platform.AccessibilitySupport.Enabled : platform.AccessibilitySupport.Disabled);
  20.     // Keyboard support
  21.     KeyboardMapperFactory.INSTANCE._onKeyboardLayoutChanged();
  23.     // Setup Intl for comparers
  24.     comparer.setFileNameComparer(new IdleValue(() => {
  25.         const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' });
  26.         return {
  27.             collator: collator,
  28.             collatorIsNumeric: collator.resolvedOptions().numeric
  29.         };
  30.     }));
  32.     // Open workbench
  33.     return openWorkbench(configuration);
  34. }


shell (vs/workbench/electron-browser/shell.ts)

open -> renderContents -> createWorkbench -> workbench.startup()

  1. export class WorkbenchShell extends Disposable {
  2.  open(){
  3.    // Listen on unhandled rejection events
  4.         window.addEventListener('unhandledrejection', (event: PromiseRejectionEvent) => {
  6.             // See https://developer.mozilla.org/en-US/docs/Web/API/PromiseRejectionEvent
  7.             errors.onUnexpectedError(event.reason);
  9.             // Prevent the printing of this event to the console
  10.             event.preventDefault();
  11.         });
  13.         // Listen on unexpected errors
  14.         errors.setUnexpectedErrorHandler((error: any) => {
  15.             this.onUnexpectedError(error);
  16.         });
  18.         // Shell Class for CSS Scoping
  19.         addClass(this.container, 'monaco-shell');
  21.         // Create Contents
  22.         this.renderContents();
  24.         // Layout
  25.         this.layout();
  27.         // Listeners
  28.         this.registerListeners();
  30.         // Set lifecycle phase to `Ready`
  31.         this.lifecycleService.phase = LifecyclePhase.Ready;
  32.  }
  34.   private renderContents(): void {
  36.         // ARIA
  37.         aria.setARIAContainer(document.body);
  39.         // Instantiation service with services
  40.         const [instantiationService, serviceCollection] = this.initServiceCollection(this.container);
  42.         // Warm up font cache information before building up too many dom elements
  43.         restoreFontInfo(this.storageService);
  44.         readFontInfo(BareFontInfo.createFromRawSettings(this.configurationService.getValue('editor'), browser.getZoomLevel()));
  45.         this._register(this.storageService.onWillSaveState(() => {
  46.             saveFontInfo(this.storageService); // Keep font info for next startup around
  47.         }));
  49.         // Workbench
  50.         this.workbench = this.createWorkbench(instantiationService, serviceCollection, this.container);
  52.         // Window
  53.         this.workbench.getInstantiationService().createInstance(ElectronWindow);
  55.         // Handle case where workbench is not starting up properly
  56.         const timeoutHandle = setTimeout(() => {
  57.             this.logService.warn('Workbench did not finish loading in 10 seconds, that might be a problem that should be reported.');
  58.         }, 10000);
  60.         this.lifecycleService.when(LifecyclePhase.Restored).then(() => {
  61.             clearTimeout(timeoutHandle);
  62.         });
  63.     }
  64. }


workbench (vs/workbench/electron-browser/workbench.ts)

这个起什么作用？

  • 初始化各种服务 dom容器，全局action，初始services，上下文按键，监听工作区变化和逻辑
  • 渲染工作区
  • 恢复之前打开的内容


  1. export class Workbench extends Disposable implements IPartService {
  3.          startup(): Thenable<IWorkbenchStartedInfo> {
  4.       this.workbenchStarted = true;
  6.       // Create Workbench Container
  7.       this.createWorkbench();
  9.       // Install some global actions
  10.       this.createGlobalActions();
  12.       // Services
  13.       this.initServices();
  15.       // Context Keys
  16.       this.handleContextKeys();
  18.       // Register Listeners
  19.       this.registerListeners();
  21.       // Settings
  22.       this.initSettings();
  24.       // Create Workbench and Parts
  25.       this.renderWorkbench();
  27.       // Workbench Layout
  28.       this.createWorkbenchLayout();
  30.       // Driver
  31.       if (this.environmentService.driverHandle) {
  32.         registerWindowDriver(this.mainProcessClient, this.configuration.windowId, this.instantiationService).then(disposable => this._register(disposable));
  33.       }
  35.       // Restore Parts
  36.       return this.restoreParts();
  37.     } 
  39.     private renderWorkbench(): void {
  41.       // Apply sidebar state as CSS class
  42.       if (this.sideBarHidden) {
  43.         DOM.addClass(this.workbench, 'nosidebar');
  44.       }
  46.       if (this.panelHidden) {
  47.         DOM.addClass(this.workbench, 'nopanel');
  48.       }
  50.       if (this.statusBarHidden) {
  51.         DOM.addClass(this.workbench, 'nostatusbar');
  52.       }
  54.       // Apply font aliasing
  55.       this.setFontAliasing(this.fontAliasing);
  57.       // Apply fullscreen state
  58.       if (browser.isFullscreen()) {
  59.         DOM.addClass(this.workbench, 'fullscreen');
  60.       }
  62.       // Create Parts
  63.       this.createTitlebarPart();
  64.       this.createActivityBarPart();
  65.       this.createSidebarPart();
  66.       this.createEditorPart();
  67.       this.createPanelPart();
  68.       this.createStatusbarPart();
  70.       // Notification Handlers
  71.       this.createNotificationsHandlers();
  74.       // Menubar visibility changes
  75.       if ((isWindows || isLinux) && this.useCustomTitleBarStyle()) {
  76.         this.titlebarPart.onMenubarVisibilityChange()(e => this.onMenubarToggled(e));
  77.       }
  79.       // Add Workbench to DOM
  80.       this.container.appendChild(this.workbench);
  81.     }
  83.   private createTitlebarPart(): void {
  84.         const titlebarContainer = this.createPart(Identifiers.TITLEBAR_PART, ['part', 'titlebar'], 'contentinfo');
  86.         this.titlebarPart.create(titlebarContainer);
  87.     }
  88. }