这里以创建一个输入vh弹出自定义代码片段为例：
image
首先，在设置中打开用户代码片段，也可以快捷键Ctrl+Shift+P打开命令输入 snippet ，也可以点击文件=>首选项=>用户代码片段
image
在这里选择新建，也可以为系统默认的进行配置
image
在默认的情况下，文件内部是这样的
image
Print to console 是代码片段的名称
prefix 字段为代码片段前缀，定义如何从IntelliSense和选项卡完成中选择此代码段
body 即代码片段的主体内容，其中每个字符串表示一行
description 字段为代码片段说明，会在 IntelliSense 候选栏中出现，也就是描述
image
其中
{2}、${3}
用“Tabstops”可以让编辑器的指针在 snippet 内跳转。
使用 2 等指定光标位置。这些数字指定了光标跳转的顺序，按tab键，光标移到下一个指定位置。特别地，$0表示最终光标位置，两个相同的制表符，代表同时进行两个区域的选择。
下面是我的代码片段，可以根据我的进行修改，创建属于你的用户代码片段
{
"doc for html5vue": {
"prefix": "vh",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <title>Document</title>",
" <script src=\"../lib/vue.js\"></script>",
"</head>",
"<body>",
"<div id=\"app\">",
" ${1}",
"</div>",
" <script>",
" var vm = new Vue({",
" el: '#app',",
" data: {",
" ${2}",
" },",
" methods: {",
" ${3}",
" }",
" })",
" </script>",
"</body>",
"</html>"
],
"description": "快速生成htvue"
}
}
生成效果如下：
image
