# v3-snippets

**Repository Path**: L_yx/v3-snippets

## Basic Information

- **Project Name**: v3-snippets
- **Description**: vue3 code snippets

- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-09
- **Last Updated**: 2026-05-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 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-` 开头的前缀并选择补全即可。

示例：

```vue
<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

| Prefix | Description |
| --- | --- |
| `v3-sfc` | 创建最小 Vue 3 SFC |
| `v3-comp` | 创建基础组件 |
| `v3-style` | 插入 `scoped` 样式块 |
| `v3-import` | 插入 named import |
| `v3-import-type` | 插入 type import |
| `v3-import-default` | 插入 default import |
| `v3-ref` | 创建 `ref` 状态 |
| `v3-shallow-ref` | 创建 `shallowRef` 状态 |
| `v3-reactive` | 创建 `reactive` 对象 |
| `v3-computed` | 创建 `computed` |
| `v3-watch` | 创建 `watch` |
| `v3-props` | 创建类型化 `defineProps` |
| `v3-emits` | 创建类型化 `defineEmits` |
| `v3-model` | 创建 `defineModel` |
| `v3-template-ref` | 创建 `useTemplateRef` |
| `v3-composable` | 创建 composable |
| `v3-router` | 创建 `useRouter` 跳转 |
| `v3-route` | 创建 `useRoute` 参数读取 |
| `v3-router-guard` | 创建全局路由守卫 |
| `v3-pinia` | 创建 Pinia setup store |
| `v3-pinia-refs` | 使用 `storeToRefs` |

## Snippet Policy

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

## Development

校验 snippets：

```bash
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：

```bash
npx vsce package
```