VSCode 代码片段

提升开发效率的 VSCode 自定义代码片段集合，支持 Vue 3、TypeScript 等。

📋 完整配置文件

点击查看完整 JSON 配置

json

{
  "import-default": {
    "scope": "javascript,typescript,vue",
    "prefix": "imd",
    "body": ["import { $0 } from \"$1\""],
    "description": "Import with double quotes"
  },
  "import-type": {
    "scope": "javascript,typescript,vue",
    "prefix": "imdt",
    "body": ["import type { $0 } from \"$1\""],
    "description": "Import type with double quotes"
  },
  "Inline Comment": {
    "scope": "typescript,javascript,typescriptreact",
    "prefix": "icm",
    "body": [
      "/** $1 */",
    ],
    "description": "Add inline comment"
  },
  "Add Comment": {
    "scope": "typescript,javascript,typescriptreact",
    "prefix": "cmt",
    "body": [
      "/**",
      " * @description ${1:}",
      " * @param ${2:parameter}",
      " * @param ${3:parameter}",
      " * @param ${4:parameter}",
      " * @returns ${5:}",
      " */"
    ],
    "description": "Add function comment with params"
  },
  "Add divider": {
    "scope": "typescript,javascript,typescriptreact",
    "prefix": "ddr1",
    "body": [
      "",
      "/* --------------------- $1 Start ------------------------ */",
      "",
      "$0",
      "",
      "/* --------------------- $1 End ------------------------ */",
      ""
    ],
    "description": "Add divider to each partial code"
  },
  "添加代码说明注释": {
    "scope": "typescript,javascript,typescriptreact",
    "prefix": "desc",
    "body": [
      "/**",
      " * $0",
      " */",
    ],
    "description": "Add description for function"
  },
  "生成 import.meta.globa 表达式": {
    "scope": "typescript,javascript,typescriptreact",
    "prefix": "glob",
    "body": [
      "const $1 = import.meta.glob(['$2'], {",
      "\teager: true",
      "}) as Record<string, { default: Component }>;"
    ],
    "description": "生成 import.meta.globa 表达式"
  },
  "新增 .vue 基本模版": {
    "isFileTemplate": true,
    "scope": "vue,typescriptreact",
    "prefix": "vsetup",
    "body": [
      "<template>",
      "\t<div class=\"${TM_FILENAME_BASE/([A-Z])/-${0:/downcase}/g}\">",
      "",
      "\t</div>",
      "</template>",
      "",
      "<script setup>",
      "import { ref, computed, watch } from 'vue';",
      "",
      "$1",
      "",
      "</script>",
      "",
      "<style lang=\"less\">",
      ".${TM_FILENAME_BASE/([A-Z])/-${0:/downcase}/g} {",
      "    box-sizing: border-box;",
      "}",
      "</style>",
      ""
    ],
    "description": "新增 .vue 基本模版"
  },
  "新增 .vue 基本模版 ts": {
    "isFileTemplate": true,
    "scope": "vue,typescriptreact",
    "prefix": "vsetupts",
    "body": [
      "<template>",
      "\t<div class=\"${TM_FILENAME_BASE/([A-Z])/-${0:/downcase}/g}\">",
      "",
      "\t</div>",
      "</template>",
      "",
      "<script setup lang=\"ts\">",
      "",
      "$1",
      "",
      "</script>",
      "",
      "<style lang=\"less\">",
      ".${TM_FILENAME_BASE/([A-Z])/-${0:/downcase}/g} {",
      "}",
      "</style>",
      ""
    ],
    "description": "新增 .vue 基本模版"
  },
  "箭头函数": {
    "scope": "typescript,javascript,typescriptreact",
    "prefix": "afn",
    "body": [
      "const ${1:fn} = (${2:params}) => {",
      "    $0",
      "}"
    ],
    "description": "箭头函数"
  },
  "匿名箭头函数": {
    "scope": "typescript,javascript,typescriptreact",
    "prefix": "aafn",
    "body": [
      "($1) => {",
      "\t$0",
      "}"
    ]
  },
  "异步箭头函数": {
    "scope": "typescript,javascript,typescriptreact",
    "prefix": "asfn",
    "body": [
      "const ${1:fn} = async (${2:params}) => {",
      "    $0",
      "}"
    ],
    "description": "箭头函数"
  },
  "使用某个store": {
    "scope": "typescript,javascript,typescriptreact",
    "prefix": "ustore",
    "body": [
      "const ${1}Store = use${1/(.*)/${1:/capitalize}/}Store();"
    ],
    "description": "使用某个store"
  },
  "扩展对象数组中的对象": {
    "scope": "typescript,javascript,typescriptreact",
    "prefix": "extmap",
    "body": [
      "${1:arr}.map((v) => ({ ...v, ${2:key}: ${3:value}, }));"
    ]
  },
  "解构 store": {
    "scope": "typescript,javascript,typescriptreact",
    "prefix": "dstore",
    "body": [
      "const { $0 } = use${1/(.*)/${1:/capitalize}/}Store();"
    ]
  },
  "解构对象获取值": {
    "scope": "typescript,javascript,typescriptreact",
    "prefix": "dob",
    "body": [
      "const { $0 } = ${1:object};"
    ]
  },
  "解构数组获取第一项": {
    "scope": "typescript,javascript,typescriptreact",
    "prefix": "dar",
    "body": [
      "const [ $0 ] = ${1:array};"
    ]
  },
  "await 异步函数并结构结果": {
    "scope": "typescript,javascript,typescriptreact",
    "prefix": "dawait",
    "body": [
      "const { $0 } = await ${1:fn}(${2:param});"
    ]
  },
    "scope": "typescript,javascript,typescriptreact",
    "prefix": "ceq",
    "body": [
      "const $1 = $0;"
    ]
  },
  "async fn try finally": {
    "prefix": "atf",
    "body": [
      "const ${1:name} = async (${2:params}) => {",
      "\ttry {",
      "\t\t$3",
      "\t} finally {",
      "\t\t$4",
      "\t}",
      "};"
    ],
    "description": "async fn try finally"
  }

}

