本篇来制作VScode插件

之前做viora的插件时很头疼,因为每次都要让agent按照规定生成,我参与不了一点也看不到细节

开始的时候想的是做一个工作台,然后把sdk塞进去,然后在工作台里写代码并直接使用工作台生成这个插件

但是体验感太差,而且这完全是重复造轮子而且无法结合ai使用

插件初步思路:

  • 需要结合viora sdk使用
  • 需要可以在侧边栏预览转换前后的图片,在VScode右上角点击icon就能快速打开
  • 需要快捷生成和打包插件的命令
  • 需要有提供语法高亮、代码补全、错误诊断、跳转定义、格式化等能力(其实也不需要,毕竟代码是C#,可以直接用微软的那个C#插件)

环境配置

假设你已经安装了pnpm nodejs npm git

首先创建工作文件夹

bash
1
mkdir vscode-workshop && cd vscode-workshop

我们使用npm安装如下工具

  • yo：全称叫 Yeoman，是一个现代 Web 应用的脚手架工具（命令行工具），用于快速生成项目。
  • generator-code：VS Code 扩展生成器

运行 yo code 命令, 创建并初始化项目

bash
123
npm install -g yo generator-code

yo code

选择选项

然后我们需要回答几个问题,回答问题只需要Enter回车

bash
1
? What type of extension do you want to create?     #选择 New Extension (TypeScript)
bash
1
? What's the name of your extension?    #随便取个名字比如 Viora
bash
1
? What's the identifier of your extension? (viora)    #回车即可
bash
1
? What's the description of your extension?     #随便写一个插件的描述例如: Viora plugin development with scaffolding, validation, packaging, installation, and essential development tools
bash
1
? Initialize a git repository? (Y/n)    # 输入Y同意
bash
1
? Which bundler to use?  # 选 esbuild
bash
1
? Which package manager to use?  # 选 pnpm

然后可能遇到这种情况即pnpm阻止了esbuild的安装脚本执行

powershell
123456789
Error: ERR_PNPM_IGNORED_BUILDS

  × installing dependencies
  ╰─▶ Ignored build scripts: esbuild@0.28.2
  help: Run "pnpm approve-builds" to pick which dependencies should be allowed to run scripts.

Error code

Command failed with exit code 1: pnpm install

我们进入目录批准安装

powershell
12345
Set-Location D:\vscode-workshop\viora

pnpm approve-builds esbuild
pnpm install
pnpm exec esbuild --version

目录

powershell
123456789101112131415161718192021222324252627
viora
├── node_modules
│   ├── @types    
│   │   ├── mocha #提供 Mocha 的类型定义
│   │   ├── node  #提供 Node.js 的类型定义
│   │   └── vscode  #提供 VS Code API 的 TypeScript 类型定义
│   ├── @vscode   
│   │   ├── test-cli   #辅助执行 VS Code 扩展测试
│   │   └── test-electron   #提供基于 Electron 的扩展测试环境
│   ├── esbuild   #编译和打包代码
│   ├── eslint   #检查 TypeScript 代码
│   ├── npm-run-all  #帮助组合和运行多个 npm/pnpm 脚本
│   ├── typescript   #提供 TypeScript 编译器
│   └── typescript-eslint   #检查 TypeScript 代码
├── src
│   ├── test   #测试文件
│   │   └── extension.test.ts     
│   └── extension.ts   # 插件的主要入口文件
├── CHANGELOG.md   #记录各版本的新功能、修复和变更
├── README.md
├── esbuild.js      #构建脚本，告诉 esbuild 如何编译和打包你的 TypeScript 代码
├── eslint.config.mjs   #配置 ESLint，检查代码风格和潜在问题
├── package.json #最重要的配置文件之一,声明插件名称、版本、入口文件、命令、菜单、快捷键、依赖和开发脚本等
├── pnpm-lock.yaml    #锁定依赖解析结果，尽量确保不同环境安装到一致的依赖版本
├── pnpm-workspace.yaml    #定义 pnpm 工作区及相关配置。单项目通常不需要复杂的工作区设置
├── tsconfig.json   # 配置 TypeScript 编译规则，例如目标 JavaScript 版本、模块类型和类型检查选项
└── vsc-extension-quickstart.md  #官方脚手架生成的快速入门说明，主要用于指导如何运行、调试和测试扩展

完成后进入 VS Code，按下F5

或者点这两个地方也可以

​ image-20261014160812220

​ image-20261014160847450

成功的话会弹出来一个Extension Development Host(开发宿主窗口)，其中就运行着插件

也可以通过在 VS Code 中按 Ctrl + Shift + P 搜索并执行 Debug: Select and Start Debugging打开这个窗口

​ image-20261014163427823

按 Ctrl+Shift+P 执行 "Hello World" 命令

​ image-20261014164151687

出现 Hello World from 项目名 就成功了

​ image-20261014164033179

此时我们项目根目录出现了一个dist文件夹里面有extension.js和extension.js.map文件

当然这个右下角弹窗信息我们还可以改成我们自己的

​ image-20261014172958932

可能遇到的问题

我们f5调试时可能出现这种情况 就是

显示 Parameter format not correct - -Command

然后开发宿主窗口也不弹出来

image-20261014163114927

这个就很玄学,也有人向微软提过这个问题

VS Code表示：任务和调试默认使用当前默认终端配置，但可以通过terminal.integrated.automationProfile.windows 单独指定任务所用的 Shell来避免干扰

我们使用

powershell
1
(Get-Command pwsh.exe).Source

获取当前powershell终端的exe路径(比如我的是powershell 7+版本)

然后打开

​ image-20261014164332159

​ image-20261014164434628

把下面这段粘进去, 在path地区替换为你自己的,记住路径使用两个斜杠

json
1234
"terminal.integrated.automationProfile.windows": {
    "path": "C:\\Program Files\\WindowsApps\\Microsoft.PowerShell_7.6.6.0_x64__8wekyb3d8bbwe\\pwsh.exe",
    "args": ["-NoLogo", "-NoProfile"],
  },

这样就能解决这个问题

package.json文件相关参数