为什么谈到Snippet

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

如何打开snippet配置

这里以vscode为例，其他编辑器大概也差不多。在vscode中快捷键「Ctrl + Shift + P」打开命令窗口，然后输入snippet,选择 [配置用户代码片段]，点击后，就可以愉快的进行片段的编写了

Snippet怎么用

先上一个Demo

  1. "html template": {
  2.     "prefix": "ht",
  3.     "body": [
  4.       "<!DOCTYPE html>",
  5.       "<html lang=\"en\">",
  6.       "<head>",
  7.       "  <meta charset=\"UTF-8\">",
  8.       "  <title>${1:$CURRENT_DATE}</title>",
  9.       "</head>",
  10.       "<body>",
  11.             " <div class=\"${2|container,wrapper|}\">",
  12.             "   ${3}",
  13.             " </div>",
  14.       "</body>",
  15.       "</html>",
  16.     ],
  17.     "description": "create a html frame"
  18.   }

效果是这样滴

基础结构

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

基础语法

  • 每个逗号代表一整行的结束，双引号需要用转义字符 \
  • $number表示光标跳转的顺序，比如$1表示光标首次需要跳转的位置，相同序号的会在一起，另外$0表示最终光标位置
  • 变量，在未赋值的情况下提供默认值，这里提供一些变量
  1.     TM_SELECTED_TEXT：当前选定的文本或空字符串；
  2.     TM_CURRENT_LINE：当前行的内容；
  3.     TM_CURRENT_WORD：光标所处单词或空字符串
  4.     TM_LINE_INDEX：行号（从零开始）；
  5.     TM_LINE_NUMBER：行号（从一开始）；
  6.     TM_FILENAME：当前文档的文件名；
  7.     TM_FILENAME_BASE：当前文档的文件名（不含后缀名）；
  8.     TM_DIRECTORY：当前文档所在目录；
  9.     TM_FILEPATH：当前文档的完整文件路径；
  10.     CLIPBOARD：当前剪贴板中内容。
  11.     时间相关
  12.     CURRENT_YEAR: 当前年份；
  13.     CURRENT_YEAR_SHORT: 当前年份的后两位；
  14.     CURRENT_MONTH: 格式化为两位数字的当前月份，如 02；
  15.     CURRENT_MONTH_NAME: 当前月份的全称，如 July；
  16.     CURRENT_MONTH_NAME_SHORT: 当前月份的简称，如 Jul；
  17.     CURRENT_DATE: 当天月份第几天；
  18.     CURRENT_DAY_NAME: 当天周几，如 Monday；
  19.     CURRENT_DAY_NAME_SHORT: 当天周几的简称，如 Mon；
  20.     CURRENT_HOUR: 当前小时（24 小时制）；
  21.     CURRENT_MINUTE: 当前分钟；
  22.     CURRENT_SECOND: 当前秒数。
  23.
  • 可选项，当光标到该处的时候弹出一些可选择项，使用 | ，| 后面是自己提供的可选项 我这里是提供了两个值，值之间使用逗号进行分隔

  • body的高级语法，可以参考这里，写的很详细

最后

效果

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

