vue3 代码片段

为了实现你要求的 Vue3 + TS + Scoped SCSS 格式，请按照以下步骤配置：

1. 打开配置窗口

1. 在 Cursor 或 VS Code 中按下快捷键：Ctrl + Shift + P。
2. 输入 user snippets，选择 “首选项：配置用户代码片段” (Preferences: Configure User Snippets)。
3. 在弹出的搜索框中输入 vue，并点击打开 vue (Vue) 配置文件。

2. 复制并粘贴以下代码

在大括号 { ... } 中间粘贴这段配置。如果文件是空的，直接全部替换即可：

{
  "Vue 3 Setup TS template": {
    "prefix": "v3",
    "body": [
      "<template>",
      "    <div>",
      "        $1",
      "    </div>",
      "</template>",
      "",
      "<script setup lang=\"ts\">",
      "$0",
      "</script>",
      "",
      "<style scoped lang=\"scss\">",
      "",
      "</style>"
    ],
    "description": "生成 Vue3 + TS + Scoped SCSS 基础模版"
  }
}

3. 如何使用？

1. 新建一个 .vue 文件。
2. 在文件开头输入：v3 (或者是你在 prefix 里定义的任何名字)。
3. 按下 Enter 或 Tab 键。

配置说明：

• prefix: 你触发模版的指令（这里我设为了 v3，你可以改成任何你顺手的）。
• $1: 生成后光标会自动跳到 div 内部，方便你直接写 HTML。
• $0: 按下 Tab 键后，光标会跳到 script 标签内部，方便写逻辑。
• 缩进: 严格按照你要求的 4 空格缩进排列。

记得按 Ctrl + S 保存配置文件，生效非常快！