Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>BobCodeSnippersNew to Visual Studio Code? Get it now.
BobCodeSnippers

BobCodeSnippers

chenbo

|
11 installs
| (0) | Free
代码片段管理插件
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

代码片段保存复用插件

介绍

代码片段保存复用 vscode 插件,支持代码提示自动补全代码片段,类似于windwos的剪贴板

一、准备工作

1、保存代码片段

  • 快捷键(ctrl + alt + s)

将选中的代码保存为代码片段,可以自己命名

2、插入代码片段

  • 快捷键(ctrl + alt + i)

选择已保存的代码片段插入到当前代码

3、删除代码片段

  • 快捷键(ctrl + alt + d)

选择需要删除的代码片段进行删除

4、代码片段自动补全

根据已保存的代码片段生成自动补全提示,快速将已保存的代码片段插入当前代码中。

5、代码片段补全语言类型

  • 快捷键(ctrl + alt + e)

配置代码补全语言标识符,即需要触发代码片段补全的语言类型,默认为: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:插件的主文件。

插件调试必备环境

  • npm i @vscode/vsce -g

打包命令

  • vsce package

插件市场

📌发布

这里是手动发布的流程。

  1. 打开vscode marketplace
  2. 点击右上角的Publish extensions
  3. 创建一个publisher
  4. 填写Name、ID、Description,上传Logo
  5. 点击New extension,选择Visual Studio Code,将打包的vsix文件上传。
  6. 等五分钟左右,就可以在插件市场搜到自己的插件了!

插件市场发布文档

  • 文档教学

开发 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= '
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
  • Your Privacy Choices
  • Consumer Health Privacy
© 2026 Microsoft