项目的图标的方式一直是写个svg，然后设置xlink:href，觉得麻烦就封装了一个组件，并根据iconfont.json 生成ts Type

但还有个问题就是，iconfont 类名命名都很奇怪，还有很多figma导出的Group-xxxxx命名，只看类名，根本不知道这个icon是什么，还要去查图标库

于是花了一天搞了个插件，输入icon-即可调出图标库，上下选择回车插入

如何创建插件

首先应确定自己有node环境，也有node与js基础

创建: Yeoman 和 VS Code 生成器

vscode官方提供了一个生成器，可以快速搭建插件项目骨架。

npm install -g yo generator-code

执行

yo code

按照提示选择，不明白的问AI

推荐TS + webpack

如果不希望全局安装yo，直接执行

npx --package yo --package generator-code -- yo code

打开生成的项目的文件夹

会生成一个hello world项目，在Run and Debug(运行与调试)处运行

会开启一个扩展开发宿主：

在新窗口中，按 Ctrl+Shift+P (或 Cmd+Shift+P on Mac) 打开命令面板

输入并选择 Hello World

将看到右下角弹出 “Hello World from xxxx!” 的提示

vscode/cursor这些都可以直接开发，但版本最好是最新的

开发 文档以及如何学习

官方文档：https://code.visualstudio.com/api/get-started/your-first-extension

官方文档还是很详细的，不过想快速产出的话，直接了解一下扩展的基本概念，然后照着文档的大纲与当前需求问AI更合适

也可以参考学习一下AI写的或者开源项目的规范结构

打包

如果是基于官方cli生成的

排除不必要文件

配置 .vscodeignore 文件，排除不必要的文件

安装vsce

npm install -g @vscode/vsce

打包

vsce package

打包时会有一些警告，没有设置git仓库，如果要发布的话应该在package.json设置一下

默认的API版本是最新的，在旧一点的vs中都装不上

Ts装旧版本types

npm install @types/vscode@~1.78.0 --save-dev

package.json中设置版本

{
“engines”: {
“vscode”: “^1.104.0” –> 1.78.0
}
}

确保兼容性没问题后再打包

发布

有两个市场

各种第三方编辑器(cursor,trae)

https://open-vsx.org/

官方市场

https://marketplace.visualstudio.com/vscode