vscode外掛原理淺析與實戰

語言: CN / TW / HK

時間 2022-05-21 21:51:55 ELab團隊

主題: VS Code

大廠技術堅持周更精選好文

背景

作為一位前端同學肯定對vscode不陌生，相信每位同學電腦上也都有五花八門的個性化配置，那麼我們是藉助什麼東西做到的呢？那就是它豐富的 外掛 生態。本次將講述外掛基本原理並從一個簡單的case瞭解如何製作一個的 vscode外掛

是什麼實現了vscode

Electron

vscode底層通過electron開發實現，electron的核心構成分別是：chromium、nodejs、native-api

Chromium（ ui 檢視） ：通過web技術棧編寫實現ui介面，其與chrome的區別是開放開源、無需安裝可直接使用（可以簡單理解chromium是beta體驗版chrome，新特性會優先在chromium中體驗並在穩定後更新至chrome中）。

Nodejs （操作桌面檔案系統） ：通過node-gyp編譯，主要用來操作檔案系統和呼叫本地網路。

Native-API（作業系統緯度 api ）：使用Nodejs-C++ Addon呼叫作業系統API（Nodejs-C++ Addon外掛是一種動態連結庫，採用C/C++語言編寫，可以通過require()將外掛載入進NodeJS中進行使用），可以理解是對Nodejs介面的能力拓展。

Electron 多程序 ：

主程序（main）：每一個Electron應用只會啟動一個主程序。

渲染程序（render）：主程序會通過Chromium的api建立任意多個web頁面，每一個工作區（workbench）對應一個程序，同時是BrowserWindow例項，由於chromeium（chrome）也是多程序的，所以每個頁面都單獨執行在各自的渲染程序中。

例：

// 主程序
const { ipcMain } = require('electron');

// 主程序響應事件
ipcMain.on('main_msg', (event, arg) => {
  console.log(arg); // ping
  event.reply('renderer-msg-reply', 'pong');
})

// 渲染程序（子程序）
const { ipcRenderer } = require('electron');

// 渲染程序響應事件
ipcRenderer.on('renderer-msg-reply', (event, arg) => {
  console.log(arg); // pong
})

// 觸發主程序響應事件
ipcRenderer.send('main_msg', 'ping');

對於 vscode 還會有一些其他的程序，比如：

外掛程序（Extension）：fork渲染程序，每個外掛都執行在一個NodeJS宿主環境中，即外掛間共享程序

Debug程序：一個特殊的外掛程序。

Search程序：搜尋是密集型任務，單獨佔用一個程序。

。。。

通俗意義上， electron 就是給你搞了一個Chrome瀏覽器的殼子，只是比傳統網頁多了一個訪問桌面檔案的功能。

vscode外掛載入基本原理

https://github.com/microsoft/vscode/tree/main

外掛的結構

├── extensions----------------------------------vscode內建外掛
├── src
│   ├── main.js--------------------------------入口檔案
│   ├── bootstrap-fork.js----------------------衍生子程序（渲染程序）
│   ├── vs
│   │   └── workbench-------------------------工作臺
│   │   ├── base
│   │   │   ├── browser----------------------瀏覽器api，可操作dom
│   │   │   ├── common-----------------------公共js程式碼
│   │   │   ├── node-------------------------nodejs api
│   │   ├── code
│   │   │   ├── electron-browser-------------electron渲染程序
│   │   │   ├── electron-main----------------electron主程序

外掛載入過程

初始化外掛服務

在外掛初始化建構函式中通過 _initialize 初始化外掛服務。

// src/vs/workbench/services/extensions/electron-browser/extensionService.ts
// 通過監聽生命週期函式，建立ExtensionHostManager
export class ExtensionService extends AbstractExtensionService implements IExtensionService {
    constructor() {
        this._lifecycleService.when(LifecyclePhase.Ready).then(() => {
            // reschedule to ensure this runs after restoring viewlets, panels, and editors
            runWhenIdle(() => {
                this ._initialize() ; // 初始化外掛服務
            }, 50 /*max delay*/);
        });
    }
}

// src/vs/workbench/services/extensions/common/abstractExtensionService.ts
// 啟動初始化外掛服務方法
protected async _initialize(): Promise<void> {
    perf.mark('code/willLoadExtensions');
    this ._startExtensionHosts( true , []) ;
    // ...
}

