使用自己的代码片段
2020-02-06
代码片段可以让我们有更好的编码体验,但使用第三方代码片段总有一些自己不想要的副作用,所以我们何不自己创建一个符合自己编码习惯的代码片段库呢
起因
我在写 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