VSCode扩展开发入门：构建你的第一个功能扩展-VSCode-PHP中文网

VSCode扩展开发入门：构建你的第一个功能扩展

betcha

发布： 2025-11-18 19:10:02

原创

910人浏览过

首先掌握VSCode扩展的基本结构和流程，使用Node.js、npm、Yeoman等工具搭建环境；通过yo code生成TypeScript项目模板，了解package.json、extension.ts等关键文件作用；在extension.ts中注册命令实现插入当前时间功能，并在package.json中声明命令和激活事件；按F5调试验证功能后，使用vsce工具打包或发布扩展；后续可逐步深入语言服务、树视图、Webview等高级功能。

vscode扩展开发入门：构建你的第一个功能扩展

想为VSCode开发一个扩展？其实并不难。只要掌握基本结构和流程，你就能快速构建出实用的功能。我们从零开始，一步步创建你的第一个VSCode功能扩展。

准备开发环境

开发VSCode扩展需要几个基础工具：

Node.js：确保已安装Node.js（建议16.x以上版本）
npm：Node包管理器，通常随Node.js一起安装
VSCode：编辑器本身，也是你的调试环境
Yeoman 和 VS Code Extension Generator：用于快速生成项目模板

安装Yeoman和扩展生成器：

npm install -g yo generator-code

创建你的第一个扩展

运行以下命令启动项目生成：

yo code

按提示选择“New Extension (TypeScript)”类型，填写扩展名、ID、描述等信息。完成后会自动生成一个标准项目结构。

关键文件说明：

乐活途购物分享社区

beta v1.1版本为第一个版本，简单的整合了基础功能，各位站长拿到程序后，不要纠结后台的功能简单，后续将不断更新扩展。在beta v1.1版本使用过程中遇到什么问题，请登录 www.loftto.com 进行反馈！安装说明######重要提醒：程序不支持二级目录安装，请使用一级目录或二级目录绑定！#第一步，确定你的服务器支持PHP+mysql。#第二步，确定你的服务器开启了gd库。#第三步，

查看详情

package.json：定义扩展元信息、激活事件、贡献点等
src/extension.ts：主入口文件，包含activate和deactivate函数
out/**：TypeScript编译后的输出目录

实现一个简单功能：插入当前时间

修改extension.ts中的activate函数，注册一个命令：

typescript"> import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) { let disposable = vscode.commands.registerCommand('hello-world.insertTime', () => { const editor = vscode.window.activeTextEditor; if (editor) { const now = new Date().toLocaleTimeString(); editor.edit(editBuilder => { editBuilder.insert(editor.selection.active, 当前时间: ${now}); }); } });

context.subscriptions.push(disposable); }

然后在package.json的contributes.commands中添加该命令声明，并在activationEvents中加入触发条件，例如：onCommand:hello-world.insertTime。