VScode 技术栈和架构

使用的技术栈：

1. Electron。
2. Typescript。
3. Node.js。
4. Monaco Editor。 代码编辑器

主进程 (Main Process): 负责应用的生命周期管理、菜单、系统托盘等操作系统相关的功能。Electron 的主进程还负责启动渲染进程，并提供与 Node.js 之间的桥梁。

渲染进程 (Renderer Process): 运行实际的编辑器界面（由 Chromium 渲染），包括文本编辑器、面板、文件浏览器等。所有的界面展示和用户交互逻辑都在渲染进程中处理。

插件进程 (Extension Host Process): 这是运行插件的沙盒环境，插件在这个进程中运行，与主进程和渲染进程保持相对隔离，以确保插件之间的独立性和安全性。

技术选择原因

1. 跨平台。Qt、Tauri 这些跨平台技术用的是C++、Rust等。而用 Electron 使用 HTML + CSS + JS 方式能降低贡献者的门槛。
2. 可维护性。ts不用说，也是微软自己推出的技术链。
3. 生态、可拓展性。Node 生态能能利用 Node 社区大量的已有包。

插件系统

基于 Node.js 的插件进程。VSCode 的插件系统基于 Node.js 实现，插件是在一个独立的 插件进程（Extension Host Process）中运行的。这个进程与主进程和渲染进程隔离，确保插件之间的相对独立性和安全性。（数据读取和独立性）。

插件通过 VSCode 提供的 API 与编辑器进行交互。允许对编辑器深度定制。

沙盒机制。防止了插件对编辑器的核心行为产生破坏性影响。

---

插件架构：
每个 VSCode 插件都是一个 npm 包，包含以下几个重要文件
package.json: 是插件的配置文件，定义了插件的基本信息（如名称、版本、描述等）、依赖项、激活事件（activation events）、贡献点（contributions）以及插件与 VSCode 的交互方式。
激活事件：用于定义插件何时被激活，如在打开特定类型的文件时，用户执行某个命令时等。
贡献点 (Contributions)：用于定义插件可以扩展的功能，比如命令、配置、语言支持、调试配置等。

---

插件的贡献点 (Contributions):
• 命令 (Commands): 插件可以注册命令，这些命令可以绑定到编辑器中的快捷键或菜单上，用户可以通过命令面板调用这些命令。
• 语言支持 (Languages): 插件可以通过 LSP 提供语法高亮、自动补全、错误提示等功能。
• 调试器 (Debuggers): 插件可以添加自定义的调试器，扩展 VSCode 对特定编程语言或运行环境的调试能力。
• 视图 (Views): 插件可以自定义视图，如活动栏中的侧边栏视图、状态栏中的信息、面板中的自定义内容等。

---

插件的生命周期：
安装、加载和激活、运行、卸载

界面概念

UI容器Containers和元素Items

主要模块可划分为：

Activity Bar

Primary Sidebar

Secondary Sidebar

Editor

Panel

Status Bar

各模块里可能包含一个或多个下面的元素：

View

View Toolbar

Sidebar Toolbar

Editor Toolbar

Panel Toolbar

Status Bar Item

通用元素
Quick Pick


消息通知 Notifications

三种

Webviews

菜单 Context Menus

Settings

插件的能力范围
通用能力（Common Capabilities）
这是插件的核心功能，包括注册命令、绑定快捷键、管理上下文目录，存储工作台或全局数据，显示提示消息，管理设备文件系统，在耗时较长操作时调用进度条等

外观主题管理（Theming）
插件可以控制 VS Code 的外观，包括编辑器里代码的颜色和 VS Code 的 UI 颜色，也可以自定义文件的图标。

Declarative Language Features
插件可以声明一种新的编程语言的语法

Programmatic Language Features

Workbench Extensions

Debugging

UX Guidelines

Restrictions

三大概念
**激活事件（Activation Events）。**即定义激活插件的事件是什么。在第二章Hello World插件案例中，我们定义了一个事件 onCommand:helloworld.helloWorld，即当用户运行指定命令时、插件将被激活，这个命令的id是 helloworld.helloWorld。

插件配置清单（Contribution Points）

VS Code 通过在 package.json 的 contributes 字段 中声明插件的配置清单。比如在上面案例里，有一个配置是注册了一个名为 Hello World 的命令，用户可以在命令面板（Command Palette）中找到并执行这个命令；同时，绑定了一个命令Id helloworld.helloWorld。

