VSCode代码片段的编写

前言

我们在开发项目的时候，为了快速开发，减少不必要的时间会安装相关的框架插件来帮助自己提高开发效率。会依靠使用相关插件的IDEA智能提示，但是呢我们需要去学习记忆触发智能提示的快捷键或是前缀。

VScode作为一个轻量级的编辑器，当然也提供了自定义某种代码片段的编写。接下来的内容就是记录下VSCode代码片段的编写和使用，达到我们可以为某个项目去编写自己的代码片段 从而也提高平时的开发效率的效果。

快速建立一个代码片段

点击VSCode的文件 ->首选项 ->代码片段 就返回弹出一个类似下面的选项供你选择

我们可以为你的VSCode编辑器就建立全局的代码片段，也可以为某个项目建立代码片段。当然我比较支持为某个项目去建立代码片段。

当我们选择建立全局代码片段还是某个工作区的代码片段后，VSCode会让我们输入代码片段的文件名。并且会在.vscode文件夹下去建立对于的代码片段的文件， 文件名后缀为 .code-snippets

新建的代码片段文件 有个Example 我们将下面这段代码取消注释并且测试下。

VSCode代码片段就这几个属性，接下来就记录下每个属性的含义和作用

代码片段几个属性的介绍

scope

表示代码片段作用于哪种语言。 不同语言之间以逗号隔开。 常用的有javascript, typescript,html,css,vue等。 如果设置为””就代表在所有地方均生效。

prefix

触发代码片段的字符前缀

description

对代码片段的描述

body

对象代码片段的内容，通常为一个数组，数组内的一行对应生成代码片段后的一行

$占位符的作用

在上面的例子中，输入log按下tab键即可出现 console.log(); 的代码。

出现这段内容后，光标在()内，然后按下tab键，光标即可跳到下一行，也就是$2的位置，同样的道理，我们还可以设置$3、$4 等占位符。

附加

有时候我们自己去编写一个代码片段，首先第一步要先去写某段代码，然后再用字符串的形式去拼接。可能会更消耗我们的时间。所以这里提供一个网站可以帮助我们生成代码片段： 生成代码片段的站。