为了跟系统默认的系统区分，建议使用一些特殊的符号开头。如：my_xxx

运作原理

官网：https://code.visualstudio.com/docs/editor/userdefinedsnippets

代码片由四部分组成

  1. prefix：前缀。代码片从 IntelliSense 中呼出的「关键字」
    • 支持 N:1，数组中的每一项都能作为本条代码片的前缀。
  2. scope: 域。代码片适用的「语言模式」
    • 可选，但只有「全局代码片」才能使用。不填代表适用于所有语言模式。
  3. body：主体。代码片的「布局与控制」
    • 每个字符串表示一行。
  4. description：描述。代码片在 IntelliSense 中的「介绍」
    • 可选。未定义的情况下直接显示对象名。

Markdown Snippet

  1. 进入代码片设置文件：通过快捷键Ctrl + Shift + P打开命令窗口（All Command Window），输入snippet，点选首选项：配置用户代码片片段，选择对应的语言
  2. 在设置文件里补全代码片，以 markdown 为例，选中后你将打开一个json文件，自定义对应的快捷方式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
{
// Place your snippets for markdown here. Each snippet is defined under a snippet name and has a prefix, body and 
// description. 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": {
// 	"prefix": "log",
// 	"body": [
// 		"console.log('$1');",
// 		"$2"
// 	],
// 	"description": "Log output to console"
// }

"Print to ```javascript": {
"prefix": "```js",
"body": [
	"```javascript",
	"$1",
	"$2",
	"```",
],
"description": "js代码片段"
},
"Print to ```css": {
"prefix": "```css",
"body": [
	"```css",
	"$1",
	"$2",
	"```",
],
"description": "css代码片段"
},
"Print to ```html": {
"prefix": "```html",
"body": [
	"```html",
	"$1",
	"$2",
	"```",
],
"description": "html代码片段"
},
"Print to |||table": {
"prefix": "|||table",
"body": [
	"| Syntax      | Description |",
	"| ----------- | ----------- |",
	"| Header      | Title       |",
	"| Paragraph   | Text        |",
],
"description": "table代码片段"
}
}
  1. 自定义完成之后还需要在vscode的 settings.json 中配置下：
1
2
3
"[markdown]":  {
"editor.quickSuggestions": true
},

Vue Snippet

HTML5 Vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
{
	// Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. 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": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"Html5-Vue": {
		"prefix": "my_h5vue",
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"en\">\n",
			"<head>",
			"\t<meta charset=\"UTF-8\">",
			"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
			"\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
			"\t<title>Document</title>",
			"\t<script src=\"./vue.js\"></script>",
			"</head>\n",
			"<body>",
			"\t<div id=\"app\">$1</div>\n",
			"\t<script>",
			"\t\tlet vm = new Vue({",
			"\t\t\tel: '#app',",
			"\t\t\tdata: {},",
			"\t\t\tmethods: {}",
			"\t\t});",
			"\t</script>",
			"</body>\n",
			"</html>"
		],
		"description": "html5vue模板"
	}
}

Vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
{
	// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. 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": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"Print to console": {
        "prefix": "my_vue",
        "body": [
            "<template>",
            "",
            "</template>",
            "",
            "<script>",
            "export default {",
            "  name:'',",
            "  data(){",
            "   return {",
            "",
            "   }",
            "  }",
            "}",
            "</script>",
            "",
            "<style scoped>",
            "",
            "</style>",
            "$2"
        ],
        "description": "Vue模板"
    }
}