基本信息

配置文件位置: %APPDATA%\Code\User\snippets\ (Windows) 或 ~/.config/Code/User/snippets/ (Linux/Mac)
文件格式: JSON
适用语言: Vue, TypeScript, JavaScript

如何使用

1. 创建代码片段文件

在 VSCode 中：

按 Ctrl+Shift+P (Windows) 或 Cmd+Shift+P (Mac)
输入 Snippets: Configure User Snippets
选择 New Global Snippets file...
输入文件名（如 vue-snippets）

2. 添加代码片段

将下面的代码片段复制到创建的 JSON 文件中。

3. 使用代码片段

在编辑器中输入 prefix（触发词），按 Tab 键即可展开。

📝 注释相关

行内注释

触发词: icm

适用: TypeScript, JavaScript

typescript

/** 这是一个行内注释 */

配置代码

json

{
  "Inline Comment": {
    "scope": "typescript,javascript,typescriptreact",
    "prefix": "icm",
    "body": [
      "/** $1 */",
    ],
    "description": "Add inline comment"
  }
}

函数注释

触发词: cmt

适用: TypeScript, JavaScript

typescript

/**
 * @description 函数描述
 * @param parameter 参数1
 * @param parameter 参数2
 * @param parameter 参数3
 * @returns 返回值描述
 */

配置代码

json

{
  "Add Comment": {
    "scope": "typescript,javascript,typescriptreact",
    "prefix": "cmt",
    "body": [
      "/**",
      " * @description ${1:}",
      " * @param ${2:parameter}",
      " * @param ${3:parameter}",
      " * @param ${4:parameter}",
      " * @returns ${5:}",
      " */"
    ],
    "description": "Add function comment with params"
  }
}

代码说明注释

触发词: desc

适用: TypeScript, JavaScript

typescript

