丁鹿学堂:vscode中的代码片段的配置方法

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