private _startExtensionHosts(isInitialStart: boolean, initialActivationEvents: string[]): void {
    // 建立外掛程序，分別為LocalProcessExtensionHost（本地外掛，如個人外掛）、RemoteExtensionHost（遠端外掛，如WSL Remote）、WebWorkerExtensionHost（web worker程序）
    const extensionHosts = this._createExtensionHosts(isInitialStart);
    extensionHosts.forEach((extensionHost) => {
        // 建立ExtensionHostManager
        const processManager: IExtensionHostManager = createExtensionHostManager(this._instantiationService, extensionHost, isInitialStart, initialActivationEvents, this._acquireInternalAPI());
        processManager.onDidExit(([code, signal]) => this._onExtensionHostCrashOrExit(processManager, code, signal));
        processManager.onDidChangeResponsiveState((responsiveState) => { this._onDidChangeResponsiveChange.fire({ isResponsive: responsiveState === ResponsiveState.Responsive }); });
        this._extensionHostManagers.push(processManager);
    });
}

fork渲染程序

fork渲染程序，並載入 extensionHostProcess。由於vscode考慮外掛可能會影響啟動效能和IDE自身的穩定性，所以通過程序隔離來解決這個問題，外掛程序fork渲染程序，保證每個外掛都執行在一個nodejs宿主環境中，不影響IDE及其啟動時間。

// src/vs/workbench/services/extensions/common/extensionHostManager.ts
// 啟動fork渲染程序
class ExtensionHostManager extends Disposable {
  constructor() {
      this._proxy = this._extensionHost.start() !.then();
  }
}

// src/vs/workbench/services/extensions/electron-browser/localProcessExtensionHost.ts
class LocalProcessExtensionHost implements IExtensionHost {
  public start(): Promise<IMessagePassingProtocol> | null {
    // ...
    const opts = {
      env: objects.mixin(objects.deepClone(process.env), {
        // 載入外掛程序，指明外掛程序入口
        AMD_ENTRYPOINT: 'vs/workbench/services/extensions/node/extensionHostProcess',
      }),
    }

    // 衍生子程序（渲染程序）
    this._extensionHostProcess = fork(getPathFromAmdModule(require, 'bootstrap-fork'), ['--type=extensionHost'], opts);
  }
}

初始化外掛啟用邏輯

// src/vs/workbench/services/extensions/node/extensionHostProcess.ts
import { startExtensionHostProcess } from "vs/workbench/services/extensions/node/extensionHostProcessSetup";
startExtensionHostProcess().catch((err) => console.log(err));

// src/vs/workbench/services/extensions/node/extensionHostProcessSetup.ts
export async function startExtensionHostProcess(): Promise<void> {
    const extensionHostMain = new ExtensionHostMain(
        renderer.protocol,
        initData,
        hostUtils,
        uriTransformer
    );
}

// src/vs/workbench/services/extensions/common/extensionHostMain.ts
export class ExtensionHostMain {
  constructor() {
    // 必須在建立extensionService之後再呼叫initialize，因為initialize本身會依賴extensionService的例項
    this._extensionService = instaService.invokeFunction(accessor => accessor.get(IExtHostExtensionService));
    this._extensionService.initialize();
  }
}

外掛啟用

// src/vs/workbench/api/node/extHost.services.ts
import { ExtHostExtensionService } from 'vs/workbench/api/node/extHostExtensionService';

// 註冊外掛服務
registerSingleton(IExtHostExtensionService, ExtHostExtensionService);

繼承AbstractExtHostExtensionService

// src/vs/workbench/api/node/extHostExtensionService.ts
export class ExtHostExtensionService extends AbstractExtHostExtensionService {
    // ...
}

// src/vs/workbench/api/common/extHostExtensionService.ts
abstract class AbstractExtHostExtensionService extends Disposable {
  constructor() {
    this._activator = this._register(new ExtensionsActivator());
  }

  // 根據activationEvent事件名啟用外掛，如onCommand
  private _activateByEvent(activationEvent: string, startup: boolean): Promise<void> {
    return this._activator.activateByEvent(activationEvent, startup);
  }
}

載入流程

簡單實戰

背景：實現選擇指定目錄右鍵自動生成lynx頁面基本目錄結構的外掛。

目標拆解：

輸入lynx頁面名稱

按照模版生成對應檔案

環境準備

nodejs

vscode

安裝 Yeoman ^[1] 和 VS Code Extension Generator ^[2]

```
npm install -g yo generator-code
```

初始化專案工程

```
yo code
```

具體實現

