怎么做VSCode扩展_VSCode自定义插件开发与发布完整流程教程-VSCode-PHP中文网

怎么做VSCode扩展_VSCode自定义插件开发与发布完整流程教程

看不見的法師

发布： 2025-08-30 14:34:01

原创

487人浏览过

答案：本文介绍VSCode扩展开发全流程，从环境搭建、项目生成、命令注册、调试方法到发布步骤，并讲解激活事件选择与Webview自定义UI实现。

怎么做vscode扩展_vscode自定义插件开发与发布完整流程教程

VSCode扩展开发其实并不难，关键在于理解其架构和掌握一些基本API。本文将带你一步步完成一个VSCode自定义插件的开发和发布，让你快速上手。

解决方案

首先，你需要安装Node.js和npm（或yarn）。这是开发VSCode扩展的基础环境。确保你的Node.js版本在14以上，npm版本在6以上。

接下来，全局安装Yeoman和VS Code Extension Generator：

npm install -g yo generator-code

登录后复制

现在，你可以使用Yeoman生成一个基本的扩展项目：

yo code

登录后复制

按照提示选择 "New Extension (TypeScript)"，然后输入你的扩展名、描述等信息。

项目生成后，你会看到一个包含

src

登录后复制

目录、

package.json

登录后复制

文件等标准结构的VSCode扩展项目。

src/extension.ts

登录后复制

是你的扩展的主要入口点。

打开

src/extension.ts

登录后复制

，你会看到一个

activate

登录后复制

函数。这个函数在你的扩展被激活时调用。在这里，你可以注册你的命令、事件监听器等。

例如，我们可以注册一个简单的命令，当用户执行该命令时，显示一个消息框：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {

    let disposable = vscode.commands.registerCommand('my-extension.helloWorld', () => {
        vscode.window.showInformationMessage('Hello World from My Extension!');
    });

    context.subscriptions.push(disposable);
}

export function deactivate() {}

登录后复制

在

package.json

登录后复制

文件中，你需要定义你的命令：

{
  "name": "my-extension",
  "displayName": "My Extension",
  "description": "A simple VS Code extension",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.63.0"
  },
  "categories": [
    "Other"
  ],
  "activationEvents": [
    "onCommand:my-extension.helloWorld"
  ],
  "main": "./out/extension.js",
  "contributes": {
    "commands": [
      {
        "command": "my-extension.helloWorld",
        "title": "Hello World"
      }
    ]
  },
  "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/vscode": "^1.63.0",
    "@types/glob": "^7.1.4",
    "@types/mocha": "^9.0.0",
    "@types/node": "14.x",
    "@typescript-eslint/eslint-plugin": "^5.1.0",
    "@typescript-eslint/parser": "^5.1.0",
    "eslint": "^8.1.0",
    "glob": "^7.1.4",
    "mocha": "^9.0.2",
    "typescript": "^4.5.4",
    "@vscode/test-electron": "^1.6.2"
  }
}

登录后复制

注意

activationEvents

登录后复制

和

contributes.commands

登录后复制

部分。

activationEvents

登录后复制

定义了激活扩展的事件，

contributes.commands

登录后复制

定义了你的命令。

现在，你可以使用VS Code的调试功能来测试你的扩展。按下

F5

登录后复制

，VS Code会打开一个新的窗口，其中加载了你的扩展。在新窗口中，按下

Ctrl+Shift+P

登录后复制

（或

Cmd+Shift+P

登录后复制

），输入你的命令名（例如，"Hello World"），然后执行它。你应该看到一个消息框。

发布你的扩展需要创建一个Visual Studio Code Marketplace账号。

在VS Code中安装

vsce

登录后复制

（Visual Studio Code Extensions）工具：

npm install -g vsce

登录后复制

登录你的Visual Studio Code Marketplace账号：

vsce login <你的publisher名称>

登录后复制

打包你的扩展：

vsce package

登录后复制

发布你的扩展：

vsce publish

登录后复制

发布后，你的扩展就可以在Visual Studio Code Marketplace上找到了。

讯飞智作-讯飞配音

讯飞智作是一款集AI配音、虚拟人视频生成、PPT生成视频、虚拟人定制等多功能的AI音视频生产平台。已广泛应用于媒体、教育、短视频等领域。

查看详情

如何调试VS Code扩展？

调试VS Code扩展的核心在于使用VS Code提供的调试工具。首先，确保你的扩展项目已经配置了

launch.json

登录后复制

文件。这个文件定义了调试配置。