// package.json
{
  ...

  "contributes": {
    "commands": [
      {
        "command": "helloworld.helloWorld",
        "title": "Hello World"
      }
    ]
  },

    ...
}

VS Code API

在上面的案例里，我们调用了其中一个api commands.registerCommand，它把一个命令id（helloworld.helloWorld）与一个 function 绑定起来。这相当于绑定了一个事件监听器：一旦有事件被触发（helloworld.helloWorld 命令），立即执行这个function。

import * as vscode from "vscode";

export function activate(context: vscode.ExtensionContext) {
  const disposable = vscode.commands.registerCommand(
    "helloworld.helloWorld", // 命令id
    () => {
      // 绑定的function
      // 定义要执行的内容
    }
  );
  context.subscriptions.push(disposable);
}

export function deactivate() {}

插件代码结构

.
├── .vscode
│   ├── launch.json     // Config for launching and debugging the extension
│   └── tasks.json      // Config for build task that compiles TypeScript
├── .gitignore          // Ignore build output and node_modules
├── README.md           // Readable description of your extension's functionality
├── src
│   └── extension.ts    // Extension source code
├── package.json        // Extension manifest
├── tsconfig.json       // TypeScript configuration

你需要关注的是两个关键的文件：

package.json：插件配置清单

extension.ts：插件的入口文件

{
  "name": "helloworld-sample",
  "publisher": "vscode-samples",

  "version": "0.0.1",

  "displayName": "Helloworld Sample",
  "description": "HelloWorld example for VS Code",
  "categories": ["Other"],

  "engines": {
    "vscode": "^1.51.0"
  },
  "main": "./out/extension.js",

  "activationEvents": [],
  "contributes": {
    "commands": [
      {
        "command": "helloworld.helloWorld",
        "title": "Hello World"
      }
    ]
  },

    ...
}

name 和 publisher
分别声明了 VS Code 的插件名称和发布者，在插件市场里，. 是插件的唯一识别码；如果你要发布一个插件，务必准确填写这两个字段。

version
插件版本号。每次打包发布插件之前，要更新该字段。

displayName、description 和 categories
分别描述了插件的名称、描述信息和分类。其中，displayName 仅作为显示使用，不会用于识别插件；categories 描述的是该插件所属的分类，内容必须按规则填写。

activationEvents 和 contributes
分别描述了 Activation Events 和 Contribution Points，是插件的激活方式。上述案例里声明了一个命令，名为 Hello World，它将在命令面板（Command Palette）出现，其命令id为 helloworld.helloWorld

main
描述了插件的入口文件

engines.vscode
声明了 VS Code API 基于的 VS Code 最低版本。如果当前的 VS Code 版本低于它，将无法调试或使用该插件

插件入口文件

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  console.log('Congratulations, your extension "helloworld-sample" is now active!');

  let disposable = vscode.commands.registerCommand('helloworld.helloWorld', () => {
    vscode.window.showInformationMessage('Hello World!');
  });

  context.subscriptions.push(disposable);
}

export function deactivate() {}

需要特别注意的是，入口代码文件默认是 ./src/extension.ts；但在 package.json 中，通过 main 字段声明的则是 ./out/extension.js，其实它就是代码文件 ./src/extension.ts 编译之后的的结果。
入口文件暴露了两个方法：

activate()
当插件注册的激活事件（Activation Event）发生时，该方法将被执行，是插件的入口方法

deactivate()
当插件失效时，会调用此方法；你可以在这里做一些数据清理的操作（一般不需要）

下面给出了一个案例，在插件激活并运行后，会弹出一个消息框，内容是“Hello World!”

什么是Webview API

我们使用的 vscode.window.createWebviewPanel 就是其中一个 Webview API。该方法将返回一个 vscode.WebviewPanel 实例，然后通过 panel.webview.html 设定里面的html内容。

Extension与Webview的通信。

Extension端发送
webview.postMessage(…);

Webview端监听
window.addEventListener(‘message’, event => { … })

Webview端发送
acquireVsCodeApi().postMessage(…)
Extension端监听
webview.onDidReceiveMessage(message => {…}, thisArgs, disposables)

构建一个双向通信的模型，其模型相当于搭建一个C/S架构：

webview是客户端，用于发送请求到服务端

extension是服务端，用于接收和处理来自客户端的请求