snippet,让你编码效率翻倍的更多相关文章

  1. Elastic Search 上市了，市值翻倍，这群人财务自由了！

    国庆长假,大部分人还深浸在风花雪月之中,而就在昨天(美国时间10月5号),我们 Java 程序员所熟知的大名鼎鼎的 Elastic Search 居然在美国纽约证券交易所上市了! 当说到搜索时,大部分 ...

  2. VS Code：让你工作效率翻倍的23个插件和23个编辑技巧

    VS Code:让你工作效率翻倍的23个插件和23个编辑技巧 总结了一些平时常用且好用的 VS Code 的插件和编辑技巧分享出来. 文章详情可查阅我的博客:lishaoy.net ,欢迎大家访问. ...

  3. 优步UBER司机奖励政策：含高峰、翻倍、行程、金牌司机、保底奖励(持续更新...)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://didi-uber.com/archiv ...

  4. 北京优步UBER司机B组最新奖励政策、高峰翻倍奖励、行程奖励、金牌司机奖励【每周更新】

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  5. 大数翻倍法求解CRT

    目录 正文 引入 大数翻倍法 复杂度证明 大数翻倍法的优势 最后的最后:上代码! 注:做法和思路是 zhx 在一次讲课中提出的,如有侵权,请联系作者删除 其实别的题解也有提到过暴力做法,但这里将会给出 ...

  6. 2022必须拥有Chrome扩展程序 - 浏览器插件，让你上网效率翻倍

    在Chrome网上应用店中查找扩展程序 2022必须拥有Chrome扩展程序 - 浏览器插件,让你上网效率翻倍 可扩展的Chrome Web浏览器比某些人认识的功能强大得多.您可以自定义浏览体验,使其 ...

  7. 测试人生 | 薪资翻倍涨至50W是种什么样的体验？

    本文为霍格沃兹测试开发学社优秀学员跳槽笔记,测试开发进阶学习文末加群. 本人已经工作7年了,做的都是功能测试以及写一些简单的自动化脚本,加上之前没有学习的意识,导致专业技术水平与工作年限不匹配,在上家 ...

  8. 仅1年GitHub Star数翻倍，Flink 做了什么？

    Apache Flink 是公认的新一代开源大数据计算引擎,其流水线运行系统既可以执行批处理程序也可以执行流处理程序.目前,Flink 已成为 Apache 基金会和 GitHub 社区最为活跃的项目 ...

  9. PHP 7問世，2億網站效能翻倍有望

    經過10年的漫長等待,PHP 7終於正式問世了.這個影響全球8成網站的開發語言,一舉從5.0版,跳過了功敗垂成的6.0版,一舉進入了7.0時代. 20年前初夏,1995年6月8日,一位愛解決問題的C語 ...

随机推荐

  1. Thymeleaf将字符串转换为数字

    Thymeleaf将字符串转换为数字 Thymeleaf将字符串转换为数字!近期努力敲代码的时候遇到一个问题,某个字段在后端使用的是String存储,但是前端thymeleaf模板需要使用这个字段做数 ...

  2. Tableau怎么制作专业图表

    Tableau怎么制作专业图表 本文首发于博客冰山一树Sankey,去博客浏览效果更好.直接右上角搜索该标题即可 一. 统计表 1.1 不同种类的图表风格 商业周刊的图表风格 经济学人的图表风格 华尔 ...

  3. tp6微信公众号开发者模式自定义菜单

    1,参考上篇博客,获取access_token https://www.cnblogs.com/xiaoyantongxue/p/15803334.html 2:控制器写以下代码 /* * 获取普通a ...

  4. PHP动态修改配置文件

    文件结构: index.php 主页 config 配置文件 doUpdate.php 修改功能页 index.php <html> <head> <title>修 ...

  5. 亿图图示v9.2.0.0 官方中文版及破解激活补丁

    介绍 亿图图示是一款由深圳市亿图软件有限公司开发的全类型,综合图形图表设计软件,解决跨平台,多领域,全终端的图形设计,图文混排和工程制图等需求.亿图图示是一款简单易用的快速制图软件,适合任何人绘制任何 ...

  6. egg微信小程序支付（服务商）插件封装

    下单 通过下单获取prepay_id,然后返回给小程序发起支付 若是服务商,mch_id:传入服务的商户号:sub_mch_id:传入子商户的商户号,算法签名的秘钥是服务商的秘钥. 'use stri ...

  7. 同事都说有SQL注入风险，我非说没有

    前言 现在的项目,在操作数据库的时候,我都喜欢用ORM框架,其中EF是一直以来用的比较多的:EF 的封装的确让小伙伴一心注重业务逻辑就行了,不用过多的关注操作数据库的具体细节.但是在某些场景会选择执行 ...

  8. Java案例之评委打分

    /* 案例:评委打分,六个或者更多个评委打分,去到一个最高分,一个最低分,求其他评委的平均值(当评委数量发生改变时不需要进行二次修改) 需求:定义一个数组,长度为6,循环获取输入的数据 定义方法获取数 ...

  9. Spring——初识

    1.1 使用 导包:Spring Web MVC(maven) <!-- https://mvnrepository.com/artifact/org.springframework/sprin ...

  10. Nginx 陷阱和常见错误

    Nginx 陷阱和常见错误 翻译自:https://www.nginx.com/resources/wiki/start/topics/tutorials/config_pitfalls/ 警告: 请 ...