前端从零到一开发vscode插件并发布到插件市场

背景
目标
成果展示
一条龙实现过程
- 安装插件脚手架和工具
- 创建项目
- 运行
- 调试
- 打包
- - 第一次打包前的必要操作
- 发布
- 第一次发布前账号准备
- - 注册Azure DevOps发布账号-获取token
  - 注册vscode开发者账号
  - 终端登录vsce
- 发布方式2-手动上传插件
进阶
- 开发代码片段插件
- - 创建代码片段
  - 配置package.json
- 结果展示
其他
- package.json介绍
- contributes

背景

vscode作为前端开发神器，功能十分强大，这背后是大量vscode插件在支持。比如用react的snippets插件，只需输入rfc即可快速生成一个模版，大大提高了我们的开发效率，也可提早下班。
在这里插入图片描述
作为多年的资深前端，假如我们开发一个好用的插件，同事用上我们的插件，不得大大的说声牛逼😎，同时也是提高段位和收入的好方法。

开发插件的路并非一帆风顺，今天就记录下开发插件的过程和踩过的坑
在这里插入图片描述
所有的步骤都已走通，如果有帮助，请小伙伴们点赞关注😄

下边进入主题

目标

初级：掌握注册、开发、发布全流程-用小demo实现
进阶：开发代码片段差价

成果展示

大家可在vscode搜索taro-code
在这里插入图片描述
输入代码提示效果

一条龙实现过程

安装插件脚手架和工具

# 安装插件脚手架-可快速生成项目
npm install -g yo generator-code# 安装插件发布工具
npm install -g vsce

创建项目

终端 yo code
注意：创建时不要选pnpm，否则后续很麻烦

运行

npm run watch

调试

在 VSCode 中按下 F5 会进入调试状态，这时候会自动打开一个名为扩展开发宿主的新窗口。
再在新窗口中，按下 command + shift + p 或 ctrl + shift + p，在里面输入我们插件注册的命令名，按下回车就能触发回调。

在这里插入图片描述

打包

打包指令：

vsce package// 列出已发布的扩展
vsce ls// 成功标志
跟目录下出现 taro-code-0.0.1.vsix 文件即可

第一次打包前的必要操作

第一次打包需要修改readme.md的内容-否则报错
package.json填写发布人，仓库信息

{// 1.添加开发者账号"publisher": "jerrycc",// 2.添加仓库，处理报错"repository": "git+https://github.com/username/xxx.git""scripts": {}
}

添加LICENSE.md
根目录下增加LICENSE.md文件，即可

发布

vsce publish -p token令牌

第一次发布前账号准备

参考：https://blog.csdn.net/qq_36947128/article/details/136171963

注册Azure DevOps发布账号-获取token

目的：使用token在终端登录vsce账号，然后才能发布

进入 https://dev.azure.com/
创建项目，生成token
生成token时一定注意 1. 选 all accessible organizations， 2.点击右下角的 Show all scopes 找到 Marketplace 选择 Manage。否则发布会失败
将生成的token保存，否则找不到，注：可以重新生成。

认真看，下边两项不能选错，否则发布失败
在这里插入图片描述

注册vscode开发者账号

若没有vscode账号需要去注册：https://marketplace.visualstudio.com/manage/createpublisher?managePageRedirect=true。
vscode发布者中心：https://marketplace.visualstudio.com/manage

终端登录vsce

// 输入账号
vsce login jerrycc// 回车后输入token 
ga2fokrzz6drvuwddy3x2onyluenvvbkipa5jpigv7sf77yttgma// 登录成功
// 发布
// vsce publish

发布方式2-手动上传插件

访问Visual Studio Marketplace，并登陆上一节中创建的Microsoft账户，然后点击右上角的Publish extension
在这里插入图片描述

进阶

开发代码片段插件

创建代码片段

示例：root/snippets/tarocode.code-snippets，注意后缀名
注：是json格式，可以用此网站转化 https://snippet-generator.app/

{"zyfbtn": {"prefix": "zyfbtn","body": ["<div>","  <button>我是zyfbtn</button>","</div>",""],"description": "zyfbtn"}
}

代码转化为json
在这里插入图片描述

配置package.json

为了支持react和ts，可配置4份

"contributes": {"snippets": [{"language": "javascript","path": "./snippets/tarocode.code-snippets"},{"language": "javascriptreact","path": "./snippets/tarocode.code-snippets"},{"language": "typescript","path": "./snippets/tarocode.code-snippets"},{"language": "typescriptreact","path": "./snippets/tarocode.code-snippets"}],
}

搞定

结果展示

在这里插入图片描述

其他

package.json介绍

