如何利用VSCode的扩展脚手架快速创建新扩展？-VSCode-PHP中文网

使用VSCode扩展脚手架可快速创建项目，通过安装Node.js、npm、Yeoman和generator-code，运行yo code命令选择扩展类型，自动生成标准结构项目，省去手动配置。脚手架解决项目结构不统一、初始化耗时等问题，集成TypeScript、测试框架等工具，提升开发效率。创建后需理解package.json中的activationEvents、contributes等配置，修改extension.ts实现核心逻辑，并通过F5调试验证功能。常见问题包括环境变量未配置导致yo命令失效、命令id不匹配或激活事件错误，可通过检查PATH路径、同步命令ID、添加日志输出等方式排查。掌握脚手架使用与基础调试技巧，能高效构建并迭代VSCode扩展功能。

如何利用vscode的扩展脚手架快速创建新扩展？

利用VSCode的扩展脚手架，核心在于使用Yeoman和其

generator-code

登录后复制

模块。它能快速搭建一个具备完整结构和基本功能的扩展项目，让你直接跳过繁琐的初始化配置，专注于扩展逻辑的开发。这就像是拿到了一份精心准备的模板，省心又高效。

解决方案

要快速创建VSCode扩展，你需要先确保系统环境已准备妥当。

安装Node.js和npm： 这是基础。如果你的机器上还没有，请先去Node.js官网下载安装。npm通常会随Node.js一同安装。
安装Yeoman和
```
generator-code
```
登录后复制
： Yeoman是一个项目脚手架工具，而
```
generator-code
```
登录后复制
是专门为VSCode扩展开发的Yeoman生成器。打开你的终端或命令行工具，运行以下命令：
```
npm install -g yo generator-code
```
登录后复制
```
-g
```
登录后复制
参数表示全局安装，这样你就可以在任何目录下使用它们了。
运行脚手架： 在你希望创建扩展项目的目录下，执行：
```
yo code
```
登录后复制
执行后，
```
yo code
```
登录后复制
会引导你完成一系列交互式选择，比如：
- What type of extension do you want to create? (选择你的扩展类型，比如
```
New Extension (TypeScript)
```
  登录后复制
  或
```
New Extension (JavaScript)
```
  登录后复制
  ，甚至可以创建Webview、语言服务器等。)
- What is the name of your extension? (扩展的显示名称，比如"My Awesome Extension")
- What is the identifier of your extension? (扩展的唯一ID，通常是小写字母和连字符的组合，比如"my-awesome-extension")
- What is the description of your extension? (一句话描述你的扩展)
- Initialize a Git repository? (是否初始化Git仓库)
- Install dependencies? (是否立即运行
```
npm install
```
  登录后复制
  安装项目依赖)
我通常会选择TypeScript，然后一路回车，让它自动初始化Git并安装依赖。整个过程很快，几秒钟就能生成一个项目骨架。
打开项目： 项目生成后，你会看到一个以你扩展ID命名的文件夹。用VSCode打开这个文件夹：
```
code my-awesome-extension
```
登录后复制
现在，你就可以在VSCode中看到一个完整的扩展项目了，包括
```
package.json
```
登录后复制
、
```
src/extension.ts
```
登录后复制
、
```
README.md
```
登录后复制
等文件，以及测试文件夹。

为什么用脚手架？它到底解决了什么痛点？

说实话，我个人觉得脚手架这东西，简直是效率神器。它解决了从零开始搭建项目时最让人头疼的几个问题：首先是结构标准化。VSCode扩展有它自己的一套约定俗成的项目结构，比如

src

登录后复制

放源码，

out

登录后复制

放编译后的JS，

package.json

登录后复制

定义扩展的元数据、贡献点和命令等等。手动去搭这一套，你得查文档，还得确保每个文件、每个配置都正确。脚手架直接给你一套符合最佳实践的模板，省去了大量摸索的时间。其次是快速启动。我最烦的就是想实现一个点子，结果大半时间都花在环境配置和项目初始化上。

yo code

登录后复制

几条命令下去，一个能跑起来的Hello World扩展就有了，我可以直接在

extension.ts

登录后复制

