[开发工具]丁鹿学堂：学会使用vscode的代码片段配置，开发更高效

打造独一无二的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.输入上面的代码即可

使用：
直接在页面中输入log即可提示出console.log的代码。