Vue 3 Snippets Kit

专给 Vue 3 使用的 VS Code snippets 插件。默认使用 v3- 短前缀，覆盖 Vue 3 Composition API、SFC 宏、生命周期、模板指令、Vue Router 和 Pinia 常用写法。

这个插件的设计目标是轻量、可组合、少打扰：功能片段只生成当前代码骨架，不自动插入 import，不替你生成多余 DOM 或默认样式。

Features

• Vue SFC 默认生成最小 <script setup lang="ts"> 和 <template>，样式通过 v3-style 单独插入。
• 功能片段默认不自动生成 import，可通过 v3-import、v3-import-type、v3-import-default 单独插入。
• v3-ref、v3-computed、v3-watch 等脚本片段同时注册到 TypeScript 作用域，可在 <script setup lang="ts"> 中触发。
• .vue 和 .ts 里同名的脚本片段保持同一份内容，便于在 <script setup lang="ts"> 和 .ts 文件里得到一致补全。
• 所有 snippet prefix 统一为 v3-*，输入快且不容易和其它补全冲突。
• 支持 .vue 和 .ts：
  • .vue：组件、核心 API、生命周期、模板、宏、Teleport、Suspense、Transition。
  • .ts：composables、Vue Router、Pinia、InjectionKey、类型 helper。
• snippet body 使用 tabstop 和 placeholder，方便连续补全。

Usage

在 .vue 或 .ts 文件中输入 v3- 开头的前缀并选择补全即可。

示例：

<script setup lang="ts">
const count = ref(0)
</script>

<template>
  <template v-if="condition">
    ...
  </template>
</template>

推荐工作流：

1. 先用 v3-import 或编辑器自动导入补齐依赖。
2. 在 <script setup lang="ts"> 中使用 v3-ref、v3-computed、v3-watch 等脚本片段。
3. 在 <template> 中使用 v3-tpl-if、v3-tpl-for、v3-tpl-model 等模板片段。
4. 需要样式时再用 v3-style 插入 scoped style。

Common Prefixes

Snippet Policy

• v3-import* 是唯一会生成 import ... from ... 的片段。
• 脚本类片段会同时注册到 .vue 和 .ts，确保 <script setup lang="ts"> 里能触发。
• 模板类片段只注册到 .vue，避免在 .ts 文件中出现无效补全。
• 校验脚本会检查同名前缀的 .vue / .ts 内容是否一致，减少维护时改漏。

Development

校验 snippets：

npm test

在 VS Code 中调试：

1. 打开本项目。
2. 按 F5 启动 Extension Development Host。
3. 在 .vue 文件的 <script setup lang="ts"> 中输入 v3-ref、v3-props、v3-watch。
4. 在 .vue 文件的 <template> 中输入 v3-tpl-if、v3-tpl-for。
5. 在 .ts 文件输入 v3-composable、v3-pinia、v3-router。

Packaging

如需打包 VSIX：

npx vsce package