zoukankan      html  css  js  c++  java
  • 【第 7 期】如何编写自己的代码模板片段code snipped?

    阅读本文大概需要 7 分钟。

    代码片段在平时的工作中发挥着巨大的作用,极大的节省了我们的工作量。而由于VS Code的代码补全功能是建立在编程语言的智能提示下的,它只会根据语言的上下文给出应该可能的建议。而对于不同的项目,不同的功能,我们通常希望有一个可复用的代码模板片段,像自动补全一样,只需要我们编写出模板的前几个单词按下tab键就可以自动补全一段代码,这样想想就觉得很舒心。

    这样的刚需,基本上主流的代码编辑器都是具有的,那么vscode的代码片段code snippet是怎么设置的呢?

    首先我们打开vscode左下角的设置,然后选择用户代码片段,然后就会看到如下的一个列表:

    从这个列表可以看到有很多语言的选项,表示要创建什么语言类型的code snippet。我们选择创建javascript语言类型的代码片段。

    从下拉列表中选中javascript,之后进入到编写具体代码片段的界面。

    我们可以看出,这是一个JSON文件,将Example后面,也就是7-14行的注释去掉,可以看到有一个JSON的属性key叫Print to console,它的值value是一个对象。我们把不必要的注释都拿掉可以看得更清晰一些:

     1{
     2    "Print to console": {
     3        "prefix": "log",
     4        "body": [
     5            "console.log('$1');",
     6            "$2"
     7        ],
     8        "description": "Log output to console"
     9    }
    10}
    
    

    我们在编写代码片段的的时候,一定要注意key不能相同,这个也符合JSON的语法。

    在value对象中,prefix表示的是当我们在编辑器里打出跟 prefix 一样的字符时,我们就可以在代码智能补全列表中看到我们自己的代码片段,选中我们的的代码片段后按下tab键就可以把后面body中的内容插入到当前光标的位置。

    description则是对我们这个代码片段的描述,不是必须的。

    好,我们写一个自己的console.log代码片段,当我们打出log后按tab键自动补全。

    1{
    2    "my console": {
    3        "prefix": "log",
    4        "body": [
    5            "console.log('$1');",
    6            "$2"
    7        ]
    8    }
    9}
    
    

    可以看到,我们在打印出log之后,我们刚写的代码片段出现了,在第二个位置,然后我们只需要按向下方向键选中这个后按tab键就可以插入到编辑器中。但是有没有感觉多了有个步骤就是选中它的操作,可不可以让它处在第一个位置呢?

    我们只需要在设置中搜索snippet Suggestions,然后选择top就OK了,这样自己的代码片段总是会出现在代码提示列表的第一位置。

    有人可能会问了,上面body中的$1 $2是什么鬼东西?

    这个东西叫Tab Stop,我们发现,当body内容插入到编辑器的时候,里面的$1 $2都不见了,取而代之的是两个竖线,这里的$1 $2就是 Tab Stop。表示当我们按下tab键的时候,光标移动的位置。$1就是body插入的时候光标出现的位置,此时按下tab键,光标会移动到$2的位置,如果还有$3 $4是以此类推的。

    这个Tab Stop就特别好使了,是因为我们之所以称为代码模板就是大部分的内容都是相同的,只有少部分需要修改的,那么我们就可以把Tab Stop放到那些需要修改的地方,第一个地方修改完后就可以直接tab到下一个修改的地方,这也是和我上一篇文章你能做到双手不离键盘吗?相呼应的。

    Tab Stop可以形成多光标。

    如果你的代码片段中有两个或多个$1或者是$2等等,那么在tab跳转的时候,相同的$1或者$2就会同时被选中,可以看到光标在同时闪烁,就可以一次修改多处内容了。

    为了演示,将代码片段修改如下:

     1{
     2    "my console": {
     3        "prefix": "log",
     4        "body": [
     5            "console.log('$1');",
     6            "console.log('$1');",
     7            "alert('$2');",
     8            "alert('$2');",
     9        ]
    10    }
    11}
    

    Tab Stop还可以有默认值。

    在我们插入类似$1 $2等的时候,是可以给他们默认值的,例如这种写法:${1:default},也可以把这种写法称为占位符。这这种写法下,当代码片段被插入到编辑器的时候,$1处的位置会默认填上default 这个值,并且是已经被选中的,如果不是自己需要的值,可以直接修改,而不需要再次选中默认值,这就相当于又帮我们减少一次修改代码的次数,使得代码模板简洁的同时更加灵活多变。

    代码片段如下:

     1{
     2    "my console": {
     3        "prefix": "log",
     4        "body": [
     5            "console.log('${1:daotin}');",
     6            "console.log('${1:lvonve}');",
     7            "alert('${2:123}');",
     8            "alert('${2:456}');",
     9        ]
    10    }
    11}
    
    

    可以看出,如果多光标存在的时候,如果默认值不相同的情况下,会默认选第一个默认值作为占位符。

    Tab Stop还有一个不常用的功能就是将默认值替换为剪贴板的内容。

    这时候我们的代码片段就要写出下面的形式:

    1{
    2    "my console": {
    3        "prefix": "log",
    4        "body": [
    5            "console.log('${1:$CLIPBOARD}');",
    6            "alert('${2:$CLIPBOARD}');"
    7        ]
    8    }
    9}
    
    

    然后在演示的时候,我们先复制函数的第一行,之后再输入log:

    可以看到,默认值被成功替换成了我满剪贴板中复制的函数第一行的内容。

    需要注意的是:${1:$CLIPBOARD} 中的CLIPBOARD 是一定要大写的,否则就是“clipboard”字符串本身了。

    综上,可以看出代码片段code snippet是个特别好用的工具,用好了可以帮我们节省下大量代码复制粘贴的重复劳作,而且非常简单。最后,VS Code 的代码片段语法是基于 TextMate 的,很多主流的编辑器比如 Atom,Sublime等也都支持此语法片段,因此如果你之前是用过这些编辑器的代码片段,相信你对VS Code的代码片段语法也不陌生,并且网上有很多基于此语法的代码片段可以参考,看看别人都用这些代码片段语法写过哪些提升工作效率的代码片段,这也是我们学习 code snippet很好的方法。

    本公众号所有内容已整理到模板页面,请点击本页面下方的「阅读全文」获取所有内容!

    推荐阅读:

    你应该知道的前端编程利器 VS Code

    一文搞懂 JavaScript 中 DOM 相关的距离

  • 相关阅读:
    973. K Closest Points to Origin
    919. Complete Binary Tree Inserter
    993. Cousins in Binary Tree
    20. Valid Parentheses
    141. Linked List Cycle
    912. Sort an Array
    各种排序方法总结
    509. Fibonacci Number
    374. Guess Number Higher or Lower
    238. Product of Array Except Self java solutions
  • 原文地址:https://www.cnblogs.com/lvonve/p/14180352.html
Copyright © 2011-2022 走看看