/**
 * 代码说明
 */

配置代码

json

{
  "添加代码说明注释": {
    "scope": "typescript,javascript,typescriptreact",
    "prefix": "desc",
    "body": [
      "/**",
      " * $0",
      " */",
    ],
    "description": "Add description for function"
  }
}

代码分隔符

触发词: ddr1

适用: TypeScript, JavaScript

typescript

/* --------------------- 模块名 Start ------------------------ */

// 代码内容

/* --------------------- 模块名 End ------------------------ */

配置代码

json

{
  "Add divider": {
    "scope": "typescript,javascript,typescriptreact",
    "prefix": "ddr1",
    "body": [
      "",
      "/* --------------------- $1 Start ------------------------ */",
      "",
      "$0",
      "",
      "/* --------------------- $1 End ------------------------ */",
      ""
    ],
    "description": "Add divider to each partial code"
  }
}

🎨 Vue 组件模板

Vue 3 基础模板

触发词: vsetup

适用: Vue

vue

<template>
  <div class="FILENAME-LOWER">

  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';


</script>

<style lang="less">
.FILENAME-LOWER {
    box-sizing: border-box;
}
</style>

配置代码

json

{
  "新增 .vue 基本模版": {
    "isFileTemplate": true,
    "scope": "vue,typescriptreact",
    "prefix": "vsetup",
    "body": [
      "<template>",
      "\t<div class=\"${TM_FILENAME_BASE/([A-Z])/-${0:/downcase}/g}\">",
      "",
      "\t</div>",
      "</template>",
      "",
      "<script setup>",
      "import { ref, computed, watch } from 'vue';",
      "",
      "$2",
      "",
      "</script>",
      "",
      "<style lang=\"less\">",
      ".${TM_FILENAME_BASE/([A-Z])/-${0:/downcase}/g} {",
      "    box-sizing: border-box;",
      "}",
      "</style>",
      ""
    ],
    "description": "新增 .vue 基本模版"
  }
}

Vue 3 TypeScript 模板

触发词: vsetupts

适用: Vue

vue

<template>
  <div class="FILENAME-LOWER">

  </div>
</template>

<script setup lang="ts">


</script>

<style lang="less">
.FILENAME-LOWER {
}
</style>

配置代码

json

{
  "新增 .vue 基本模版 ts": {
    "isFileTemplate": true,
    "scope": "vue,typescriptreact",
    "prefix": "vsetupts",
    "body": [
      "<template>",
      "\t<div class=\"${TM_FILENAME_BASE/([A-Z])/-${0:/downcase}/g}\">",
      "",
      "\t</div>",
      "</template>",
      "",
      "<script setup lang=\"ts\">",
      "",
      "$1",
      "",
      "</script>",
      "",
      "<style lang=\"less\">",
      ".${TM_FILENAME_BASE/([A-Z])/-${0:/downcase}/g} {",
      "}",
      "</style>",
      ""
    ],
    "description": "新增 .vue 基本模版"
  }
}

📥 导入语句

导入模块

触发词: imd

适用: TypeScript, JavaScript, Vue

typescript

import { Component } from "vue"

配置代码

json

{
  "import-default": {
    "scope": "javascript,typescript,vue",
    "prefix": "imd",
    "body": ["import { $0 } from \"$1\""],
    "description": "Import with double quotes"
  }
}

导入类型

触发词: imdt

适用: TypeScript, JavaScript, Vue

typescript

import type { User } from "@/types"

配置代码

json

{
  "import-type": {
    "scope": "javascript,typescript,vue",
    "prefix": "imdt",
    "body": ["import type { $0 } from \"$1\""],
    "description": "Import type with double quotes"
  }
}

⚡ 函数快捷方式

箭头函数

触发词: afn

适用: TypeScript, JavaScript

typescript

const fn = (params) => {
    
}

配置代码

json

