Open programmer-yang opened 4 years ago
代码片段可以让我们有更好的编码体验,但使用第三方代码片段总有一些自己不想要的副作用,所以我们何不自己创建一个符合自己编码习惯的代码片段库呢
我在写 React 跟 JavaScript 的时候喜欢用一些代码片段(Snippets),因为这样可以让我的专注点集中在代码逻辑和业务逻辑上,而不用过多的去回忆各种语言的特效跟语法,并且这种事情往往都是重复工作。
React
JavaScript
Snippets
比如最常见的语法:
我们在开发过程中往往需要多次敲击它来协助我们定位一些问题,虽然我没做明确的统计,但我觉得如果开发过程中这样类似的语法全部自己手写,那会浪费很多时间。
可能大多数人在这里会想到第三方代码片段库,其实我也是一样的。但我在使用了一段时间后发现,第三方库往往有一些不符合我的使用习惯的 Snippets 会影响我正常开发,比如这种情况:
我的意向是输入 p 标签,然后通过 tab 键来补全语法,但这些第三方库的副作用 Snippets 让我必须先按 esc 关闭这个提醒窗口后再按 tab 继续我的代码编写。
p
tab
esc
这导致我在日常编码中经常按错,耽误很多时间,对于我这种有轻度代码洁癖的人而言,这是一种煎熬,所以我一定要解决这个问题。
VSCode 给我们提供了一个代码片段的解决方案,可以在你本地配置属于你自己的代码片段。
VSCode
配置起来很简单,只需要打开 首选项-用户代码片段 就可以开始配置了,比如我们上面提到的console.log的语法,我们可以这样配置:
首选项-用户代码片段
console.log
{ "consoleLog": { "prefix": "clg", "body": "console.log(${1:object});", "description": "Displays a message in the console" } }
这样配置后,你只需要输入 clg 然后 tab 就可以补全 console.log 的全部语法,并且把光标停留在 () 之间。
clg
()
VSCode 还内置了一些函数跟语法来协助我们写出功能更强大的 Snippets。比如我们可以使用$1 $2来控制我们使用该 Snippets 后的光标停留位置跟顺序,我们还可以使用内置的CURRENT_DATE变量得到当前的日期等。
$1 $2
CURRENT_DATE
更多内容请在参考连接里查看。
这些特性让我们编写适合自己的 Snippets 有了更多的可能性,在日积月累中,你的编码效率就会不知不觉的越来越高效。
当然,你也可以把你自己的 Snippets 分享出去,让它成为上文中提到的第三方库,哈哈。
https://code.visualstudio.com/docs/editor/userdefinedsnippets#_creating-your-own-snippets
https://code.visualstudio.com/api/language-extensions/snippet-guide
代码片段可以让我们有更好的编码体验,但使用第三方代码片段总有一些自己不想要的副作用,所以我们何不自己创建一个符合自己编码习惯的代码片段库呢
起因
我在写
React
跟JavaScript
的时候喜欢用一些代码片段(Snippets
),因为这样可以让我的专注点集中在代码逻辑和业务逻辑上,而不用过多的去回忆各种语言的特效跟语法,并且这种事情往往都是重复工作。比如最常见的语法:
我们在开发过程中往往需要多次敲击它来协助我们定位一些问题,虽然我没做明确的统计,但我觉得如果开发过程中这样类似的语法全部自己手写,那会浪费很多时间。
可能大多数人在这里会想到第三方代码片段库,其实我也是一样的。但我在使用了一段时间后发现,第三方库往往有一些不符合我的使用习惯的 Snippets 会影响我正常开发,比如这种情况:
我的意向是输入
p
标签,然后通过tab
键来补全语法,但这些第三方库的副作用Snippets
让我必须先按esc
关闭这个提醒窗口后再按tab
继续我的代码编写。这导致我在日常编码中经常按错,耽误很多时间,对于我这种有轻度代码洁癖的人而言,这是一种煎熬,所以我一定要解决这个问题。
Snippets
VSCode
给我们提供了一个代码片段的解决方案,可以在你本地配置属于你自己的代码片段。配置起来很简单,只需要打开
首选项-用户代码片段
就可以开始配置了,比如我们上面提到的console.log
的语法,我们可以这样配置:这样配置后,你只需要输入
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