代码片段保存复用插件
介绍
代码片段保存复用 vscode 插件,支持代码提示自动补全代码片段,类似于windwos的剪贴板
一、准备工作
1、保存代码片段
将选中的代码保存为代码片段,可以自己命名
2、插入代码片段
选择已保存的代码片段插入到当前代码
3、删除代码片段
选择需要删除的代码片段进行删除
4、代码片段自动补全
根据已保存的代码片段生成自动补全提示,快速将已保存的代码片段插入当前代码中。
5、代码片段补全语言类型
配置代码补全语言标识符,即需要触发代码片段补全的语言类型,默认为:html,css,javascript,js,typescript,ts,json,svg,less,sass,scss,vue,jsx,tsx,bat,sh,md,kt,在配置好的这些语言类型文件编辑中才会触发代码片段补全功能
插件打包
开发插件必备脚手架
- 创建一个VsCode的插件项目,将会用到yo和generate-code。,同时安装 yo 和 generate-code 脚手架
- npm i yo generate-code @vscode/vsce -g
将会依次问你七个问题。
- 选择你想要创建的插件类型。会根据你选择的类型,下载对应的模板。更多模板
- 插件的名称。
- 插件的唯一标识id。
- 插件的描述。
- 是否需要git。
- 构建工具是否使用webpack。
- 选择包管理工具。
插件目录结构
当你创建Extension TypeScript项目后,你将看到以下目录。
.vscode: 里面的文件是用来测试插件或者测试代码的一些文件。
node_modules: 第三方依赖。
src/test:测试文件。
src/extension.ts:插件的主文件。
插件调试必备环境
打包命令
插件市场
📌发布
这里是手动发布的流程。
- 打开vscode marketplace
- 点击右上角的Publish extensions
- 创建一个publisher
- 填写
Name、ID、Description,上传Logo
- 点击
New extension,选择Visual Studio Code,将打包的vsix文件上传。
- 等五分钟左右,就可以在插件市场搜到自己的插件了!
插件市场发布文档
开发 tag 功能标签
官方指令
vt: 'v-text= '
vh: 'v-html= '
vsh: 'v-show= '
vi: 'v-if= '
ve: 'v-else= '
vei: 'v-else-if= '
vf: 'v-for="item in list$1" :key="item.id"'
vo: 'v-on= '
vb: 'v-bind= '
vm: 'v-model= '
vs: 'v-slot= '
vpre: 'v-pre= '
vc: 'v-cloak= '
vonce: 'v-once= '
vme: 'v-memo= '
vis: 'v-is= '
自定义指令
vpermission: 'v-permission= '
vcopy: 'v-copy= '
vlongpress: 'v-longpress= '
vdebounce: 'v-debounce= '
vemoji: 'v-emoji= '
vlazy: 'v-lazy= '
vdraggable: 'v-draggable= '
vdrag: 'v-drag= '
vscreenfull: 'v-screenfull= '
vellipsis: 'v-ellipsis= '
vbacktop: 'v-backtop= '
vempty: 'v-empty= '
vbadge: 'v-badge= '
vresize: 'v-resize= '