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

已于 2024-05-30 18:22:55 修改
阅读量1.2k 收藏 29
点赞数 20
文章标签： 前端 vscode ide
于 2024-05-30 18:21:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012570307/article/details/139331041
版权

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

背景

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

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

下边进入主题

目标

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

成果展示

大家可在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 文件即可

第一次打包前的必要操作

  1. 第一次打包需要修改readme.md的内容-否则报错
  2. package.json填写发布人，仓库信息
{
  // 1.添加开发者账号
  "publisher": "jerrycc",
  // 2.添加仓库，处理报错
  "repository": "git+https://github.com/username/xxx.git"
  "scripts": {}
}
  1. 添加LICENSE.md
    根目录下增加LICENSE.md文件，即可

发布

vsce publish -p token令牌

第一次发布前账号准备

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

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

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

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

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

注册vscode开发者账号

  1. 若没有vscode账号需要去注册：https://marketplace.visualstudio.com/manage/createpublisher?managePageRedirect=true。
  2. 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

  1. configuration：设置
  2. commands：命令
  3. menus：菜单
  4. keybindings：快捷键绑定
  5. languages：新语言支持
  6. debuggers：调试
  7. breakpoints：断点
  8. grammars
  9. themes：主题
  10. snippets：代码片段
  11. jsonValidation：自定义JSON校验
  12. views：左侧侧边栏视图
  13. viewsContainers：自定义
  14. activitybar
  15. problemMatchers
  16. problemPatterns
  17. taskDefinitions
  18. 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/

在这里插入图片描述