里写我的核心逻辑，这种感觉非常棒，就像是站在巨人的肩膀上，直接跳过了基础建设。再者，它还集成了常用工具。比如TypeScript配置、webpack配置（如果你选择），甚至还有基本的测试框架。这些东西如果让我自己去配，可能要花上好几天，而且还容易出错。脚手架都帮你预设好了，开箱即用。它让开发者能把精力真正放在“做什么”上，而不是“怎么搭”上。

扩展创建后，下一步能做什么？

项目创建完毕，这只是个开始。你现在有了一个能跑的VSCode扩展，但它目前只做了一件事：当你激活它时，会弹出一个“Hello World”的通知。

接下来，你需要深入理解这个项目，才能让它真正为你所用：

探索
```
package.json
```
登录后复制
：这是扩展的“身份证”和“说明书”。
- ```
name
```
  登录后复制
  ,
```
displayName
```
  登录后复制
  ,
```
description
```
  登录后复制
  ：这些是扩展在VSCode Marketplace上显示的信息。
- ```
main
```
  登录后复制
  : 指向你的扩展入口文件（通常是编译后的
```
out/extension.js
```
  登录后复制
  ）。
- ```
contributes
```
  登录后复制
  : 这是最重要的部分，定义了你的扩展能为VSCode贡献什么，比如：
  - ```
  commands
```
  登录后复制
  : 注册命令，用户可以通过命令面板（
```
  Ctrl+Shift+P
```
  登录后复制
  ）执行。
- ```
keybindings
```
    登录后复制
    : 绑定快捷键。
  - ```
  menus
```
  登录后复制
  : 添加菜单项（比如右键菜单、编辑器标题菜单）。
- ```
views
```
    登录后复制
    : 添加自定义视图（比如侧边栏面板）。
  - ```
  configuration
```
  登录后复制
  : 定义用户可配置的设置项。
- ```
activationEvents
```
  登录后复制
  : 定义你的扩展何时被激活。默认是
```
onCommand:extension.helloWorld
```
  登录后复制
  ，意思是当
```
helloWorld
```
  登录后复制
  命令被执行时激活。你也可以设置为
```
*
```
  登录后复制
  （VSCode启动时激活）、
```
onLanguage:typescript
```
  登录后复制
  （打开TypeScript文件时激活）等等。
修改
```
src/extension.ts
```
登录后复制
：这是你的扩展逻辑代码的核心。

OpenWBS企业建站系统v4.9.3
OpenWBS企业建站系统是以asp+access进行开发的互联网商务建站软件系统。 OpenWBS V4.0 企业建站系统，采用新一代全新架构，分层设计，拥有优秀的执行效率、扩展性和稳定性，一个快速帮您打造企业官网和企业独立商城的系统！企业官网+微官网+企业商城+手机商城，您可以马上拥有！

1363

查看详情
- ```
activate(context: vscode.ExtensionContext)
```
  登录后复制
  函数：当你的扩展被激活时，这个函数会被调用。你所有的命令注册、事件监听等都应该在这里进行。
- ```
deactivate()
```
  登录后复制
  函数：当你的扩展被禁用或VSCode关闭时，这个函数会被调用，用于清理资源。
- 脚手架会为你注册一个简单的命令：
```
let disposable = vscode.commands.registerCommand('my-awesome-extension.helloWorld', () => {
    vscode.window.showInformationMessage('Hello World from My Awesome Extension!');
});
context.subscriptions.push(disposable);
```
  登录后复制
  你可以修改这个回调函数，实现你自己的逻辑。比如，我想让它读取当前打开的文件内容，然后弹出一个信息框：
```
let disposable = vscode.commands.registerCommand('my-awesome-extension.readFileContent', () => {
    const editor = vscode.window.activeTextEditor;
    if (editor) {
        const document = editor.document;
        const text = document.getText();
        vscode.window.showInformationMessage(`Current file has ${text.length} characters.`);
    } else {
        vscode.window.showWarningMessage('No active editor found.');
    }
});
context.subscriptions.push(disposable);
```
  登录后复制
  别忘了在
```
package.json
```
  登录后复制
  的
