首页分享 vscode插件原理浅析与实战

vscode插件原理浅析与实战

来源：花匠小妙招时间：2024-09-09 23:03

背景

作为一位前端同学肯定对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）也是多进程的，所以每个页面都单独运行在各自的渲染进程中。

image.png

例：

const { ipcMain } = require('electron');

ipcMain.on('main_msg', (event, arg) => {

console.log(arg);

event.reply('renderer-msg-reply', 'pong');

})

const { ipcRenderer } = require('electron');

ipcRenderer.on('renderer-msg-reply', (event, arg) => {

console.log(arg);

})

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初始化插件服务。

export class ExtensionService extends AbstractExtensionService implements IExtensionService {

constructor() {

this._lifecycleService.when(LifecyclePhase.Ready).then(() => {

runWhenIdle(() => {

this ._initialize() ;

}, 50 );

});

}

protected async _initialize(): Promise<void> {

perf.mark('code/willLoadExtensions');

this ._startExtensionHosts( true , []) ;

}

private _startExtensionHosts(isInitialStart: boolean, initialActivationEvents: string[]): void {

const extensionHosts = this._createExtensionHosts(isInitialStart);

extensionHosts.forEach((extensionHost) => {

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及其启动时间。

class ExtensionHostManager extends Disposable {

constructor() {

this._proxy = this._extensionHost.start() !.then();

}

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);

}

初始化插件激活逻辑

import { startExtensionHostProcess } from "vs/workbench/services/extensions/node/extensionHostProcessSetup";

startExtensionHostProcess().catch((err) => console.log(err));

export async function startExtensionHostProcess(): Promise<void> {

const extensionHostMain = new ExtensionHostMain(

renderer.protocol,

initData,

hostUtils,

uriTransformer

);

}

export class ExtensionHostMain {

constructor() {

this._extensionService = instaService.invokeFunction(accessor => accessor.get(IExtHostExtensionService));

this._extensionService.initialize();

}

插件激活

import { ExtHostExtensionService } from 'vs/workbench/api/node/extHostExtensionService';

registerSingleton(IExtHostExtensionService, ExtHostExtensionService);

继承AbstractExtHostExtensionService

export class ExtHostExtensionService extends AbstractExtHostExtensionService {

}

abstract class AbstractExtHostExtensionService extends Disposable {

constructor() {

this._activator = this._register(new ExtensionsActivator());

}

private _activateByEvent(activationEvent: string, startup: boolean): Promise<void> {

return this._activator.activateByEvent(activationEvent, startup);

}

加载流程

image.png 简单实战

背景：实现选择指定目录右键自动生成lynx页面基本目录结构的插件。

目标拆解：

选择自定义目录，添加右键点击菜单

输入lynx页面名称

按照模版生成对应文件

环境准备

nodejs

vscode

安装Yeoman[1]和VS Code Extension Generator[2]

npm install -g yo generator-code

初始化项目工程

yo code 具体实现

{

"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

onFileSystem

onView

onUri

onWebviewPanel

onCustomEditor

onAuthenticationRequest

onStartupFinished

如何使用这些事件呢？我们以onCommand为例。首先需要在package.json文件中注册activationEvents和commands。

{

"activationEvents": [

"onCommand:lynxlowcode.newLynxComponent"

"contributes": {

"commands": [

{

"command": "lynxlowcode.newLynxComponent",

"title": "新建Lynx组件"

}

]

}

然后在extension.ts文件的activate方法中编写自定义逻辑。

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {

let init = vscode.commands.registerCommand('lynxlowcode.newLynxComponent', () => {

newLynxComponent();

});

context.subscriptions.push(init);

}

export function deactivate() {}

添加目录右键点击事件

{

"menus": {

"explorer/context": [

{

"command": "lynxlowcode.newLynxComponent",

"group": "z_commands",

"when": "explorerResourceIsFolder"

}

]

}

唤起组件名称输入面板

import * as vscode from 'vscode';

import { openInputBox } from './openInputBox';

export function activate(context: vscode.ExtensionContext) {

let newLynxComponent = vscode.commands.registerCommand('lynxlowcode.newLynxComponent', (file: vscode.Uri) => {

openInputBox(file);

});

context.subscriptions.push(newLynxComponent);

}

export function deactivate() {}

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();

inputBox.placeholder = '请输入你的组件名称，按Enter确认';

const inputValue = inputBox.value;

inputBox.onDidChangeValue(async (value: string) => {

if (value.length < 1) {

return '组件名称不能为空！！！';

}

const location = join(file.fsPath, value);

if (await pathExists(location)) {

return `该 ${location}路径已经存在，请换一个名称或路径！！！`;

}

}),

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;

});

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 {

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>

</view>

);

}

`);

fs.writeFileSync(`${location}/index.scss`, '');

return true;

} catch (e) {

console.log(e);

return false;

}

};

可优化点

增加模版类型

通过下载模版替代写入字符串文本

参考资料

[1]

Yeoman: https://yeoman.io/

[2]

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

- END -

关于奇舞团

奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。