张三疯ts
关注
  • 20
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VsCode插件开发之插件初步通信的方法步骤
10-16
VSCode插件demo
vscode插件开发
奇舞周刊
12-01 9552
作为一个前端开发相信，大家对于vscode非常熟悉。vscode是微软开源的一款基于 Electron 开发的代码编辑器。并且vscode支持通过插件来扩展编辑器的功能，比如Prettier插件帮助我们快速格式化代码，ES7+ React/Redux/React-Native snippets插件帮助我们快速快速编写react代码......这些插件极大地优化了开发体验。那么插件是如何开发的呢？接...
十分钟实现自己动手写一个vscode插件，实现插件自由！_vscode插件怎么写
最新发布
2401_85015152的博客
05-16 559
4、安装生产插件代码的工具：Yeoman和VSCode Extension generator。1、在cmd命令行中执行以下命令，自动生成一个工程的基本代码。2、在extension.js文件中添加相关代码。1、安装Visual Studio Code。1、在package.json中添加相关代码。3、外部文件wordCounter.js文件。2、安装Node.js。
从小白到大白 — 如何开发 VSCode 插件
程序员成长指北
10-13 4785
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群前言由于之前的国际化的项目中总是要统计老项目中待翻译的内容，然后再交由业务进行翻译，如果总是人为统计不仅相当耗费精力和时间，而且还不能保证是否有遗漏，因此想通过编写一个i18n-helper插件来实现这个功能。然而，大家的需求总是出奇的相似（因为已经有很多类似的插件存在了），因此没必要重复造轮...
基于VS Code的插件开发（基础篇）
麻球科技
02-28 7084
VSCode 采用了 Electron，在语言上，VSCode 使用了自家的 TypeScript 语言开发。Electron是基于 Chromium 和 Node.js，使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用，它兼容 Mac、Windows 和 Linux，可以构建出三个平台的应用程序。从实现上来看，Electron = Node.js + Chromium + Native API接下来看下VS Code布局。
vscode插件开发总结
woyebuzhidao321的博客
01-10 1万+
比较好的文章可供参考： https://zhaomenghuan.js.org/note/vscode/awesome-vscode.html https://zhuanlan.zhihu.com/p/99587182 一、关键字高亮实现
VsCode常用插件(前端开发)
07-13
VsCode常用插件(前端开发)，上传备用，免费下载。
Visual Studio Code前端常用插件详解，教你玩转vscode
01-08
用了很多前端开发软件，倒是各有优点，但是我推荐的是Visual Studio Code，但是需要自己装一下插件才能用的很6，下面是我总结出的前端常用插件。 插件名称 用途 Auto Close Tag 自动闭合HTML/XML标签 Auto ...
前端vscode开发工具
11-25
在前端开发中，有一个非常好用的工具，Visual Studio Code，简称VS code。 　都不用我安利VS code，大家就会乖乖的去用，无数个大言不惭的攻城狮，都被VS code比德芙还丝滑的强大功能所折服。 　我是来给大家安利...
vscode下载安装以及前端开发相关插件的安装及使用
05-23
vscode下载安装以及前端开发相关插件的安装及使用
vscode常用插件整理汇总
10-15
本文给大家整理汇总了17个常用的vscode装B插件,都是作者费心整理出来的,希望大家能够喜欢
VS code 插件开发——开发第一个 vscode 插件
weixin_46086458的博客
03-30 1337
一文了解 Vscode 插件开发——怎么创建项目、怎么调试、怎么打包发布。VS code 插件开发主要采用的是 TS 作为开发语言。运行打包都很简单，接口丰富易用。
VSCode插件开发入门全攻略
YukiGreen的博客
07-06 1614
vscode插件开发入门指南
vscode自定义插件的开发过程记录
用沸腾的热血，支付我们的人生吧！
03-07 1398
本文是关于visual studio code软件上自定义插件的开发记录，将从头记录本人开发的过程，虽然网上也有很多文章，但个人在实践的过程还是会遇到不一样的问题，所以记录下来，以便于后期参考。前期准备：1、node.js环境配置：平台：windows工具：visual studio code库：node.js。
【VS Code插件开发】入门篇（一）
热门推荐
编码世界
07-31 7万+
讲解了VS Code插件入门开发，讲解了项目的搭建、测试、打包、发布等一系列流程
功能问题：如何开发一个自己的 VS Code 插件？
m0_74802419的博客
02-22 1339
本文简单介绍了，如何一步步的开发一个自己的 VS Code 插件，并最终选择本地自己使用，或者发布到插件商店。
VSCode 插件开发教程
油墨香^-^的博客
09-23 8448
上面提到了生成一个command只需要 2 步，先是利用vscode.commands.registerCommand注册一个，然后再到package.json里的contributes.commands中配置即可。是新手引导，里面包含了对文件的作用解析、如何运行插件、测试插等等，推荐去看一看，我们在下面也会介绍一些。保存文件到指定位置使用showSaveDialog，它会打开文件选择器弹窗，选择了保存路径后点击确定会返回选中的路径，如果点击取消会返回undefined。这里只列举一些常见的api.
【工具开发】VSCdoe 插件开发
朝拜者
10-13 1090
Vscode 插件开发
vscode前端开发插件
08-27
对于前端开发者来说，VS Code 有很多非常实用的插件。以下是一些常用的前端开发插件： 1. ESLint：用于代码规范检查和自动修复。 2. Prettier：用于代码格式化，使代码风格统一。 3. HTML CSS Support：提供 HTML 和 CSS 的智能提示和自动完成。 4. Live Server：在本地启动一个实时预览服务器，方便调试和查看页面效果。 5. GitLens：增强了对 Git 的支持，可以查看代码的提交历史和作者等信息。 6. Auto Rename Tag：自动重命名 HTML 或 XML 标签的闭合标签。 7. IntelliSense for CSS class names：为 CSS 类名提供智能提示。 8. Debugger for Chrome：在 VS Code 中使用 Chrome 进行调试。 9. Path Intellisense：自动补全文件路径，避免手动输入错误路径。 10. Bracket Pair Colorizer：给代码中的括号配色，方便区分。 这只是一小部分常用的插件，你可以根据自己的需求在 VS Code 的插件市场中搜索并安装更多插件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值