0%

VScode自定义snippets提高效率

废话不多说,直接上教程

新建自定义vue代码片段

首先打开vscode,依次选择:文件 - 首选项 - 用户代码片段

深度截图_选择区域_20200315140125.png

选择新建全局代码片段文件

深度截图_选择区域_20200315140540.png

文件名自己选择,我这里已经建好了

深度截图_选择区域_20200315140715.png

再次进入用户代码片段,选择刚才新建的双击打开即可编辑

深度截图_选择区域_20200315140826.png

语法

语法十分简单,具体例子如下:

1
2
3
4
5
6
7
8
"vue {": {                          //代码片段名称
"scope": "javascript,html", //支持语言
"prefix": "vue {", //补全指令
"body": [ //主体部分
"{{ $1 }}", //$1表示补全后光标位置,支持多光标
"$2" //$2换行占位
]
}

这样子输入vue {时会自动提示,选中片段即可补全。

深度截图_选择区域_20200315141607.png

深度截图_选择区域_20200315141625.png

自用片段

上一篇文章是vue笔记(1),在学习的之后整理了一些个人自用的补全片段,可以自行稍作修改使用

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
{
"vue {": {
"scope": "javascript,html",
"prefix": "vue {",
"body": [
"{{ $1 }}"
]
},
"v-bind": {
"scope": "javascript,html",
"prefix": "v-bind",
"body": [
"v-bind:$1"
]
},
"v-if": {
"scope": "javascript,html",
"prefix": "v-if",
"body": [
"v-if=\"$1\""
]
},
"v-for": {
"scope": "javascript,html",
"prefix": "v-for",
"body": [
"v-for=\"$1 in $1s\""
]
},
"v-model": {
"scope": "javascript,html",
"prefix": "v-model",
"body": [
"v-model=\"$1 in $1s\""
]
},
"new app": {
"scope": "javascript,html",
"prefix": "new app",
"body": [
"var app_$1 = new Vue({",
" el: '#app-',",
" ",
"});"
]
},
"data": {
"scope": "javascript,html",
"prefix": "data",
"body": [
"data: {",
" $1",
"},",
]
},
"methods": {
"scope": "javascript,html",
"prefix": "methods",
"body": [
"methods: {",
" $1",
"},",
]
},
"vue.component": {
"scope": "javascript,html",
"prefix": "vue.component",
"body": [
"Vue.component('$1-item', {",
" props: ['$1'],",
" template: ''",
"});"
]
},
}
本文结束,感谢您的阅读(*/ω\*)