// package.json
{
 "name": "lynxlowcode",
 "displayName": "LynxLowcode",
 "description": "",
 "version": "0.0.2",
 "engines": {
  "vscode": "^1.62.0"
 },
 "categories": [
  "Other"
 ],
 "activationEvents": [
  "onCommand:lynxlowcode.newLynxComponent"
 ],
 "main": "./out/extension.js",
 "contributes": {
  "commands": [
   {
    "command": "lynxlowcode.newLynxComponent",
    "title": "新建Lynx元件"
   }
  ],
  "menus": {
   "explorer/context": [
    {
     "command": "lynxlowcode.newLynxComponent",
     "group": "z_commands",
     "when": "explorerResourceIsFolder"
    }
   ]
  }
 },
 "scripts": {
  "vscode:prepublish": "npm run compile",
  "compile": "tsc -p ./",
  "watch": "tsc -watch -p ./",
  "pretest": "npm run compile && npm run lint",
  "lint": "eslint src --ext ts",
  "test": "node ./out/test/runTest.js"
 },
 "devDependencies": {
  "@types/fs-extra": "^9.0.13",
  "@types/glob": "^7.1.4",
  "@types/mocha": "^9.0.0",
  "@types/node": "14.x",
  "@types/vscode": "^1.62.0",
  "@typescript-eslint/eslint-plugin": "^4.31.1",
  "@typescript-eslint/parser": "^4.31.1",
  "@vscode/test-electron": "^1.6.2",
  "eslint": "^7.32.0",
  "fs-extra": "^10.0.1",
  "glob": "^7.1.7",
  "mocha": "^9.1.1",
  "typescript": "^4.4.3"
 },
 "dependencies": {
  "import": "^0.0.6",
  "path": "^0.12.7"
 }
}

main：指定了外掛的入口函式。

activationEvents：指定觸發事件，當指定事件發生時才觸發外掛執行。需額外關注 * 這個特殊的外掛型別，因為他在初始化完成後就會觸發外掛執行，並不需要任何自定義觸發事件。

contributes：描述外掛的拓展點，用於定義外掛要擴充套件 vscode 哪部分功能，如commands命令面板、menus資源管理面板等。

宣告指令

初始化外掛專案成功後會看到上圖的目錄結構，其中我們需要重點關注src目錄和package.json檔案，其中src目錄下的extension.ts檔案為入口檔案，包含 activate 和 deactivate 分別作為外掛啟動和外掛解除安裝時的生命週期函式，可以將邏輯直接寫在兩個函式內也可抽象後在其中呼叫。

同時我們希望外掛在適當的時機啟動 activate 或關閉 deactivate ，vscode也給我們提供了多種 onXXX 的事件作為多種執行時機的入口方法。那麼我們該如何使用這些事件呢？

事件列表

// 當開啟特定語言時，外掛被啟用
onLanguage
// 當呼叫命令時，外掛被啟用
onCommand
// 當除錯時，外掛被啟用
onDebug
// 開啟資料夾且該資料夾包含設定的檔名模式時，外掛被啟用
workspaceContains
// 每當讀取特定資料夾 or 檔案時，外掛被啟用
onFileSystem
// 在側邊欄展開指定id的檢視時，外掛被啟用
onView
// 在基於vscode或 vscode-insiders協議的url開啟時（類似schema），外掛被啟用
onUri
// 在開啟自定義設定viewType的 webview 時，外掛被啟用
onWebviewPanel
// 在開啟自定義設定viewType的自定義編輯器，外掛被啟用
onCustomEditor
// 每當擴充套件請求具有authentication.getSession()匹配的providerId時，外掛被啟用
onAuthenticationRequest
// 在vscode啟動一段時間後，外掛被啟用，類似 * 但不會影響vscode啟動速度
onStartupFinished
// 在所有外掛都被啟用後，外掛被啟用，會影響vscode啟動速度，不推薦使用
*

如何使用這些事件呢？我們以onCommand為例。首先需要在package.json檔案中註冊 activationEvents 和 commands 。

{
    "activationEvents": [
      "onCommand:lynxlowcode.newLynxComponent" // 註冊命令事件
     ],
    "contributes": {
      // 標識命令增加了哪些功能
      "commands": [
       {
        "command": "lynxlowcode.newLynxComponent",
        "title": "新建Lynx元件" // 可根據title使用command + shift + p進行搜尋
       }
      ]
     }
 // ...
}

然後在extension.ts檔案的 activate 方法中編寫自定義邏輯。

// extension.ts
import * as vscode from 'vscode';

// this method is called when your extension is activated
export function activate(context: vscode.ExtensionContext) {
  // 為命令新增事件
  let init = vscode.commands.registerCommand('lynxlowcode.newLynxComponent', () => {
    newLynxComponent(); // 此處是我們的自定義邏輯
  });
  // 事件回撥棧
  context.subscriptions.push(init);
}

// this method is called when your extension is deactivated
export function deactivate() {}

// package.json
{
 // ...
 "menus": {
   "explorer/context": [
    {
     "command": "lynxlowcode.newLynxComponent",
     "group": "z_commands", // 位於命令容器面板
     "when": "explorerResourceIsFolder" // 資源管理器為目錄
    }
   ]
  }
}

喚起元件名稱輸入面板

