vscode高效之代码片段

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

由于最近一直写vue代码，对于手敲文件模板代码深感麻烦，于是就思考有没有类似html一样输入一个!就能自动生成一些模板代码呢？最后找到了代码片段这么一个功能，特此记录。

---

一、创建代码片段？

1.1 打开设置=》配置用户代码片段

1.2 新建代码片段

• 可选全局也可选项目内
  

1.3 输入代码片段文件名称

1.4 配置代码

• 将下图代码替换为vue3.2的模板代码
  

• vue3.2模板代码片段

{
  "Print to vue3.2": {
  "prefix": "vue3.2",
  "body": [
    "\n",
    "\n",
    "",
  ],
  "description": "vue3.2 output to vue3.2模板"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

1.5 测试

• 新建一个.vue文件，输入vue3.2，右侧就会出来定义的模板片段，此时回车或者tab即可快速生成模板
  

1.6 代码片段语法说明

prefix      :代码片段名字，就是创建这个片段的指令。
body        :你想在页面上输出啥就往这里面加啥，不过得按规矩来哦。　　　
${数字}    	:生成代码后光标的位置，1表示光标开始的序号，按住tab键可切换光标位置。
\n          :换行符。
\           :转义符号。
''          :用来控制代码的缩进。
description :描述,输入创建指令后编辑器显示出提示信息。
1
2
3
4
5
6
7

1.7 一些常用的代码片段，以供参考

{
  "Print to vue2.0": {
  "prefix": "vue2.0",
  "body": [
    "\n",
    "\n",
    "",
  ],
  "description": "vue2.0 output to vue2.0模板"
  }
}
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

{
  "Print to vue3.0": {
  "prefix": "vue3.0",
  "body": [
    "\n",
    "\n",
    "",
  ],
  "description": "vue3.0 output to vue3.0模板"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

二、删除代码片段文件

• 由于已经创建的代码片段文件会存在本地，因此不能在vscode中直接删除，需要按照以下方法才能删除

1.1.打开显示导航痕迹

1.2 在目录下找到需要删除的文件

• 直接删除即可

---

总结

本篇文章主要介绍了vscode中代码片段的创建、使用及删除的方法。下次再见