```
contributes.commands
```
  登录后复制
  里添加新的命令定义。
运行和调试： 在VSCode中，按下
```
F5
```
登录后复制
键，会弹出一个新的“Extension Development Host”窗口。在这个新窗口里，你可以像普通用户一样使用你的扩展，并进行调试。
```
console.log
```
登录后复制
输出会显示在VSCode的调试控制台中。这是一个非常高效的开发循环。

通过这些步骤，你就能从一个脚手架生成的模板，逐步构建出功能强大且实用的VSCode扩展了。

遇到问题怎么办？常见坑点与调试技巧

即便有脚手架，开发过程中也难免遇到些小麻烦。我自己的经验告诉我，这些问题通常都围绕着几个点：

环境问题：
```
yo
```
登录后复制
命令找不到或
npm install
登录后复制
失败
- 现象： 运行
```
yo code
```
  登录后复制
  提示
```
command not found: yo
```
  登录后复制
  ，或者
```
npm install
```
  登录后复制
  卡住、报错。
- 解决：
  - ```
  yo
```
  登录后复制
  找不到：通常是Node.js或npm的路径问题，或者
```
  npm install -g yo generator-code
```
  登录后复制
  没有成功。检查Node.js是否正确安装，
```
  npm config get prefix
```
  登录后复制
  查看全局包安装路径，并确保该路径在系统环境变量
```
  PATH
```
  登录后复制
  中。
- ```
npm install
```
    登录后复制
    失败：网络问题是常客，尝试切换npm镜像源（比如
```
npm config set registry https://registry.npmmirror.com
```
    登录后复制
    ）。有时是权限问题，可以尝试用管理员权限运行终端。
扩展未激活或命令不生效
- 现象： 扩展安装了，但在VSCode中调用命令面板却找不到你的命令，或者命令执行后没有任何反应。
- 解决：
  - 检查
    package.json
    登录后复制
    ：这是最重要的。
    - activationEvents
      登录后复制
      ：确保你的命令的
      onCommand:yourExtension.yourCommand
      登录后复制
      被正确列出，或者如果你希望扩展在特定条件下激活，比如
      onLanguage:markdown
      登录后复制
      ，也要确保它在列表中。如果设置成
      *
      登录后复制
      ，扩展会在VSCode启动时激活。
    - contributes.commands
      登录后复制
      ：确认你的命令
      id
      登录后复制
      和
      title
      登录后复制
      是否正确定义。命令面板是通过这里的
      id
      登录后复制
      来查找的。
  - 检查
    extension.ts
    登录后复制
    ：确保你的
```
vscode.commands.registerCommand
```
    登录后复制
    中的命令
```
id
```
    登录后复制
    与
```
package.json
```
    登录后复制
    中定义的
```
id
```
    登录后复制
    完全一致。一个字母大小写错误都会导致问题。
  - 调试： 在
```
activate
```
    登录后复制
    函数开头和命令回调函数中都加上
```
console.log('Extension activated!')
```
    登录后复制
    和
```
console.log('Command executed!')
```
    登录后复制
    。然后按
```
F5
```
    登录后复制
    启动Extension Development Host，打开“调试控制台”查看输出。如果
```
activate
```
    登录后复制
    没被打印，说明激活事件有问题；如果命令回调没打印，说明命令注册或调用有问题。
调试时无法断点
- 现象： 在
```
extension.ts
```
  登录后复制
  中设置了断点，但
```
F5
```
  登录后复制
  运行后，断点没有被命中。
- 解决：
  - 确保你是在
```
src/extension.ts
```
    登录后复制
    文件上设置断点，而不是编译后的
```
out/extension.js
```
    登录后复制
    。VSCode通常会自动进行源映射，但有时配置有问题。
  - 检查
```
.vscode/launch.json
```
    登录后复制
    文件，确保
```
program
```
    登录后复制
    指向的是你的主入口文件（通常是
```
out/extension.js
```
    登录后复制
    ），并且
```
preLaunchTask
```
    登录后复制
    （如果存在）能够正确编译TypeScript。
  - 有时，重新启动VSCode或者重新运行
```
npm install
```
    登录后复制
    可以解决一些奇怪的调试问题。