1. vue2 代码片段

{
  // Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
  // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
  // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
  // used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
  // Placeholders with the same ids are connected.
  // Example:
  // "Print to console": {
  // 	"scope": "javascript,typescript",
  // 	"prefix": "log",
  // 	"body": [
  // 		"console.log('$1');",
  // 		"$2"
  // 	],
  // 	"description": "Log output to console"
  // }
  // 输出console.log()，光标首先定位至$1,然后按tab切换到$2(会生成新行)
  "Print to console": {
    "prefix": "vuet",
    "body": [
      "<template>",
      "  <div>",
      "    $1",
      "  </div>",
      "</template>\n",
      "<script>",
      "export default {",
      "  data() {",
      "    return {\n",
      "    }",
      "  },",
      "  created() {\n",
      "  },",
      "  mounted() {\n",
      "  },",
      "  methods: {\n",
      "  }",
      "}",
      "</script>\n",
      "<style  lang=\"${2:scss}\" scoped>\n",
      "</style>\n"
    ],
    "description": "Create vue template"
  }
}

2. log

{
  "Print to console": {
    "prefix": ".log",
    "body": ["console.log('1=:',$1');", "$2"],
    "description": "Log output to console"
  }
}

3. 快捷方式

imp→	import moduleName from 'module'
imn→	import 'module'
imd→	import { destructuredModule } from 'module'
ime→	import * as alias from 'module'
ima→	import { originalName as aliasName} from 'module'
exp→	export default moduleName
exd→	export { destructuredModule } from 'module'
exa→	export { originalName as aliasName} from 'module'
enf→	export const functionName = (params) => { }
edf→	export default (params) => { }
met→	methodName = (params) => { }
fre→	arrayName.forEach(element => { }
fof→	for(let itemName of objectName { }
fin→	for(let itemName in objectName { }
anfn→	(params) => { }
nfn→	const functionName = (params) => { }
dob→	const {propName} = objectToDescruct
dar→	const [propName] = arrayToDescruct
sti→	setInterval(() => { }, intervalTime
sto→	setTimeout(() => { }, delayTime
prom→	return new Promise((resolve, reject) => {})
cmmb→	comment block //快捷多行注释

4. Vue3ts 基础代码片段

{
  "Vue3 组件模板 (含生命周期)": {
    "prefix": "vue3-lifecycle",
    "body": [
      "<template>",
      "  <div class=\"$1\">$0</div>",
      "</template>",
      "",
      "<script setup lang=\"ts\" name=\"$2\">",
      "",
      "onBeforeMount(() => {",
      "  // fetchData();",
      "});",
      "",
      "onMounted(() => {",
      "  // 组件挂载后执行，DOM操作等",
      "});",
      "",
      "onBeforeUpdate(() => {",
      "  // 组件更新前执行",
      "});",
      "",
      "onBeforeUnmount(() => {",
      "  // cleanup();",
      "});",
      "</script>",
      "",
      "<style scoped lang=\"scss\">",
      "</style>"
    ],
    "description": "Vue3 组件模板，包含常用生命周期钩子"
  }
}

5. react 基础片段

{
  "Print to console": {
    "prefix": "reactb",
    "body": [
      "import { useEffect, useState } from 'react'",
      "export default function $1(props) {",
      "  return (",
      "    <div>",
      "$2",
      "    </div>",
      "  )",
      "}"
    ],
    "description": "Create react base"
  }
}