打造独一无二的vscode
俗话说的好, 工欲善其事,必先利其器。我们前端开发者目前最常用的开发工具之一,就是vscode了。
其实vscode相对来说比较轻量。这是它的优势,但是也说明了很多东西需要我们去配置,才能使用的更得心应手,提高开发的效率。
方法之一就是装各种好用的,适合自己的插件。vscode的插件十分强大。这个我在之前的文章中介绍过一些经典的插件。
这里再给大家说一个提高开发效率的方法。就是snippets 。
snippets 是片段的意思,VSCode 支持自定义 snippets,写代码的时候可以基于它快速完成一段代码的编写。
也就是说可以定义一段代码的快捷键。
其实一些插件,或者vscode本身就已经定义了很多代码片段,最好理解的就是你属于!+tab。就生成了一段html5的代码,输入bgc+tab就是background-color。
我们自定义snippets,可以让代码更符合我们自己的书写规范,把vscode打造成独一无二的属于自己的编辑器。
我们实现一个最简单的,以后大家可以根据自己的需要去定义更多的代码片段。
输入log 实现打印console.log的功能,这个其实是webstrom内置的。
sunippets的结构
{
"log": {
"prefix": ["log"],
"body": [
"console.log($1)"
],
"description": "log输出",
"scope": "javascript"
}
}
log是代码片段的名称,可以配置多个代码片段
prefix 是触发这个代码片段的快捷键
body是输出的代码片段,$1是输出以后光标停留的位置
description是自己定义的描述
scope 是在什么语言中生效
实际操作
1.通过 command + shift + p,输入 snippets
2.选择新建全局代码片段
3.输入上面的代码即可