看到别人使用HBuilder X可以插入代码块,就想sublime text3有没有类似的功能呢,诶还真有。在sublime text3叫作snippet。

-snippet是干什么的?:可以在你编写js,html,vue,python...的时候快速插入自定义的代码块。

演示demo

输入bt4carousel

输入完bt4carousel按Tab

代码生成完毕!

-snippet怎么使用?:新建sublime-snippet文件,编写代码块,保存文件即可使用。

如何新建sublime-sinppet文件?

新建如下

Vue实例

<snippet>
<content><![CDATA[
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="${1:this}" alt="${2:this}">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="${3:this}" alt="${4:this}">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="${5:this}" alt="${6:this}">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<!-- <tabTrigger>hello</tabTrigger> -->
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
<tabTrigger>bt4carousel</tabTrigger>
<!-- <scope>text.html.basic</scope> -->
<scope>text.html.vue</scope>
</snippet>

Ctrl+S保存 推荐.......\Sublime Text 3\Packages\User下新建snippets文件夹

恭喜,自定义的snippet可以使用了,赶紧自己去试试吧。

如何查看特定文件的<scope>的值?:ctrl+alt+shift+p或者菜单栏-tools-developer-Show Scope Name,就能看到对应的值啦,点击copy就可以复制值。

以上就sublime text3之snippet基本使用的所有内容,祝使用愉快,再见。

最新文章

  1. LeetCode 290 Word Pattern
  2. pdsh使用
  3. 前端开发面试知识点大纲--摘自jackyWHJ
  4. poj3660 floyd
  5. 【poj3233】 Matrix Power Series
  6. 【Android测试】【第三节】ADB——源码浅谈
  7. 《OD大数据实战》Hive环境搭建
  8. 远程MSMQ
  9. linux_grep
  10. git stash解决代码merge出错
  11. 在多任务(RTOS)环境中使用看门狗
  12. Session 在分布式系统中实现方式
  13. Spark+Scalar+Mysql
  14. asp.net4.0
  15. avcodec_decode_video2少帧问题
  16. ASP.NET MVC入门到精通——数据库仓储
  17. Codeforces Round #279 (Div. 2) C. Hacking Cypher 机智的前缀和处理
  18. OpenGL视图--gluPerspective glOrtho glFrustum gluLookAt
  19. C#-WebForm-光棒效果
  20. Redis服务端和客户端的命令

热门文章

  1. python进阶之路19 地狱之门购物车!!!!
  2. .NET 7新特性
  3. 双目测距+点云——使用MiddleBurry数据集的图片
  4. jupyter的配置
  5. 新下载了一个框架,然后npm install时候报错npm ERR! Maximum call stack size exceeded
  6. Flutter 3.7 新特性:介绍后台isolate通道
  7. linux命令与公私钥
  8. JavaScript 中更安全的 URL 读写
  9. CAN2-CH32V307CAN2使用说明与CAN波特率计算方法
  10. immutable.js学习笔记(一)----- immutable.js 简介