{
  "箭头函数": {
    "scope": "typescript,javascript,typescriptreact",
    "prefix": "afn",
    "body": [
      "const ${1:fn} = (${2:params}) => {",
      "    $0",
      "}"
    ],
    "description": "箭头函数"
  }
}

匿名箭头函数

触发词: aafn

适用: TypeScript, JavaScript

typescript

(params) => {
    
}

配置代码

json

{
  "匿名箭头函数": {
    "scope": "typescript,javascript,typescriptreact",
    "prefix": "aafn",
    "body": [
      "($1) => {",
      "\t$0",
      "}"
    ]
  }
}

异步箭头函数

触发词: asfn

适用: TypeScript, JavaScript

typescript

const fn = async (params) => {
    
}

配置代码

json

{
  "异步箭头函数": {
    "scope": "typescript,javascript,typescriptreact",
    "prefix": "asfn",
    "body": [
      "const ${1:fn} = async (${2:params}) => {",
      "    $0",
      "}"
    ],
    "description": "箭头函数"
  }
}

async try finally

触发词: atf

适用: TypeScript, JavaScript

typescript

const name = async (params) => {
    try {
        
    } finally {
        
    }
};

配置代码

json

{
  "async fn try finally": {
    "prefix": "atf",
    "body": [
      "const ${1:name} = async (${2:params}) => {",
      "\ttry {",
      "\t\t$3",
      "\t} finally {",
      "\t\t$4",
      "\t}",
      "};"
    ],
    "description": "async fn try finally"
  }
}

🏪 Pinia Store 相关

使用 Store

触发词: ustore

适用: TypeScript, JavaScript

typescript

const userStore = useUserStore();

配置代码

json

{
  "使用某个store": {
    "scope": "typescript,javascript,typescriptreact",
    "prefix": "ustore",
    "body": [
      "const ${1}Store = use${1/(.*)/${1:/capitalize}/}Store();"
    ],
    "description": "使用某个store"
  }
}

解构 Store

触发词: dstore

适用: TypeScript, JavaScript

typescript

const { state, action } = useUserStore();

配置代码

json

{
  "解构 store": {
    "scope": "typescript,javascript,typescriptreact",
    "prefix": "dstore",
    "body": [
      "const { $0 } = use${1/(.*)/${1:/capitalize}/}Store();"
    ]
  }
}

📦 解构与赋值

解构对象

触发词: dob

适用: TypeScript, JavaScript

typescript

const { prop1, prop2 } = object;

配置代码

json

{
  "解构对象获取值": {
    "scope": "typescript,javascript,typescriptreact",
    "prefix": "dob",
    "body": [
      "const { $0 } = ${1:object};"
    ]
  }
}

解构数组

触发词: dar

适用: TypeScript, JavaScript

typescript

const [ item ] = array;

配置代码

json

{
  "解构数组获取第一项": {
    "scope": "typescript,javascript,typescriptreact",
    "prefix": "dar",
    "body": [
      "const [ $0 ] = ${1:array};"
    ]
  }
}

await 并解构

触发词: dawait

适用: TypeScript, JavaScript

typescript

const { data, error } = await fn(param);

配置代码

json

{
  "await 异步函数并结构结果": {
    "scope": "typescript,javascript,typescriptreact",
    "prefix": "dawait",
    "body": [
      "const { $0 } = await ${1:fn}(${2:param});"
    ]
  }
}

const 赋值

触发词: ceq

适用: TypeScript, JavaScript

typescript

const variable = value;

配置代码

json

{
  "const 赋值": {
    "scope": "typescript,javascript,typescriptreact",
    "prefix": "ceq",
    "body": [
      "const $1 = $0;"
    ]
  }
}

🔄 数组操作

扩展对象数组

触发词: extmap

适用: TypeScript, JavaScript

typescript

arr.map((v) => ({ ...v, key: value, }));

配置代码

json

{
  "扩展对象数组中的对象": {
    "scope": "typescript,javascript,typescriptreact",
    "prefix": "extmap",
    "body": [
      "${1:arr}.map((v) => ({ ...v, ${2:key}: ${3:value}, }));"
    ]
  }
}

