HeyUI组件库发布vscode插件,PS教程: 如何开发vscode插件?
前沿
HeyUI组件库,我们项目组已经用了一年多了。
一直没有对应的组件库插件,我一直耿耿于怀。
所以,抽时间查阅了vscode的插件开发教程,终于把vscode的插件完成了。
在此奉上我们的插件库链接,多谢大家提建议。
git: github.com/heyui/heyui…
vscode: marketplace.visualstudio.com/items?itemN…
或者大家可以通过在vscode插件库中搜索 heyui-snippets进行安装。
HeyUI
如果对我们组件库不熟悉的小伙伴可以参见我们官网:
heyui.top
或者围观我们的github:
github.com/heyui/heyui
用例
其他不说,先把效果奉上。
vue单文件结构
首先:我提供了一个vue的输入提示,类似于emmit的!,生成vue单文件的基本结构。
heyui组件库的组件输入提示
heyui组件库有很多组件,如果没有组件的输入提示,基本上,我们都需要手写很多组件的标签,这里我们提供所有的组件库输入提示,以方便程序编写中的效率。
Component 输入提示
Component |
---|
Affix |
BackTop |
Badge |
Checkbox |
Circle |
Category |
Datetime |
DropdownCustom |
DropdownMenu |
Form |
FormItem |
Menu |
Modal |
ModalComponent |
Pagination |
Poptip |
Progress |
Radio |
Rate |
Slider |
Loading |
Steps |
Search |
Select |
Switch |
SwitchList |
Tabs |
TagInput |
Tree |
TreePicker |
NumberInput |
Tooltip |
Uploader |
AutoComplete |
Timeline |
TextEllipsis |
Table |
TableItem |
Row |
Col |
Button |
ButtonGroup |
Method 输入提示
Method |
---|
$Message |
$Notice |
$Confirm |
$Loading |
$ScrollIntoView |
教程
写了这么多,如果大家对于如何开发vscode的插件比较好奇的话,可以往下接着看。
其实heyui-snippets是比较简单的插件,就是单纯的输入提示。
这种输入提示,大家其实可以在vscode中自定义,方便自己的开发。
自定义输入提示
我首先把自定义输入提示的教程放出来:
首先 Shift+Command+P,打开命令输入框,输入snippet,点击首选项:配置用户代码片段
"TestSnippet": { "prefix": "TestSnippet", "body": [ "<TestSnippet v-model=\"$1\"></TestSnippet>" ], "description": "insert a TestSnippet component" }
如上段代码所示,我配置了一个TestSnippet组件的输入提示,那在vue代码中应用是这个样子的:
而且,对于scope的定义与配置也是模糊不清,总之,我尝试了很久,才弄清楚。
vscode中,我们会安装vetur,这个基本上算是vue语言插件,在这个插件中,对于vue是这么定义的:
"text.html.basic": "html", "text.html.vue-html": "vue-html", "text.pug": "pug", "text.haml": "haml", "source.css": "css", "source.css.scss": "scss", "source.css.less": "less", "source.css.postcss": "postcss", "source.sass": "sass", "source.stylus": "stylus", "source.js": "javascript", "source.ts": "typescript", "source.coffee": "coffeescript", "text.html.markdown": "md", "source.yaml": "yaml", "source.json": "json", "source.php": "php"
一开始,如果参考sublime的snippet配置,scope是使用text.html.vue-html这种定义的,于是我在插件库的定义中使用这一种,发现不行,总之最后,终于尝试很久,把发现用的是后面的那一种配置。
在自定义的配置文档中:
"TestSnippet": { "scope": "vue-html", //设置scope "prefix": "TestSnippet", "body": [ "<TestSnippet v-model=\"$1\"></TestSnippet>", "$2" ], "description": "insert a TestSnippet component" }
就可以正确的使用snippet了。
插件的开发
在知道正确配置的情况下,转移到snippet插件的开发中,还是走了一些弯路,过程就叙述了,把正确的配置放出来:
package.json
scope定义在language属性上,是的,就是这么坑DIE
"contributes": { "snippets": [ { "language": "vue", "path": "./snippets/vue.json" }, { "language": "vue-html", //scope定义在language属性上 "path": "./snippets/component.json" }, { "language": "javascript", "path": "./snippets/javascript.json" } ] }
component.json就按照正常的配置就可以了。
至于插件的上传,就不多描述了,大家直接注册账号发布就可以了。
支持
说了这么多,也希望大家多支持我的组件库 HeyUI组件库
下一步
下一步,我会补充我们HeyUI的ADMIN系统,就是不知道,大家希望有哪一些功能?如果大家有时间,希望大家在给我一些反馈:
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
关于Java锁机制面试官会怎么问
乐观锁与悲观锁 悲观锁:总是假设最坏的情况,每次去拿数据的时候都认为别人会修改,所以每次在拿数据的时候都会上锁,这样别人想拿这个数据就会阻塞直到它拿到锁。传统的关系型数据库里边就用到了很多这种锁机制,比如行锁,表锁等,读锁,写锁等,都是在做操作之前先上锁。再比如Java里面的同步原语synchronized关键字的实现也是悲观锁。 乐观锁:顾名思义,就是很乐观,每次去拿数据的时候都认为别人不会修改,所以不会上锁,但是在更新的时候会判断一下在此期间别人有没有去更新这个数据,可以使用版本号等机制。乐观锁适用于多读的应用类型,这样可以提高吞吐量,像数据库提供的类似于write_condition机制,其实都是提供的乐观锁。在Java中java.util.concurrent.atomic包下面的原子变量类就是使用了乐观锁的一种实现方式CAS实现的。 乐观锁的一种实现方式-CAS(Compare and Swap 比较并交换): 锁存在的问题 Java在JDK1.5之前都是靠synchronized关键字保证同步的,这种通过使用一致的锁定协议来协调对共享状态的访问,可以确保无论哪个线程持有共享...
- 下一篇
[开源] Gio.js -- 一个基于 Three.js 的 Web3D 地球数据可视化库
在这里和大家分享一个和小伙伴们一起开发的开源库 Gio.js 。Gio.js 是一个基于 Three.js 的 web 3D 地球数据可视化的开源组件库。使用 Gio.js 的网页应用开发者,可以快速地以申明的方式创建自定义的 Web3D 数据可视化模型,添加数据,并且将其作为一个组件整合到自己的应用中。 Github 地址: github.com/syt123450/g… 中文官网: giojs.org/index_zh.ht… Codepen 在线例子: codepen.io/collection/… 为什么要开发、使用 Gio.js 这个库的开发是受到 Google 2012 Info 大会上的项目世界武器贩卖可视化的启发,该项目开发者是 Google 员工 Michael Chang。使用 Gio.js 就可以快速构建这种炫酷的 3D 模型,并以此为基础进行深入地开发。Gio.js 具有以下的特点: 易用性 -- 仅使用 4 行 Javascript 即可创建 3D 地球数据可视化模型 定制化 -- 使用 Gio.js 提供的丰富的 API 来创建自定义样式的 3D 地球 现代...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- Linux系统CentOS6、CentOS7手动修改IP地址
- CentOS7,8上快速安装Gitea,搭建Git服务器
- CentOS8安装MyCat,轻松搞定数据库的读写分离、垂直分库、水平分库
- SpringBoot2整合Redis,开启缓存,提高访问速度
- MySQL8.0.19开启GTID主从同步CentOS8
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- CentOS8编译安装MySQL8.0.19
- CentOS8安装Docker,最新的服务器搭配容器使用