vscode自定义用户代码片段

默认片段解释

{
  "demo": {
    "scope": "javascript,typescript,vue", // 作用域，这里代表在js、ts、vue中都可以触发快捷方式
    "prefix": "vue3-ts", // 快捷触发代号/命令
    "body": [ // 代码块内容，每一行都要用""双引号包裹，如果需要缩进手动按空格
      "<template>$1</template>" // $1,代表你生成的代码块后，你的光标位置，方便编辑
    ],
    "description": "vue3 components" // 表示你对快捷代码块的注释，方便看文件的时候理解
  }
}

实例

• 创建一个 vue3 + ts 的自定义代码片段

{
	"vue3-ts": {
		"scope": "javascript,typescript,vue",
		"prefix": "vue3-ts",
		"body": [
		  "<template>",
	      "",
	      "</template>",
	      "",
	      "<script lang=\"ts\">",
	      "import { defineComponent } from 'vue'",
	      "",
	      "export default defineComponent({",
	      "  name: '',",
	      "  setup () {",
	      "    return {",
	      "    }",
	      "  }",
	      "})",
	      "</script>",
	      "",
	      "<style lang=\"scss\">",
	      "",
	      "</style>"
		],
		"description": "vue3-ts init components"
	}
}

接下来只需要在 .vue 文件中输入 vue3-ts 就会生成自定义代码片段了。