Vue 3 Snippets

一个为 Visual Studio Code 提供的 Vue 3 代码片段集合，支持 TypeScript、SCSS、Less 和 JSX/TSX 语法。

特性

提供常用 Vue 3 模式的代码片段，包括：

基础功能

• <script setup> 组件结构
• ref 响应式引用
• reactive 响应式对象
• computed 计算属性
• watch 监听器
• 生命周期钩子（onMounted、onUpdated、onUnmounted）
• defineProps & defineEmits 组件通信
• watchEffect 副作用监听
• provide & inject 依赖注入
• toRefs 响应式转换

语言支持

• ✅ JavaScript - 标准 Vue 3 语法
• ✅ TypeScript - 完整类型支持
• ✅ JSX/TSX - React 风格的模板语法
• ✅ SCSS - Sass 预处理器
• ✅ Less - Less 预处理器

使用方法

1. 打开 .vue、.js、.ts、.jsx 或 .tsx 文件
2. 输入代码片段前缀（如 v3-setup）并按 Enter 或 Tab

可用代码片段

基础组件结构

响应式 API

监听器

组件通信

依赖注入

生命周期钩子

JSX/TSX 组件

工具函数

代码示例

TypeScript 组件

<script setup lang="ts">
import { ref } from "vue";

const count = ref<number>(0);
</script>

<template>
  <div>
    <h1>Component</h1>
  </div>
</template>

<style scoped></style>

SCSS 样式组件

<script setup>
import { ref } from "vue";

const count = ref(0);
</script>

<template>
  <div>
    <h1>Component</h1>
  </div>
</template>

<style scoped lang="scss"></style>

JSX 组件

import { defineComponent } from "vue";

export default defineComponent({
  name: "ComponentName",
  setup() {
    return (): JSX.Element => (
      <div>
        <h1>Hello JSX</h1>
      </div>
    );
  },
});

安装方法

从 VS Code 扩展市场安装

1. 打开 VS Code
2. 按 Ctrl+Shift+X 打开扩展面板
3. 搜索 "Vue 3 Snippets"
4. 点击安装

手动安装

1. 下载 .vsix 文件
2. 在 VS Code 中按 Ctrl+Shift+P 打开命令面板
3. 输入 "Extensions: Install from VSIX..."
4. 选择下载的 .vsix 文件

开发测试

1. 在 VS Code 中打开此 vue3-snippets 文件夹
2. 按 F5 打开新的扩展开发主机窗口
3. 在新窗口中创建 .vue、.ts、.tsx 或 .jsx 文件
4. 输入代码片段前缀（如 v3-setup），应该会看到代码片段建议

支持的文件类型

此扩展在以下文件类型中激活：

• .vue - Vue 单文件组件
• .js - JavaScript 文件
• .ts - TypeScript 文件
• .jsx - JSX 文件
• .tsx - TSX 文件

更新日志

v0.0.1

• ✅ 初始版本发布
• ✅ 支持基础 Vue 3 Composition API 代码片段
• ✅ 新增 TypeScript 支持
• ✅ 新增 SCSS/Less 预处理器支持
• ✅ 新增 JSX/TSX 组件支持
• ✅ 完整的类型定义和接口支持

贡献指南

欢迎提交 Issue 和 Pull Request！

开发环境设置

# 克隆仓库
git clone <repository-url>
cd vue3-snippets

# 安装依赖
npm install

# 开发测试
code .
# 按 F5 启动扩展开发主机

添加新的代码片段

1. 编辑 snippets/vue.json 文件
2. 按照现有格式添加新的代码片段
3. 更新 README.md 文档
4. 测试新的代码片段

打包和发布

1. 安装 vsce

npm install -g vsce

2. 打包扩展

vsce package

3. 发布到市场

vsce publish

许可证

MIT License

反馈和支持

如果您遇到任何问题或有功能建议，请：

• 提交 GitHub Issue
• 发送邮件至：your-email@example.com

享受编码！ 🚀