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

38次阅读

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

src="https://img.php.cn/upload/article/001/253/068/175808844641620.jpeg" alt="如何利用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

：这是你的扩展逻辑代码的核心。

src="https://img.php.cn/upload/ai_manual/000/969/633/68b6d20daea8d920.png" alt="如何利用VSCode的扩展脚手架快速创建新扩展？">

FILM

利用两张现有的图像，创建一个动画。

src="https://phps.yycxw.com/static/images/card_xiazai.png" alt="如何利用VSCode的扩展脚手架快速创建新扩展？">47

查看详情 src="https://phps.yycxw.com/static/images/cardxiayige-3.png" alt="如何利用VSCode的扩展脚手架快速创建新扩展？">
- ```
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
    可以解决一些奇怪的调试问题。