VSCode自定义快捷键，助力程序开发！

引入

在编写前端代码的过程中，我们往往在不同的程序中大量使用重复的片段。虽然VSCode中已经通过Emmet语法集成了大量方便的快捷键，但对于拥有不同需求的用户来说可能仍嫌不足。
好在VSCode具有用户自定义快捷键的功能，接下来就让我们一起来看看VSCode如何自定义快捷键吧~

Step 1：

使用Ctrl+Shift+P打开命令面板，在顶部输入框内输入"snippets"或者"代码片段"，选中"配置用户代码片段"（我因为最近使用过所以直接排在了第一位，大家应该也能看得清楚）

Step 2：

点进去后，会显示之前已经配置过的代码片段，以及新建代码片段文件的选项，用户可以选择对全局文件进行相同的配置或者仅在本文件夹中进行相关配置

Step 3：

在此为进行演示，我们选择"新建全局代码片段"，该操作会新建一个code-snippets文件，在对该文件进行命名之后，即可进入该文件中进行自定义快捷键的设置。


VSCode就是贴心，注释中的内容其实就已经把各部件的含义和作用讲得很清楚了，这里我再简单介绍一下：
scope： 支持该快捷键的编程语言。如果为空，则可用于所有编程语言中，例如示例中的scope为"javascript,typescript"中，代表该快捷键只能在这两种语言中使用。
prefix： 用户输入的快捷键
body： 用户输入快捷键后生成的内容，用字符串数组表示，每一个字符串占一行，'${num}'代表生成代码后光标的停留位置，英文为"Tabstop"，顾名思义，可以按Tab键进行切换，顺序为"1, 2, 3……,0"。同时，还可以为这下内容设置"placeholder"值，代表在光标位置中生成的内容。例如按照上述代码进行设置，即可以得到如下效果：

**description：**该快捷键的详细信息，如下所示：

两个应用实例展示

1.在前端开发中，我们往往要消除标签固有的边距，因此我们在css中经常会编写如下代码以消除内外边距：

而我们就可以通过如下代码实现对上述代码的快速生成：

效果如下：

2.Latex是极其通用的数学公式编辑语法，在VSCode的前端开发中，可以直接在头部中引入如下内容，以实现在html文件中编辑Latex：

 <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_HTML" async></script>

不同于latex本来的$$分隔符，此时latex公式包含于\(\)中，如下图所示：

老是打这几个符号多累啊！同样地，我们可以为这个分隔符设置自定义快捷键：

效果如下所示：

小结

怎么样？是不是很方便呢？在这之后大家就可以根据需求自由地定义快捷键啦！
喜欢的话，可以给紫云酱点个赞或关注哦~不定期更新自己在编程中发现的小窍门！