自定义Snippets常用代码片段提高开发效率

自定义Snippets常用代码片段提高开发效率

在日常开发中，经常会遇到重复代码的问题。虽然可以通过工具类或复制粘贴来解决，但这些方法都不如使用代码片段（snippets）来得高效。本文将通过一个具体的Markdown图片插入案例，手把手教你如何在VSCode中创建自定义代码片段，以提高开发效率。

为什么需要自定义Snippets

在日常开发过程中，有很多代码是重复的。对于这些代码，可以考虑放进工具类，或者安装snippets插件，或者干脆找以前的代码Ctrl+CV。插件市场里每种框架和语言对应的snippets都有很多，但不一定符合自己的编码习惯。Ctrl+CV就操作链路的长度和开销来说，还是不如snippets丝滑爽快些。

因此，自己编写snippets，不管从开发体验还是效率上来说，都是一件很爽的事情。

如何编写Snippets

以Markdown图片插入为例，介绍如何创建自定义代码片段：

1. 打开VSCode，选择左下角的"User Snippets"选项。
   

2. 在弹出的输入框中输入"markdown"，找到"markdown.json"文件并打开。

3. 在json文件中输入以下代码：

"Insert Image": {
    "prefix": "/img",
    "body": [
        ""
    ],
    "description": "Insert Markdown image syntax"
}

• Insert Image：Snippets名称
• prefix：触发词，输入这个词并按下回车键会将body内的代码片段插入到当前文件位置
• body：代码片段主体，也就是你编码的时候要插入的代码片段
• $1和$2：光标位置占位符，插入代码之后鼠标会定位到这些位置，方便用户输入自定义的内容

验证效果

新建一个Markdown文件，并输入/img，可以看到出现了代码提示，按下回车键，将会得到代码片段：

![](）

此时光标会自动定位到括号内，可以直接输入图片链接。这样，一个简单的Markdown图片插入代码片段就创建完成了。

通过这种方式，你可以根据自己的开发习惯，创建更多实用的代码片段，从而大幅提高开发效率。