vsCode自定义代码片段，生成个性化代码模板

超、凢脫俗 2022-11-04 15:23 11阅读 0赞

在vscode编辑器里开发代码时会发现，vscode内置了一些语言的代码片段，会在智能提示框里一起出现，帮助自动补全代码，用起来很方便。  
这些代码片段是通过snippets来实现的，在扩展市场里提供里各种语言的代码片段  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3lhbnl1Xw_size_16_color_FFFFFF_t_70]  
那么这些snippets是如何实现的呢？如果我们自己业务开发中经常用到的代码也能在编辑器里智能补全的话，就可以省去很多重复的工作，大大提升开发效率。

本文就来汇总一下，开发自定义snippets的几个步骤，简单几个步骤，配置出适合自己的vscode

### 找到配置用户代码片段的入口 ###

1.  入口一：在“文件” > “首选项”下选择“用户代码段”（在macOS上为“代码” > “首选项”）
2.  入口二：按下快捷键⇧⌘P， 输入snippets，选择配置用户代码片段，如下图：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3lhbnl1Xw_size_16_color_FFFFFF_t_70 1]  
    之后会出现以下选择界面  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3lhbnl1Xw_size_16_color_FFFFFF_t_70 2]  
    这里有两种操作：

> 1.  **选择某种语言类型**，那么添加的代码片段则只在这种语言的文件中生效。例如选择javascript后，编辑器会打开一个javascript.json文件，在这里添加的代码片段，只会在js文件里提示
> 2.  **新建全局代码片段**，编辑器会要求输入一个文件名，会创建一个后缀是`.code-snippets`的文件，在这里维护代码片段在任何类型语言文件中都能使用

### 编辑和使用代码片段 ###

按照上面方法打开的json文件后，添加如下格式的代码  
![在这里插入图片描述][20210303113202300.png]  
在编辑器里输入`conlg` ，选择提示框里的第一项，文件里就会填充好下面的代码内容  
![在这里插入图片描述][20210303113341710.png]![在这里插入图片描述][20210303113348855.png]

### 代码片段语法 ###

prefix: 触发提示的关键词  
scope: 可选属性，一个或多个语言标识符，这使该代码段仅可用于那些指定的语言  
body: 是要填充到文件的代码内容， 是一个数组，数组里的每一项代表一行

*  \\t表示一个tab缩进
 *  body里写了$1, $2, $0的地方，在生成代码片段后，可以通过tab键按顺序快速到达，$0是光标最后会到达的地方
 *  示例里的`${1:object}`写法，表示临时占位的字符，代码填充后占位符会默认选中，方便修改；
 *  占位符可以提供选择，`${1|one,two,three|}`，效果如下  
    ![在这里插入图片描述][20210303143412880.png]
 *  可以使用变量，用法为`$name` 或`${name: default}`，没有获取到变量时，会把默认值或空字符串插入代码。

> **VScode提供的变量有以下**：  
> **TM\_SELECTED\_TEXT** 当前选择的文本或空字符串  
> **TM\_CURRENT\_LINE** 当前行的内容  
> **TM\_CURRENT\_WORD** 光标下的单词内容或空字符串  
> TM\_FILENAME 当前文档的文件名  
> TM\_FILENAME\_BASE 当前文档的文件名，不带扩展名  
> **TM\_DIRECTORY** 当前文件的目录  
> **TM\_FILEPATH** 当前文档的完整文件路径  
> **CLIPBOARD** 剪贴板中的内容  
> TM\_LINE\_INDEX 基于零索引的行号  
> TM\_LINE\_NUMBER 基于一索引的行号  
> WORKSPACE\_NAME 打开的工作空间或文件夹的名称  
> WORKSPACE\_FOLDER 打开的工作空间或文件夹的路径

例如如下配置，在编辑器里复制一个变量后，输入conlg，代码片段会自动填充剪贴板的变量。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3lhbnl1Xw_size_16_color_FFFFFF_t_70 3]

总结：  
操作很简单，在对应的代码片段配置文件里配置模板就可以了

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3lhbnl1Xw_size_16_color_FFFFFF_t_70]: /images/20221023/b3cc52c03f3541479608659e797840c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3lhbnl1Xw_size_16_color_FFFFFF_t_70 1]: /images/20221023/b037fa9e052c4e359f529bb55e2e9ee2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3lhbnl1Xw_size_16_color_FFFFFF_t_70 2]: /images/20221023/813331576f8346cfaf985eb8c5164f31.png
[20210303113202300.png]: /images/20221023/0ed7a872ecdc421288e336d7f5a8294e.png
[20210303113341710.png]: https://img-blog.csdnimg.cn/20210303113341710.png
[20210303113348855.png]: /images/20221023/f2d34cf54db54be8a62ebad6ea5f57e6.png
[20210303143412880.png]: /images/20221023/0da06e759a8542caa9bee63bf72d4a0d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3lhbnl1Xw_size_16_color_FFFFFF_t_70 3]: /images/20221023/f1c66f5863894b6aa19069bfa9238f74.png