前言:首先VScode这个不用说太多了因为前端开发很6的一个IDE,扩展性很棒
初衷:我们自己要有一套自己的标签方法,如果写的全写出来太多也太麻烦,所以可不可以搞个插件,自动联想出我想写的标签,省时,省力,
1,开发插件准备工作
2,如何如何进行插件开发
3,打包
4,发布,维护
1,准备工作
vscode、nodejs、git、微软账号。
执行:安装VSCode插件模板库
npm install -g yo generator-code
至此开发所需的准备已做好。
执行命令: yo code
New Extension (TypeScript) 新扩展名(TypeScript)
New Extension (JavaScript) 新扩展(JavaScript)
New Color Theme 新颜色主题
New Language Support 新语言支持
New Code Snippets 新代码段
New Keymap 新密钥映射
New Extension Pack 新扩展包
New Language Pack (Localization) 新语言包(本地化)
这次我们来讲 Code Snippets
生成完成后我们会得道这个目录
图片标注的是我们编写插件主要的两个文件
snippets: 文件夹为编写代码片段的
package.json:配置文件
官网对代码片段的介绍
Snippets in Visual Studio Code
对于文件夹snippets.json解释
snippet由三部分组成:
prefix:前缀,定义了snippets 从IntelliSense中呼出的关键字;
body: 主体,即模板的主体内容,每个字符串表示一行;
description:说明,会在IntelliSense候选栏中出现。未定义的情况下显示对象名,上例中将会显示Print to console。
例如:
"Business: gk-button": {
"prefix": "gkButton",
"body": [
"<gkButton",
"\t color=\"\"",
"\t size=\"\"",
"\t label=\"\"",
"\t @click=\"\"",
">",
"</gkButton>"
],
"description": "按钮组件:props 参数:tag、color、size、label、disabled、useLock、lockLabel 参数"
}
接下来是package.json的详细介绍这里感谢 小茗同学的支持 https://www.cnblogs.com/liuxianan/p/vscode-plugin-package-json.html
2,编写
3,打包
打包安装依赖 npm install -g vsce
打包命令 :
vsce package
目录生成.vsix文件
4,发布
上传上传有两种方式
1),用vsce的vsce publish工具来发布,但是需要在官网配置Personal Access Token较为繁琐。可以参考官方文档
官网配置
2),简单方便打开微软商店
vscode商店
这里我用的是第二种直接进入谷歌商店进行发布
这三步就可以直接进行插件的更新
发布后 需要几分钟时间上传到微软服务器
实战效果
希望可以对团队开发效率有所提速!~