在VSCode中使用自己的代码片段

[programmer-yang]

代码片段可以让我们有更好的编码体验，但使用第三方代码片段总有一些自己不想要的副作用,所以我们何不自己创建一个符合自己编码习惯的代码片段库呢

起因

我在写 React 跟 JavaScript 的时候喜欢用一些代码片段(Snippets)，因为这样可以让我的专注点集中在代码逻辑和业务逻辑上，而不用过多的去回忆各种语言的特效跟语法，并且这种事情往往都是重复工作。

比如最常见的语法:

我们在开发过程中往往需要多次敲击它来协助我们定位一些问题，虽然我没做明确的统计，但我觉得如果开发过程中这样类似的语法全部自己手写，那会浪费很多时间。

可能大多数人在这里会想到第三方代码片段库，其实我也是一样的。但我在使用了一段时间后发现，第三方库往往有一些不符合我的使用习惯的 Snippets 会影响我正常开发，比如这种情况：

我的意向是输入 p 标签，然后通过 tab 键来补全语法，但这些第三方库的副作用 Snippets 让我必须先按 esc 关闭这个提醒窗口后再按 tab 继续我的代码编写。

这导致我在日常编码中经常按错，耽误很多时间，对于我这种有轻度代码洁癖的人而言，这是一种煎熬，所以我一定要解决这个问题。

Snippets

VSCode 给我们提供了一个代码片段的解决方案，可以在你本地配置属于你自己的代码片段。

配置起来很简单，只需要打开 首选项-用户代码片段 就可以开始配置了，比如我们上面提到的console.log的语法，我们可以这样配置：

{
  "consoleLog": {
    "prefix": "clg",
    "body": "console.log(${1:object});",
    "description": "Displays a message in the console"
  }
}

这样配置后，你只需要输入 clg 然后 tab 就可以补全 console.log 的全部语法，并且把光标停留在 () 之间。

VSCode 还内置了一些函数跟语法来协助我们写出功能更强大的 Snippets。比如我们可以使用$1 $2来控制我们使用该 Snippets 后的光标停留位置跟顺序，我们还可以使用内置的CURRENT_DATE变量得到当前的日期等。

更多内容请在参考连接里查看。

这些特性让我们编写适合自己的 Snippets 有了更多的可能性，在日积月累中，你的编码效率就会不知不觉的越来越高效。

当然，你也可以把你自己的 Snippets 分享出去，让它成为上文中提到的第三方库，哈哈。

参考

https://code.visualstudio.com/docs/editor/userdefinedsnippets#_creating-your-own-snippets

https://code.visualstudio.com/api/language-extensions/snippet-guide