头图

写一个属于自己的vscode插件

​ ==这只是一篇介绍一个主题vscode extension从创建到发布过程的文章(不涉及功能开发)==

62

一.搭建开发环境

 1. 我们需要下载node和git这两个我们常用的环境和工具
 2. 安装Yeoman和VS Code Extension Generator这两个包用来构建扩展骨架
npm install -g yo generator-code  //安装
yo code //输入这行命令来到问答环节

image-20211226235353026

这里这个老头就问我们你需要创建什么样的扩展?这里相信大家的英语都ok的。我就不再赘述,本文选择的是创建一个color theme extension,当我们选择完成之后,老头又提了两个问题。

这里他的意思是你是想要创建一个全新的(自己从0开始开发的)还是在别人插件的基础上进行二次开发的插件。这里我们选择No,start fresh(从0开始)

image-20211226235909973

然后他又问了问题,就是你需要给你的extension取个名字

image-20211227000156173

再我们取完名字之后他又又又问我们说你的extension需要一个标识符(大概就是发布之后大家在商店里搜索的关键字)

image-20211227000804423

不得不说这👴问题真多噢,这次要你给你的extension来一段牛逼的描述

image-20211227000554530

然后就是应该是最后一个问题了叭,就是说需要展示的作者名字

image-20211227001029869

显然这才是最后一问,让你挑选一个基础色调

image-20211227001147010

噢,并不是,又问了句,你需要初始化本地git仓库吗?

image-20211227001253327

然后我们就可以他就帮我们创建好项目啦

image-20211227001515772

二.开发

​ 1. 我们先用vscode打开项目,然后我们可以更改themes文件夹下的这个json文件来更改我们想要的配置,这里我就改了一些背景色、前景色啥的,具体配置项请参考VSCode扩展开发指南:https://code.visualstudio.com...

image-20211227002237106

image-20211227001731328

  1. 调试的时候我们就将项目文件夹拖进vscode安装目录下的extensions文件夹里,里面全是我们下载的扩展

image-20211227002814212

然后我们在vscode右下角点击设置按钮,选择颜色主题

image-20211227003017795

image-20211227003051355

然后我们选择我们的主题,然后reload window(重启vscode)就可以看到效果啦!

三.打包发布

  1. 这里我们需要注册一个微软开发者账号(免费试用账户),注册这个账号的前提是需要有一个微软账号开发者账号注册地址: https://azure.microsoft.com/,注册时需要信用卡验证(信用卡需要是visa或万事达的,这里卡住可以找我)
  2. 注册完成之后我们在User setting里面生成一个访问扩展仓库的Token

    image-20211227003844070

  3. 安装一下打包发布工具vsce
npm install -g vsce
  1. 在项目目录下打包
vsce package
  1. 发布我们的extension,package.json文件中的发布者名字一定要填写,并且要和我们注册的开发者账号一样,自带的readme文档要修改一下
vsce publish //这里需要验证一下我们创建的Token

image-20211227004556914

  1. 发布成功🎉🎉🎉🎉🎉🎉🎉🎉

image-20211227004835492

过一会我们就可以在我们管理的扩展仓库和vscode扩展商店搜到我们的扩展了。

image-20211227005021687

image-20211227005059551


Ercury
1 声望0 粉丝

下一篇 »
vscode插件升级