vscode插件原理淺析與實戰
大 廠 技 術 堅 持 周 更 精 選 好 文
背景
作為一位前端同學肯定對vscode不陌生,相信每位同學電腦上也都有五花八門的個性化配置,那麼我們是藉助什麼東西做到的呢?那就是它豐富的 插件
生態。本次將講述插件基本原理並從一個簡單的case瞭解如何製作一個的 vscode插件
是什麼實現了vscode
Electron
vscode底層通過electron開發實現,electron的核心構成分別是:chromium、nodejs、native-api
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b8d80df3c41c92864a038a9530dfcf9eaab9ae2718cc5c153536203969e2ff350.jpg)
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)也是多進程的,所以每個頁面都單獨運行在各自的渲染進程中。
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b8a79e0616dc8896e5f64b43ad63d8a1e65f2265e69ce0859e746c25f3051aad9.jpg)
例:
// 主進程
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插件加載基本原理
http://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);
}
}
加載流程
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b0e931af895f779e8dc7e97771bb53447fb8d223036c673b50a322d4feec718fd.jpg)
簡單實戰
背景:實現選擇指定目錄右鍵自動生成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進行搜索
}
]
}
// ...
}
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4bcb7314efff502792d65bbecf7be493aaad96bae6c0444e83faa0e15c5efb78f4.jpg)
然後在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() {}
-
添加目錄右鍵點擊事件
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229bd06275b7290e541b6255bdc9a5a5e6934c592ca7efbc857e058d6c915faeb7eb.jpg)
// 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、可視化搭建、音視頻、人工智能、產品設計與營銷等內容。
歡迎感興趣的同學在評論區或使用內推碼內推到作者部門拍磚哦
字節跳動校/社招投遞鏈接:
http://job.toutiao.com/s/FCbeMRg
內推碼:GDUVRJJ
參考資料
Yeoman: http://yeoman.io/
VS Code Extension Generator: http://www.npmjs.com/package/generator-code
- 使用 WebAssembly 打造定製 JS Runtime
- 前端也要懂算法,不會算法也能微調一個 NLP 預訓練模型
- 聯機遊戲原理入門即入土 -- 入門篇
- Plasmo Framework:次世代的瀏覽器插件開發框架
- 深入理解 Mocha 測試框架:從零實現一個 Mocha
- Single Source of Truth:XCode SwiftUI 的界面編輯的設計理念
- 深入理解 D3.js 可視化庫之力導向圖原理與實現
- 淺析神經網絡 Neural Networks
- Cutter - Web視頻剪輯工具原理淺析
- 你可能需要一個四捨五入的工具函數
- 淺析eslint原理
- 最小編譯器the-super-tiny-compiler
- Git存儲原理及部分實現
- 淺談短鏈的設計
- Web組件構建庫-Lit
- 使用Svelte開發Chrome Extension
- Web3.0開發入門
- vscode插件原理淺析與實戰
- 深入淺出 Web Audio API
- 探祕HTTPS