🌐 Vite 相关

import.meta.glob

触发词: glob

适用: TypeScript, JavaScript

typescript

const modules = import.meta.glob(['./modules/*.ts'], {
    eager: true
}) as Record<string, { default: Component }>;

配置代码

json

{
  "生成 import.meta.globa 表达式": {
    "scope": "typescript,javascript,typescriptreact",
    "prefix": "glob",
    "body": [
      "const $1 = import.meta.glob(['$2'], {",
      "\teager: true",
      "}) as Record<string, { default: Component }>;"
    ],
    "description": "生成 import.meta.globa 表达式"
  }
}

💡 使用技巧

基础技巧

1. 快速触发

输入 prefix 后按 Tab 键即可展开代码片段。

typescript

// 输入 afn 然后按 Tab
const fn = (params) => {
    
}

2. 占位符（Tabstops）

使用 $1、$2 等数字占位符，按 Tab 键在占位符之间跳转。

json

{
  "body": [
    "const ${1:fn} = (${2:params}) => {",
    "    $0",
    "}"
  ]
}

$1、$2 - 按顺序跳转的占位符
$0 - 最终光标位置
${1:defaultValue} - 带默认值的占位符

3. 多光标编辑

相同编号的占位符会同时编辑：

json

{
  "body": [
    "<div class=\"$1\">",
    "</div>",
    "",
    ".$1 {",
    "}"
  ]
}

输入类名时，两处 $1 会同步修改。

4. 作用域限制

通过 scope 字段限制代码片段的适用语言：

json

{
  "scope": "javascript,typescript,vue",
  "prefix": "imd"
}

支持的语言标识符：

javascript / typescript
vue / html / css
json / markdown
python / go / rust

5. 选择项（Choice）

使用 ${1|option1,option2,option3|} 提供选择列表：

json

{
  "body": [
    "console.${1|log,warn,error,info|}('$2');"
  ]
}

高阶技巧

1. 变量（Variables）

使用预定义变量获取上下文信息：

文件相关变量：

json

{
  "body": [
    "// File: $TM_FILENAME",
    "// Path: $TM_FILEPATH",
    "// Directory: $TM_DIRECTORY"
  ]
}

日期时间变量：

json

{
  "body": [
    "// Created: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
    "// Time: $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND"
  ]
}

用户信息变量：

json

{
  "body": [
    "// Author: $USER",
    "// Workspace: $WORKSPACE_NAME"
  ]
}

常用变量列表：

$TM_FILENAME - 当前文件名
$TM_FILENAME_BASE - 不含扩展名的文件名
$TM_DIRECTORY - 当前文件所在目录
$TM_FILEPATH - 当前文件完整路径
$CLIPBOARD - 剪贴板内容
$WORKSPACE_NAME - 工作区名称
$CURRENT_YEAR / $CURRENT_MONTH / $CURRENT_DATE - 当前日期
$CURRENT_HOUR / $CURRENT_MINUTE / $CURRENT_SECOND - 当前时间
$BLOCK_COMMENT_START / $BLOCK_COMMENT_END - 块注释符号
$LINE_COMMENT - 行注释符号

2. 变量转换（Variable Transforms）

使用正则表达式转换变量值：

语法：${变量名/正则表达式/替换文本/选项}

转换文件名为 kebab-case：

json

{
  "body": [
    "class=\"${TM_FILENAME_BASE/([A-Z])/-${0:/downcase}/g}\""
  ]
}

示例：UserProfile.vue → user-profile

转换为 PascalCase：

json

{
  "body": [
    "export class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}"
  ]
}

转换选项：

/upcase - 转大写
/downcase - 转小写
/capitalize - 首字母大写
/camelcase - 驼峰命名
/pascalcase - 帕斯卡命名

捕获组引用：

json

{
  "body": [
    "${TM_FILENAME_BASE/(.+)\\.(.+)/$1-component.$2/}"
  ]
}