一个典型的

launch.json

登录后复制

文件可能如下所示：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "extensionHost",
      "request": "launch",
      "name": "Launch Extension",
      "runtimeExecutable": "${execPath}",
      "args": [
        "--extensionDevelopmentPath=${workspaceFolder}"
      ],
      "stopOnEntry": false
    }
  ]
}

登录后复制

在这个文件中，

type

登录后复制

指定为

extensionHost

登录后复制

，表示这是一个扩展调试配置。

runtimeExecutable

登录后复制

指定了VS Code的可执行文件路径，

args

登录后复制

指定了启动参数，其中

--extensionDevelopmentPath

登录后复制

指定了你的扩展项目的路径。

设置断点后，按下

F5

登录后复制

启动调试。VS Code会打开一个新的窗口，其中加载了你的扩展。当代码执行到断点时，程序会暂停，你可以查看变量的值、调用堆栈等信息。

此外，你还可以在

output

登录后复制

面板中查看扩展的输出信息，例如

console.log

登录后复制

的输出。

VS Code扩展的激活事件有哪些？如何选择合适的激活事件？

VS Code扩展的激活事件定义了何时激活你的扩展。选择合适的激活事件可以提高VS Code的性能。

常见的激活事件包括：

```
onCommand:<command>
```
登录后复制
：当用户执行指定的命令时激活。
```
onFileSystem:<scheme>
```
登录后复制
：当访问指定的文件系统时激活，例如
```
onFileSystem:file
```
登录后复制
表示访问本地文件系统时激活。
```
onLanguage:<language>
```
登录后复制
：当打开指定语言的文件时激活，例如
```
onLanguage:javascript
```
登录后复制
表示打开JavaScript文件时激活。
```
onView:<viewId>
```
登录后复制
：当打开指定的视图时激活。
```
onWebviewPanel:<viewType>
```
登录后复制
：当打开指定的Webview面板时激活。
```
*
```
登录后复制
：在VS Code启动时立即激活。不推荐使用，因为它会降低VS Code的启动速度。

选择合适的激活事件需要根据你的扩展的功能来决定。如果你的扩展只在用户执行某个命令时才需要激活，那么使用

onCommand

登录后复制

是最合适的。如果你的扩展需要处理特定语言的文件，那么使用

onLanguage

登录后复制

是最合适的。

例如，如果你的扩展提供JavaScript代码片段，那么你可以使用

onLanguage:javascript

登录后复制

作为激活事件。

如何使用Webview API创建自定义UI界面？

Webview API允许你在VS Code中创建自定义的UI界面。Webview实际上是一个嵌入在VS Code中的浏览器窗口，你可以使用HTML、CSS和JavaScript来构建你的UI界面。

首先，你需要创建一个

WebviewPanel

登录后复制

：

const panel = vscode.window.createWebviewPanel(
  'myWebview', // Webview的ID
  'My Webview', // Webview的标题
  vscode.ViewColumn.One, // Webview显示的位置
  {
    enableScripts: true, // 允许Webview执行JavaScript
    retainContextWhenHidden: true // 当Webview不可见时，保持其状态
  }
);

登录后复制

然后，你需要设置Webview的内容：

panel.webview.html = `
  <!DOCTYPE html>
  <html>
  <head>
    <title>My Webview</title>
  </head>
  <body>
    <h1>Hello from Webview!</h1>
    <button id="myButton">Click me</button>
    <script>
      const button = document.getElementById('myButton');
      button.addEventListener('click', () => {
        alert('Button clicked!');
      });
    </script>
  </body>
  </html>
`;

登录后复制

你可以使用

panel.webview.postMessage

登录后复制

方法从扩展向Webview发送消息，使用

panel.webview.onDidReceiveMessage

登录后复制

方法在扩展中接收来自Webview的消息。这允许你在扩展和Webview之间进行双向通信。

例如，从扩展向Webview发送消息：

panel.webview.postMessage({ command: 'update', text: 'Hello from extension!' });

登录后复制

在Webview中接收消息：

window.addEventListener('message', event => {
  const message = event.data; // The json data that the extension sent
  switch (message.command) {
    case 'update':
      alert(message.text);
      break;
  }
});

登录后复制

Webview API提供了强大的功能，允许你创建各种自定义UI界面，例如配置面板、代码预览、数据可视化等。

以上就是怎么做VSCode扩展_VSCode自定义插件开发与发布完整流程教程的详细内容，更多请关注php中文网其它相关文章！