需求

vscode vue 中增加 code snippet，方便使用。

解决

插件

在 vscode 中，插件里面搜索 vue 3 snippets, 然后安装即可。

添加 snippet

  1. 点击左下设置按钮，选择 user snippets
  2. 输入文件名, 比如 vue.json.code-snippets
  3. 输入 snippet, 比如:
{
      // Place your vue_electron_qianfeng workspace 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"
      // }


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

  "vue3 template": {
    "prefix": "vt",
    "body": [
      "<script setup>",
      "  import { ref } from 'vue'",
      "  $1",
      "</script>",
      "",
      "<template>",
      "  <div>",
      "    $2",
      "  </div>",
      "</template>",
      "",
      "<style lang=\"css\">",
      "  $3",
      "</style>",
      "$0",
    ],
  },

  "arrow function": {
    "prefix": "af",
    "body": [
      "() => {",
      "  $1",
      "}"
    ]
  }

}

参考