vscode插件开发（2）-主题插件

最新推荐文章于 2024-09-29 14:43:13 发布

快说我是谁！

最新推荐文章于 2024-09-29 14:43:13 发布

阅读量996

点赞数

本文链接：https://blog.csdn.net/suwanqing_su/article/details/105863661

版权

本文档介绍了如何开发Visual Studio Code（VSCode）的主题插件，包括创建过程、目录结构解析、`package.json`配置、`mytheme-color-theme.json`中的`colors`和`tokenColors`设置，以及如何进行调试和打包发布。通过此教程，读者可以掌握自定义VSCode主题的完整流程。

摘要由CSDN通过智能技术生成

创建

What type of extension do you want to create?：New Color Theme
Do you want to import or convert an existing Textmate color theme?：是否导入已经存在的主题文件
What's the name of your extension?：扩展插件的名字
What's the identifier of your extension?：扩展的标志（也是接下来创建的扩展项目文件夹名）
What's the description of your extension?：主题扩展的描述
What's the name of your theme shown to the user?：用户看到的名字
Select a base theme：创建的主题是深色、浅色、还是高对比度的，选择后会根据主题默认提供一部分颜色，基于它再进行扩展

这是我选择的配置项：
在这里插入图片描述

目录结构

在这里插入图片描述

.vscode
- launch.json
themes
- mytheme-color-theme.json：配置插件入口文件
.vscodeignore：配置不需要加入最终发布到扩展中的文件
CHANGELOG.md：变更记录
package.json：资源配置文件
READE.md
vsc-extension.quickstart.md
LICENSE：生成的文件目录是没有license文件的，发布需要有license这里创建了一个

package.json

{
   
	//扩展名-应该全部为小写字母，没有空格
    "name": "girls-theme",
    //扩展在市场中显示的名称
    "displayName": "Cool-girls-theme",
    //扩展的说明
    "description": "a cool pink theme for girls",
    //版本号
    "version": "0.0.1",
    //插件在市场中显示的icon图标
    "icon": "icon.png",