HeyUI组件库发布vscode插件,PS教程: 如何开发vscode插件?

简介: HeyUI组件库,我们项目组已经用了一年多了。 一直没有对应的组件库插件,我一直耿耿于怀。 所以,抽时间查阅了vscode的插件开发教程,终于把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单文件的基本结构。


6187772a680c157f75be25a0ed46c720e4db5eef

heyui组件库的组件输入提示

heyui组件库有很多组件,如果没有组件的输入提示,基本上,我们都需要手写很多组件的标签,这里我们提供所有的组件库输入提示,以方便程序编写中的效率。

495b28f1a9c85fe732b66f818f438b6a636dc707

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,点击首选项:配置用户代码片段


07d47c96c31eb990760d431f86b6fad205520e9f
由于我是用来做vue文件的输入提示,系统中并没有默认的配置项,我们可以通过新建的方式创建配置项。
caf37afae9903fcd9294d0d64eeb0ede31b693f7
创建vue.code-snippets的文件
45478e5a2486cab8cb6487eefe2c40335382c5c5
系统会自动生成配置文件,你可以通过修改配置文件来达到snippet的功能。

"TestSnippet": {
    "prefix": "TestSnippet",
    "body": [
    	"<TestSnippet v-model=\"$1\"></TestSnippet>"
    ],
    "description": "insert a TestSnippet component"
}


如上段代码所示,我配置了一个TestSnippet组件的输入提示,那在vue代码中应用是这个样子的:
4cd0d2c169da818866cc7d299ccdb7c204d9814f
但是,这个有一个不好的问题,就是在javascript代码中也会出现提示。
b9a10d1c144cba05a6b4e33eebd1263ea6afdfe6
于是我们就要配置scope属性,这里就遇到了一个坑,vue的template代码片段,在vscode官网中,是没有文档的。
而且,对于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系统,就是不知道,大家希望有哪一些功能?如果大家有时间,希望大家在给我一些反馈:


原文发布时间为:2018年07月02日
本文作者: vvpvvp
本文来源:掘金  如需转载请联系原作者
相关文章
|
3月前
|
自然语言处理 API C++
阿里通义推出SmartVscode插件,自然语言控制VS Code,轻松开发应用,核心技术开源!
SmartVscode插件深度解析:自然语言控制VS Code的革命性工具及其开源框架App-Controller
|
29天前
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
55 10
|
2月前
|
前端开发 搜索推荐 C++
Marp 教程:如何在 VSCode 中引入自定义样式和主题
本文介绍了如何在 Marp 中引入自定义样式和主题,使你的幻灯片更加个性化和独特。首先,你需要安装 VSCode 和 Marp 插件,了解 Marp 的基本结构。接着,通过创建自定义 CSS 文件并在 Markdown 文件中引入,实现样式定制。此外,还可以创建和使用自定义主题,以及进行高级自定义,如调整布局、引入自定义字体和定义复杂动画。最后,使用 Marp 的预览功能实时查看效果。
141 0
|
2月前
|
前端开发 C++
Marp 教程:使用 VSCode 编写专业 PPT
Marp 是一款基于 Markdown 的幻灯片制作工具,结合 VSCode 的强大编辑功能,可让你高效地创建专业 PPT。本教程将指导你如何在 VSCode 中安装 Marp 插件、配置主题和样式,并使用 Markdown 语法创建和美化幻灯片。内容包括基本结构、布局、图片与图表插入、表格制作,以及高级功能如动画效果、数学公式和代码高亮。最后,你将学会如何预览和导出幻灯片。
116 0
|
3月前
|
开发工具 C++ git
利用VS Code提升开发效率的五大插件推荐
本文推荐了五款能显著提升开发效率的VS Code插件:ESLint用于代码质量和风格检查;Prettier自动格式化代码;GitLens增强Git功能;Live Server提供前端实时预览;Docker支持容器管理。
|
4月前
|
前端开发 JavaScript 编译器
2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
【10月更文挑战第11天】2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
1117 0
2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
|
4月前
|
网络安全 Docker 容器
VScode远程服务器之远程 远程容器 进行开发(五)
VScode远程服务器之远程 远程容器 进行开发(五)
98 1
|
4月前
|
Kubernetes 网络安全 容器
VScode远程服务器进行开发(三)
VScode远程服务器进行开发(三)
91 0
|
9月前
|
Linux
百度搜索:蓝易云【Linux系统ps命令:查看正在运行的进程】
通过这些简洁的ps命令用法,你可以方便地查看Linux系统中正在运行的进程信息。
103 1
|
9月前
|
存储 监控 Linux
【Shell 命令集合 系统管理 】⭐⭐⭐Linux 查看当前正在运行的进程信息 ps命令 使用指南
【Shell 命令集合 系统管理 】⭐⭐⭐Linux 查看当前正在运行的进程信息 ps命令 使用指南
158 0

热门文章

最新文章