在开发时，往往很多地方有固定的格式，有固定的代码结构，比如用的非常之多的，在HTML文件中使用!+tab键快速生成html结。如果在不使用自定义快捷模板生成结构的前提下，我们很有可能会记错单词，漏写代码等...所以我们可以将一下固定的模板抽离成代码片段，让我们能快捷的生成标准结构，而吧更多精力放在代码逻辑上去。
# 一、配置步骤
# 1.1 打开配置面板
首先在Vscode的首选项里点击用户代码片段
之后会出现如下的配置面板
这时候可以选择以下几种方式添加配置：
- 新建全局代码片段配置文件
- 新增项目局部的代码片段配置文件
- 在系统原有的配置文件中添加修改
自己按实际情况选择
进去文件后会有以下内容生成，这是使用说明，可以全部删除
{
// Place your Cpp 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"
// }
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 1.2 配置规则
配置文件为标准的json格式文件
{
"vue-template": {
"prefix": "temp",
"body": [
"XXX",
"YYY"
],
"description": "my vue template"，
...
},
"vh": {
"prefix": "vh",
"body": [
"XXXX"
],
"description": "my vh"，
...
}，
...
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
name：一个配置文件中可以配置多个模板，配置对象中的key是一个标识名作用
prefix：触发器，是用来触发代码片段的
body：定义触发后的内容填充，注意是一个数组类型，每行都需要用双引号修饰，不能使用模板字符串，挺麻烦的
description：在触发时显示，起简要辨识的提示作用
scope: 作用的语言,可多选，如"c,cpp,javascript,typescript"
# 1.3 $定位符
可在body属性中插入$+数字来定义生成模板结构后光标的定位位置
{
"vh": {
"prefix": "vh",
"body": [
"XXXX",
"YYY$0YYY"
],
"description": "my vh"，
...
}，
}
2
3
4
5
6
7
8
9
10
11
如上所示，在填充的内容中插入了一个$0，当生成结构时，光标会默认出现在该位置
${1:Home} 1表示光标第一次所在的位置，Home是默认值，默认第一次会高亮选中Home，方便修改，如果不修改，用TAB可以跳到$2的位置，依次跳转，直到最后光标定位在$0的位置
# 1.4 表达式
在body属性中也可以使用表达式来实现高级需求
for循环
{
"Print to console": {
"scope": "cpp",
"prefix": "for",
"body": [
"for(int ${2:i} = 0; ${2:i} < ${1:n}; ${2:i}++)",
"$3"
],
"description": "Loop"
}
}
2
3
4
5
6
7
8
9
10
11
自定义高级需求，很多可以用插件实现，非特殊需求一般无需自己写
# 1.5 删除代码块
有的时候我们命名错了，或者其他原因，想要删除已有的某个自定义代码块
我们只需要点击进想要删除的代码块配置文件中
在找到他的文件路径，在资源管理器中打开找到删除即可
# 二、常用模板
# 2.1 vue-template
}
"vue-template": {
"prefix": "temp",
"body": [
"<template>",
"\t<div>",
"$0",
"\t</div>",
"</template>",
"",
"<script>",
"export default {",
"",
"}",
"</script>",
"",
"<style lang=\"less\" scoped>",
"",
"</style>",
""
],
"description": "my vue template"
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 2.2 vm实例
{
"create a new vue": {
"scope": "",
"prefix": "vm",
"body": [
"<!-- 开发环境版本，包含了有帮助的命令行警告 -->",
"<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js '></script>",
"<script>",
" var vm = new Vue({",
" el: '$1',", //使用空格缩进，不能使用tab键缩进
"\t\tdata: {$2},", //我们也可以使用\t缩进
"\t\tmethods: {$3}",
"\t})",
"</script>",
],
"description": "快速创建vm实例"
},
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 2.3 清除默认样式
{
"creat a new style":{
"scope": "css",
"prefix": "newStyle",
"body": [
"* {\n\tpadding:0;", //使用\n换行 使用\t缩进
"\tmargin:0;\n}"
],
"description": "关闭默认样式"
}
}
2
3
4
5
6
7
8
9
10
11
效果
{
padding:0;
margin:0;
}
2
3
4