$0 - 整个匹配
$1, $2 - 捕获组

3. 占位符转换（Placeholder Transforms）

对占位符内容进行转换：

json

{
  "body": [
    "const ${1:user}Store = use${1/(.*)/${1:/capitalize}/}Store();"
  ]
}

输入 user 时自动生成 useUserStore()。

实际应用示例：

json

{
  "body": [
    "import { ${1:Component} } from '@/components/${1/(.*)/\\L$1/}';"
  ]
}

输入 Button 时生成：import { Button } from '@/components/button';

4. 条件插入

使用 ${1:+if} 和 ${1:-else} 实现条件插入：

json

{
  "body": [
    "function ${1:name}(${2:params})${2:+ {",
    "    $0",
    "\\}}${2:-;}"
  ]
}

5. 嵌套占位符

占位符可以嵌套使用：

json

{
  "body": [
    "const ${1:${TM_FILENAME_BASE/(.*)/${1:/camelcase}/}} = ${2:value};"
  ]
}

6. 多行字符串处理

使用 \n 或数组形式处理多行：

json

{
  "body": [
    "/**",
    " * @description ${1:Description}",
    " * @param {${2:type}} ${3:param} - ${4:param description}",
    " * @returns {${5:type}} ${6:return description}",
    " */"
  ]
}

7. 特殊字符转义

需要转义的字符：

\\ - 反斜杠
\$ - 美元符号
\} - 右花括号
\" - 双引号（在 JSON 中）

json

{
  "body": [
    "const regex = /\\${1:pattern}/g;"
  ]
}

8. 文件模板（File Template）

使用 isFileTemplate 创建新文件时自动填充：

json

{
  "isFileTemplate": true,
  "prefix": "vsetupts",
  "body": [
    "<template>",
    "  <div class=\"${TM_FILENAME_BASE/([A-Z])/-${0:/downcase}/g}\">",
    "  </div>",
    "</template>"
  ]
}

实战技巧

1. 动态导入路径

json

{
  "prefix": "impd",
  "body": [
    "import ${1:Component} from '@/components/${1/(.*)/\\L$1/}';"
  ]
}

2. 自动生成注释

json

{
  "prefix": "header",
  "body": [
    "/**",
    " * @file ${TM_FILENAME}",
    " * @author ${USER}",
    " * @date ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}",
    " * @description ${1:File description}",
    " */"
  ]
}

3. 响应式数据声明

json

{
  "prefix": "vref",
  "body": [
    "const ${1:name} = ref<${2:type}>(${3:initialValue});"
  ]
}

4. API 请求模板

json

{
  "prefix": "apifn",
  "body": [
    "export const ${1:functionName} = async (${2:params}) => {",
    "  try {",
    "    const { data } = await axios.${3|get,post,put,delete|}('${4:url}'${2:+, $2});",
    "    return data;",
    "  } catch (error) {",
    "    console.error('${1:functionName} error:', error);",
    "    throw error;",
    "  }",
    "};"
  ]
}

5. 组件 Props 定义

json

{
  "prefix": "vprops",
  "body": [
    "interface ${1:${TM_FILENAME_BASE}}Props {",
    "  ${2:propName}: ${3:type};",
    "}",
    "",
    "const props = defineProps<${1:${TM_FILENAME_BASE}}Props>();"
  ]
}

调试技巧

1. 查看已安装的代码片段

按 Ctrl+Shift+P，输入 Insert Snippet 查看所有可用代码片段。

2. 测试正则表达式

使用在线工具测试转换规则：

3. 查看变量值

创建测试代码片段输出所有变量：

json

{
  "prefix": "testvar",
  "body": [
    "Filename: $TM_FILENAME",
    "Base: $TM_FILENAME_BASE",
    "Date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
    "User: $USER"
  ]
}

📚 相关资源

🎯 推荐实践

