如何编写你自己的VSCode扩展？-VSCode-PHP中文网

如何编写你自己的VSCode扩展？

紅蓮之龍

发布： 2025-11-04 15:25:02

原创

147人浏览过

答案：编写VSCode扩展需熟悉TypeScript和Node.js，使用Yoeman生成项目结构，在extension.ts中注册命令并调试发布。

如何编写你自己的vscode扩展？

编写 VSCode 扩展并不复杂，只要你熟悉 JavaScript 或 TypeScript，并了解基本的 Node.js 概念。VSCode 扩用 TypeScript 编写最为常见，官方也推荐这种方式。下面一步步说明如何创建一个简单的扩展。

准备开发环境

你需要先安装以下工具：

Node.js：确保已安装 Node.js（建议 16.x 以上版本）
npm：Node 包管理器，通常随 Node.js 一起安装
Visual Studio Code：你将在这里开发和调试扩展
Yeoman 和 VS Code Extension Generator：用于快速生成项目结构

安装 Yeoman 和扩展生成器：

npm install -g yo generator-code

创建你的第一个扩展

运行以下命令开始创建项目：

yo code

按照提示选择：

选择 New Extension (TypeScript)
输入扩展名、描述、作者等信息
项目会自动生成包含必要文件的目录结构

关键文件说明：

package.json：定义扩展元信息、激活事件、贡献点等
src/extension.ts：扩展主入口，包含 activate 和 deactivate 函数
src/test/：存放测试代码（可选）

实现一个简单功能

比如添加一个命令，点击时弹出提示框。

在 package.json 中找到 contributes.commands 和 activationEvents，确保包含：

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

然后在 extension.ts 中实现命令逻辑：

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) { const disposable = vscode.commands.registerCommand('myExtension.helloWorld', () => { vscode.window.showInformationMessage('Hello from your first extension!'); });

context.subscriptions.push(disposable); }

这个命令会在用户执行时显示一条消息。