snippet,让你编码效率翻倍

时间 2019-11-17

原文原文链接

为何谈到Snippet

今天下午在用vscode作小程序的时候，发现很不方便，由于商店里提供的代码片断极为有限，并且平时几乎天天都须要用到代码片断，因此就在思考他们是怎么作到给别人提供代码的，我能够自定义代码片断吗。而后查了下，果真，这在vscode里自带的（好像藏得有点深），是能够自定义的，而后在作完本身的任务后捣鼓了下，基本了解了snippet的语法，忽然有种打开新世界大门的感受。作个记录，上菜了html

如何打开snippet配置

这里以vscode为例，其余编辑器大概也差很少。在vscode中快捷键「Ctrl + Shift + P」打开命令窗口，而后输入snippet,选择**[配置用户代码片断]**，点击后，就能够愉快的进行片断的编写了小程序

Snippet怎么用

先上一个Demo

"html template": {
    "prefix": "ht",
    "body": [
      "<!DOCTYPE html>",
      "<html lang=\"en\">",
      "<head>",
      " <meta charset=\"UTF-8\">",
      " <title>${1:$CURRENT_DATE}</title>",
      "</head>",
      "<body>",
	  " <div class=\"${2|container,wrapper|}\">",
		" ${3}",
	  " </div>",
      "</body>",
      "</html>",
    ],
    "description": "create a html frame"
  }
复制代码

效果是这样滴 bash

基础结构

片断名字
prefix（前缀，输入的触发条件，好比上面例子中当我输入ht后，就能tab出来片断）
body（主体部分，在里面根据语法定义本身须要的代码片断）
description（说明，片断的具体描述）

基础语法

每一个逗号表明一整行的结束，双引号须要用转义字符 \
$number表示光标跳转的顺序，好比$1表示光标首次须要跳转的位置，相同序号的会在一块儿，另外$0表示最终光标位置
变量，在未赋值的状况下提供默认值，这里提供一些变量

TM_SELECTED_TEXT：当前选定的文本或空字符串； 
    TM_CURRENT_LINE：当前行的内容；
    TM_CURRENT_WORD：光标所处单词或空字符串 
    TM_LINE_INDEX：行号（从零开始）；
    TM_LINE_NUMBER：行号（从一开始）；
    TM_FILENAME：当前文档的文件名；
    TM_FILENAME_BASE：当前文档的文件名（不含后缀名）；
    TM_DIRECTORY：当前文档所在目录；
    TM_FILEPATH：当前文档的完整文件路径；
    CLIPBOARD：当前剪贴板中内容。
    时间相关
    CURRENT_YEAR: 当前年份；
    CURRENT_YEAR_SHORT: 当前年份的后两位；
    CURRENT_MONTH: 格式化为两位数字的当前月份，如 02；
    CURRENT_MONTH_NAME: 当前月份的全称，如 July；
    CURRENT_MONTH_NAME_SHORT: 当前月份的简称，如 Jul；
    CURRENT_DATE: 当天月份第几天；
    CURRENT_DAY_NAME: 当天周几，如 Monday；
    CURRENT_DAY_NAME_SHORT: 当天周几的简称，如 Mon；
    CURRENT_HOUR: 当前小时（24 小时制）；
    CURRENT_MINUTE: 当前分钟；
    CURRENT_SECOND: 当前秒数。
    
复制代码

可选项，当光标到该处的时候弹出一些可选择项，使用 | ，| 后面是本身提供的可选项我这里是提供了两个值，值之间使用逗号进行分隔

body的高级语法，能够参考这里，写的很详细

最后

效果 app

最后附上把本身的snippet放到market上的教程，使劲戳这里