按功能分类: 将不同类型的代码片段分组管理
使用有意义的 prefix: 选择易记且不冲突的触发词
添加描述: 为每个代码片段添加清晰的 description
定期更新: 根据实际使用情况调整和优化代码片段
团队共享: 将常用代码片段分享给团队成员

⚠️ 注意事项

避免 prefix 冲突: 确保自定义的 prefix 不与内置代码片段冲突
合理使用占位符: 不要设置过多占位符，保持简洁
注意作用域: 正确设置 scope 避免在错误的文件类型中触发
备份配置: 定期备份代码片段配置文件
测试验证: 添加新代码片段后及时测试是否正常工作

VSCode 代码片段 ​

📋 完整配置文件 ​

基本信息 ​

如何使用 ​

1. 创建代码片段文件 ​

2. 添加代码片段 ​

3. 使用代码片段 ​

📝 注释相关 ​

行内注释 ​

函数注释 ​

代码说明注释 ​

代码分隔符 ​

🎨 Vue 组件模板 ​

Vue 3 基础模板 ​

Vue 3 TypeScript 模板 ​

📥 导入语句 ​

导入模块 ​

导入类型 ​

⚡ 函数快捷方式 ​

箭头函数 ​

匿名箭头函数 ​

异步箭头函数 ​

async try finally ​

🏪 Pinia Store 相关 ​

使用 Store ​

解构 Store ​

📦 解构与赋值 ​

解构对象 ​

解构数组 ​

await 并解构 ​

const 赋值 ​

🔄 数组操作 ​

扩展对象数组 ​

🌐 Vite 相关 ​

import.meta.glob ​

💡 使用技巧 ​

基础技巧 ​

1. 快速触发 ​

2. 占位符（Tabstops） ​

3. 多光标编辑 ​

4. 作用域限制 ​

5. 选择项（Choice） ​

高阶技巧 ​

1. 变量（Variables） ​

2. 变量转换（Variable Transforms） ​

3. 占位符转换（Placeholder Transforms） ​

4. 条件插入 ​

5. 嵌套占位符 ​

6. 多行字符串处理 ​

7. 特殊字符转义 ​

8. 文件模板（File Template） ​

实战技巧 ​

1. 动态导入路径 ​

2. 自动生成注释 ​

3. 响应式数据声明 ​

4. API 请求模板 ​

5. 组件 Props 定义 ​

调试技巧 ​

1. 查看已安装的代码片段 ​

2. 测试正则表达式 ​

3. 查看变量值 ​

📚 相关资源 ​

🎯 推荐实践 ​

⚠️ 注意事项 ​

VSCode 代码片段

📋 完整配置文件

基本信息

如何使用

1. 创建代码片段文件

2. 添加代码片段

3. 使用代码片段

📝 注释相关

行内注释

函数注释

代码说明注释

代码分隔符

🎨 Vue 组件模板

Vue 3 基础模板

Vue 3 TypeScript 模板

📥 导入语句

导入模块

导入类型

⚡ 函数快捷方式

箭头函数

匿名箭头函数

异步箭头函数

async try finally

🏪 Pinia Store 相关

使用 Store

解构 Store

📦 解构与赋值

解构对象

解构数组

await 并解构

const 赋值

🔄 数组操作

扩展对象数组

🌐 Vite 相关

import.meta.glob

💡 使用技巧

基础技巧

1. 快速触发

2. 占位符（Tabstops）

3. 多光标编辑

4. 作用域限制

5. 选择项（Choice）

高阶技巧

1. 变量（Variables）

2. 变量转换（Variable Transforms）

3. 占位符转换（Placeholder Transforms）

4. 条件插入

5. 嵌套占位符

6. 多行字符串处理

7. 特殊字符转义

8. 文件模板（File Template）

实战技巧

1. 动态导入路径

2. 自动生成注释

3. 响应式数据声明

4. API 请求模板

5. 组件 Props 定义

调试技巧

1. 查看已安装的代码片段

2. 测试正则表达式

3. 查看变量值

📚 相关资源

🎯 推荐实践

⚠️ 注意事项