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