VSCode插件开发入门：创建你的第一个扩展-VSCode-PHP中文网

VSCode插件开发入门：创建你的第一个扩展

P粉986688829

发布： 2025-12-07 05:01:24

原创

542人浏览过

在 VSCode 中开发插件无需修改源码，只需用 TypeScript 编写扩展，通过 yo code 生成项目，编辑 package.json 和 extension.ts 实现命令注册与事件监听，F5 调试，vsce 打包发布。

想在 vscode 里加个功能，又不想改源码？写个插件就行。它不难上手，核心是用 typescript（或 javascript）写一个能被 vscode 加载的小程序，注册命令、监听事件、操作编辑器——你的第一个扩展，半小时就能跑起来。

准备环境：Node.js + Yeoman + VSCode

确保已安装 Node.js（推荐 v18+），然后全局安装两个脚手架工具：

yo：通用项目生成器，执行 npm install -g yo
generator-code：VSCode 官方插件模板，执行 npm install -g generator-code

装完后，在空文件夹里运行 yo code，按提示选择“New Extension (TypeScript)”，填名称、ID、描述等。几秒后，一个带基础结构的项目就生成好了。

理解核心文件：从 package.json 和 extension.ts 入手

package.json 是插件的“身份证”和“说明书”：声明名字、版本、激活事件（activationEvents）、贡献点（contributes）比如命令、菜单、快捷键等。

extension.ts 是主逻辑入口，导出两个函数：

activate：插件被加载时调用，注册命令、订阅事件、初始化状态
deactivate：VSCode 关闭前调用，做清理工作（可选）

比如默认模板里注册了一个叫 extension.helloWorld 的命令，点击命令面板（Ctrl+Shift+P）输入 “Hello World” 就能触发弹窗。

调试你的扩展：一键启动 Extension Development Host

打开生成的项目，在 VSCode 里按 F5 或点击侧边栏“运行和调试”，选择 “Launch Extension” 配置。VSCode 会启动一个独立的“开发主机”窗口，里面已加载你当前的插件。

DM建站系统汽车保养维修HTML5网站模板1.5

DM建站系统汽车保养维修HTML5网站模板,DM企业建站系统。是由php+mysql开发的一套专门用于中小企业网站建设的开源cms。DM系统的理念就是组装，把模板和区块组装起来，产生不同的网站效果。可以用来快速建设一个响应式的企业网站( PC，手机，微信都可以访问)。后台操作简单，维护方便。DM企业建站系统安装步骤：第一步，先用phpmyadmin导入sql文件。第二步：把文件放到你的本地服务器