// extension.ts
import * as vscode from 'vscode';
import { openInputBox } from './openInputBox';

// this method is called when your extension is activated
export function activate(context: vscode.ExtensionContext) {
  let newLynxComponent = vscode.commands.registerCommand('lynxlowcode.newLynxComponent', (file: vscode.Uri) => {
    /** 喚起輸入框 */
    openInputBox(file);
  });
  context.subscriptions.push(newLynxComponent);
}

// this method is called when your extension is deactivated
export function deactivate() {}

// openInputBox.ts
import { window, InputBoxOptions, InputBox, Uri } from 'vscode';
import { pathExists } from 'fs-extra';
import { join } from 'path';
import { createTemplate } from './createTemplate';

/**
 * 喚起輸入元件名稱面板
 */
export const openInputBox = (file: Uri): void => {
  /** 新建輸入框物件 */
  const inputBox = window.createInputBox();

  /** 配置placeholder */
  inputBox.placeholder = '請輸入你的元件名稱，按Enter確認';

  /** 獲取輸入框的值 */
  const inputValue = inputBox.value;

  /** input值更新回撥 */
  inputBox.onDidChangeValue(async (value: string) => {
    /** 判斷輸入的名稱是否為空 */
    if (value.length < 1) {
      return '元件名稱不能為空！！！';
    }

    /** 獲取最終元件完整路徑 */
    const location = join(file.fsPath, value);

    /** 判斷該完整路徑是否已經存在 */
    if (await pathExists(location)) {
      return `該 ${location}路徑已經存在，請換一個名稱或路徑！！！`;
    }
  }),

  /** input框隱藏回撥 */
  inputBox.onDidHide(() => {
    /** 重置輸入框值 */
    inputBox.value = '';

    /** 重置為可用 */
    inputBox.enabled = true;

    /** 重置為空閒 */
    inputBox.busy = false;
  });

  /** 確認回撥 */
  inputBox.onDidAccept(async () => {
    /** 禁用輸入框，防止使用者再次輸入 */
    inputBox.enabled = false;

    /** 將輸入框置為繁忙，等待最終建立結果 */
    inputBox.busy = true;

    const result = createTemplate();

    if(result) {
      inputBox.hide();
      window.showInformationMessage('建立成功成功，請檢視！！！');
    } else {
      window.showInformationMessage('建立失敗，請重試！！！');
    }
    inputBox.enabled = true;
    inputBox.busy = false;
  });

  /** 展示input輸入框 */
  inputBox.show();
};

根據輸入面板建立模版檔案

import fs from 'fs';
/**
 * 建立模版檔案
 */
export const createTemplate = (location: string, name: string) => {
  /** 同步建立資料夾 */
  const mkdirResult = fs.mkdirSync(location, {
    recursive: true
  });

  /** 建立資料夾失敗 */
  if (!mkdirResult) {
    return false;
  }
  try {
    /** 新建tsx檔案並寫入內容 */
    fs.writeFileSync(`${location}/index.tsx`, `
import { Component } from '@byted-lynx/react-runtime';
import './index.scss';

interface ${name}PropsType {}

interface ${name}StateType {}

export default class ${name} extends Component<${name}PropsType, ${name}StateType> {
  constructor(props: ${name}PropsType) {
    super(props);
    this.state = {};
  }
  render(): JSX.IntrinsicElements {
    return (
      <view>
        <text>${name}元件</text>
      </view>
    );
  }
}
  `);
  /** 新建scss檔案 */
  fs.writeFileSync(`${location}/index.scss`, '');
  return true;
  } catch (e) {
    console.log(e);
    return false;
  }
};

可優化點

增加模版型別
通過下載模版替代寫入字串文字

:heart: 謝謝支援

以上便是本次分享的全部內容，希望對你有所幫助^_^

喜歡的話別忘了 分享、點贊、收藏 三連哦~。

歡迎關注公眾號 ELab團隊 收穫大廠一手好文章~

我們來自位元組跳動，是旗下大力教育前端部門，負責位元組跳動教育全線產品前端開發工作。

我們圍繞產品品質提升、開發效率、創意與前沿技術等方向沉澱與傳播專業知識及案例，為業界貢獻經驗價值。包括但不限於效能監控、元件庫、多端技術、Serverless、視覺化搭建、音視訊、人工智慧、產品設計與營銷等內容。

歡迎感興趣的同學在評論區或使用內推碼內推到作者部門拍磚哦

位元組跳動校/社招投遞連結:

https://job.toutiao.com/s/FCbeMRg

內推碼：GDUVRJJ

參考資料

[1]

Yeoman: https://yeoman.io/

[2]

VS Code Extension Generator: https://www.npmjs.com/package/generator-code

「其他文章」