vscode插件的开发与发布流程

LogicPulseMaster
• 阅读 10090

适用场景

  • 每个团队都可能会有自己的库或者框架,没有相应的插件提示和快速填充非常的难受,效率也非常低,做一个vscode的代码提示其实也非常的简单。

依赖

  • vscode最好是更新到最新版,插件调试会更稳定
  • node 稳定版
  • npm install -g yo generator-code
  • yo code 生成基本文件, 过程与npm init 类似。yo会在最后自动自行npm install, 如果失败可以手动再执行
    vscode插件的开发与发布流程

调试

  • 点击vscode的调试,关联到lanuch.json文件,弹出一个名为扩展开发主机的窗口,这个窗口就是临时拥有这个插件的调试窗口。

vscode插件的开发与发布流程

vscode插件的开发与发布流程

代码片段

  • 在package.json的contributes可以自定义自己的snippets,language代表在使用何种语言解析这种文件的时候代码片段才会生效
//package.json
"contributes": {
    "snippets": [
        {
            "language": "html",
            "path": "./src/snippets/html.json"
        },
        {
            "language": "vue",
            "path": "./src/snippets/fes.json"
        }
    ]
}
  • 关联的snippets主要是prefix、body、description三个属性,prefix是指在vscode输入的关键字可以输出body里面的内容。
//fes.json
"FesData": {
    "prefix": "FesData",
    "body": ["FesData: function(){\n\treturn {\n\t$0\n\t}\n}"],
    "description": "Fes page data"
  },
  • 如果想要在vue文件的template标签中使用snippets,language是vue-html,如果是script标签中使用language必须要有JavaScript这一项,language只写vue在这些标签是不生效的。

预览

  • 发布前可以通过将文件放进vscode的extension文件夹中,就可以本地预览和使用了。

vscode插件的开发与发布流程

发布

  • Visual Studio Team Services 创建一个账号
  • 根据账号的名字访问主页,例如我的名字是bingou-ms,主页链接就是https://bingou-ms.visualstudi...
  • 点击右上角的个人信息security

    vscode插件的开发与发布流程

  • 点击add,这里交互真的很难让人一眼看出这个是个按钮,
    vscode插件的开发与发布流程

    vscode插件的开发与发布流程

  • 确认后会有token显示,但是它只显示一次,务必要保留,之后命令行操作会使用到

    1. npm install vsce -g
    2. vsce create-publisher (name)
    3. vsce login (publisher name)
    4. vsce publish (version)
  • 之后的发布只要执行第四步就可以

其他

  • publish的插件的readme.md文件就是安装详情页的详细信息内容,但是必须在package.json中写相关的repository
  • FesHelper小星星走一走
点赞
收藏
评论区
推荐文章
20pzqm 20pzqm
3年前
golang 基于grpc的插件框架——go-plugin 使用入门
golang基于grpc的插件框架——goplugin使用入门说说我对插件的理解大家都用过vscode,当我们想要在vscode中格式化json的时候,很简单,去插件市场安装一个jsontools就好了;想要使用eclipse的键盘快捷方式,安装一个eclipsekeymap就可以.由此可见,插件帮助我们扩展原有程序的功能,同时它与原有工程是解耦
Jacquelyn38 Jacquelyn38
4年前
Vscode个性化设置:让一个小萌妹陪你敲代码
前言大家平时都用什么代码编辑器啊!我个人比较喜欢用vscode,因为有以下几点:开源,免费;自定义配置集成git智能提示强大支持各种文件格式(html/jade/css/less/sass/xml)调试功能强大各种方便的快捷键强大的插件扩展对前端这么友好
威尔we 威尔we
4年前
使用 VS Code 来开发和调试 Python 程序
(简称VSCode)是微软出品的一款支持多种语言的免费IDE(集成开发环境)。VSCode轻量而强大,支持Windows、macOS和Linux。内置支持JavaScript、TypeScript和Node.js,并且拥有一个丰富的插件生态系统来支持其它语言(C/C、C、Java、Python、PHP、Go等)和运行时(.Net和
Stella981 Stella981
3年前
Python 使用VS Code进行调试
VSCode是一款非常好用的编辑器,现在我基本上所有的开发任务都在VSCode上完成。它的代码调试工具其实也非常强大,但是许多人都不知道该怎么用,今天就来学习怎么用它调试Python代码吧。1.准备既然是用VSCode调试Python代码,那当然你得先安装好Python啦,如果你还没有安装,可以看这篇文章:超详细Pyt
Wesley13 Wesley13
3年前
VS Code的7个开源替代品,值得推荐!
VisualStudioCode,也称为VSCode,是一款支持Linux,Windows和macOS的代码编辑器。它既能编辑简单文本,也能像集成开发环境(IDE)一样管理整个代码库。它还可以通过插件进行扩展,被广泛认为是一个可靠的文本编辑器,轻松打败其他编辑器。微软将VSCode开源,但是从Microsoft下载的版本不是开放源代码。今
Wesley13 Wesley13
3年前
vscode代码自动补全失效
前段时间,朋友说自己的vscode突然出现了代码不能自动补全的问题(主要是js,其他语言也可以参考)症状表现为,刚打开vscode有自动补全,过了一会,突然就没了,反反复复解决过程也是相当坎坷了开始其实就解决了,推测是插件引起的冲突,只不过以为失败了,而且开始只设想到了vscode的扩展插件。新建了一个文件夹,新建一个js文件,这
Wesley13 Wesley13
3年前
vscode调试使用nodejs纯调试javascript
vscode调试使用nodejs纯调试javascript其实就是跟自己较劲,可以写个包含js的html进行调试,不用这么麻烦做单独调试!不过个人开发就是喜欢语言有各自的环境!在本地目录编写好js以后,按运行调试然后编辑器会自动生成.vscode目录,并且下面会生成launch.json文件,并弹出需要自己扩充修改{
Stella981 Stella981
3年前
AliOS Things开发:AliOS Studio使用说明
介绍AliOSStudio是一套基于vscode的开发环境,支持windows、linux、macOS。AliOSStudio有以下功能:极佳开发体验、简单操作界面支持AliOSThings应用开发代码补全、索引、提示等编译/下载/调试AliOSThings
推荐几款可以大幅提高开发效率的vscode插件 | 京东云技术团队
1、Vue2Snippets这是一款基于vue2的代码片段提示插件,对于使用vue2的开发者特别友好,可大幅提高我们的编码速度。他的能力非常强大,具体还需要我们去看他的文档,解锁更多能力。2、PathAutocomplete这是一款路劲提示插件vscode
小万哥 小万哥
1年前
2023 Visual Studio Code 插件推荐:18 个提高开发效率的常用插件
VisualStudioCode(简称VSCode)是一款强大的开源代码编辑器,它拥有众多功能强大的扩展插件,使得开发者可以根据自己的需求来定制编辑器的功能和外观。在本文中,我们将分享一些非常实用的VSCode插件,这些插件将提高您的开发效率,使编码变得更
少湖说 少湖说
9个月前
鸿蒙Flutter实战:08-如何调试代码
鸿蒙Flutter实战:如何调试代码1.环境搭建参考文章搭建好开发环境。IDE安装好DevEco和VsCode/AndroidStudio。2.配置如果是vscode,可以在.vscode/launch.json文件中,增加以下配置json"name":"