{// 插件的名字，应全部小写，不能有空格"name": "fast-admin",// 插件的友好显示名称，用于显示在应用市场，支持中文"displayName": "fast-admin",// 描述"description": "Quickly generate admin page",// 版本号"version": "0.0.1",// 插件最低支持的vscode版本"engines": {"vscode": "^1.48.0"},// 插件应用市场分类，可选值： [Programming Languages, Snippets, Linters, Themes, Debuggers, Formatters, Keymaps, SCM Providers, Other, Extension Packs, Language Packs]"categories": ["Other"],/** 扩展的激活事件数组，可以被哪些事件激活扩展：**	1.onLanguage:${language}**	2.onCommand:${command}**	3.onDebug**	4.workspaceContains:${toplevelfilename}**	5.onFileSystem:${scheme}**	6.onView:${viewId}**	7.onUri**	8.***/"activationEvents": ["onCommand:fast-admin.helloWorld"],// 插件的主入口"main": "./extension.js",// 贡献点，整个插件最重要最多的配置项，下面单独列出"contributes": {// 命令"commands": [{"command": "fast-admin.helloWorld","title": "Hello World"}]},// 同 npm scripts"scripts": {"lint": "eslint .","pretest": "npm run lint","test": "node ./test/runTest.js"},// 开发依赖"devDependencies": {"@types/vscode": "^1.48.0","@types/glob": "^7.1.3","@types/mocha": "^8.0.0","@types/node": "^14.0.27","eslint": "^7.6.0","glob": "^7.1.6","mocha": "^8.0.1","typescript": "^3.8.3","vscode-test": "^1.4.0"},// 以下为一些非关键配置// 关键字，用于应用市场搜索"keywords": ["vscode", "plugin", "fast", "admin"],// 发布者，如果要发布到应用市场的话，这个名字必须与发布者一致"publisher": "kukudelaomao",// 插件图标，至少128x128像素"icon": "images/icon.png",// 许可"license": "SEE LICENSE IN LICENSE.txt",// 问题"bugs": {"url": "https://github.com/kukudelaomao/fast-admin/issues"},// 仓库"repository": {"type": "git","url": "https://github.com/kukudelaomao/fast-admin"},// 主页"homepage": "https://github.com/kukudelaomao/fast-admin/blob/master/README.md"
}

contributes

configuration：设置
commands：命令
menus：菜单
keybindings：快捷键绑定
languages：新语言支持
debuggers：调试
breakpoints：断点
grammars
themes：主题
snippets：代码片段
jsonValidation：自定义JSON校验
views：左侧侧边栏视图
viewsContainers：自定义
activitybar
problemMatchers
problemPatterns
taskDefinitions
colors

	"contributes": {// 插件配置项"configuration": {"type": "object",// 配置项标题，会显示在vscode的设置页"title": "vscode-plugin-demo","properties": {// 这里我随便写了2个设置，配置你的昵称"vscodePluginDemo.yourName": {"type": "string","default": "guest","description": "你的名字"},// 是否在启动时显示提示"vscodePluginDemo.showTip": {"type": "boolean","default": true,"description": "是否在每次启动时显示欢迎提示！"}}},// 命令"commands": [{"command": "extension.sayHello","title": "Hello World"}],// 快捷键绑定"keybindings": [{"command": "extension.sayHello","key": "ctrl+f10","mac": "cmd+f10","when": "editorTextFocus"}],// 菜单"menus": {// 编辑器右键菜单"editor/context": [{// 表示只有编辑器具有焦点时才会在菜单中出现"when": "editorFocus","command": "extension.sayHello",// navigation是一个永远置顶的分组，后面的@6是人工进行组内排序"group": "navigation@6"},{"when": "editorFocus","command": "extension.demo.getCurrentFilePath","group": "navigation@5"},{// 只有编辑器具有焦点，并且打开的是JS文件才会出现"when": "editorFocus && resourceLangId == javascript","command": "extension.demo.testMenuShow","group": "z_commands"},{"command": "extension.demo.openWebview","group": "navigation"}],// 编辑器右上角图标，不配置图片就显示文字"editor/title": [{"when": "editorFocus && resourceLangId == javascript","command": "extension.demo.testMenuShow","group": "navigation"}],// 编辑器标题右键菜单"editor/title/context": [{"when": "resourceLangId == javascript","command": "extension.demo.testMenuShow","group": "navigation"}],// 资源管理器右键菜单"explorer/context": [{"command": "extension.demo.getCurrentFilePath","group": "navigation"},{"command": "extension.demo.openWebview","group": "navigation"}]},// 代码片段"snippets": [{"language": "javascript","path": "./snippets/javascript.json"},{"language": "html","path": "./snippets/html.json"}],// 自定义新的activitybar图标，也就是左侧侧边栏大的图标"viewsContainers": {"activitybar": [{"id": "beautifulGirl","title": "美女","icon": "images/beautifulGirl.svg"}]},// 自定义侧边栏内view的实现"views": {// 和 viewsContainers 的id对应"beautifulGirl": [{"id": "beautifulGirl1","name": "美女1"},{"id": "beautifulGirl2","name": "美女2"},{"id": "beautifulGirl3","name": "美女3"}]},// 图标主题"iconThemes": [{"id": "testIconTheme","label": "测试图标主题","path": "./theme/icon-theme.json"}]},

参考：
搭建到发布：https://blog.csdn.net/m0_74802419/article/details/136228018
处理打包报错：https://blog.csdn.net/crper/article/details/137558270
vscode如何发布：https://blog.csdn.net/bulucc/article/details/137837339
1.解决vsce发布失败的问题 2.如何开发代码片段 https://blog.csdn.net/qq_36947128/article/details/136171963
将代码转化为json 格式： https://snippet-generator.app/

在这里插入图片描述