sublime自定义代码

什么是自定义代码块

sublime text 提供自定义代码块的功能,可以避免一些经常用的代码块重复写。
我们经常用的!+table 或HTML:5+table等快速生成的Html头文件都是系统提供的代码块,在sublime中我们也可以自己定义这些代码块。

步骤

  1. 依次打开Tools -> Developer -> New Snippt…
  2. 打开后会出现如下代码
<snippet>
 <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></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> -->
</snippet>
  1. <![CDATA["想要快速生成的代码段"]]>标签之间为代码段内容,即想快速生成的代码段;
  2. 把这个<!-- <tabTrigger>hello</tabTrigger> -->注释去掉
  3. tabTrigger 之间为触发字符,即当你输入此内容时按tab键即可生成代码段;
  4. <scope></scope>标签之间为此代码段作用的范围,如果注释掉则为所有文件有效
  5. 其中示例代码中的${1:this}表示第1个编辑点(即光标停留的位置),冒号(:)后面的为默认内容.相应的后面的${2:snippet}则表示第2个编辑点,可添加多个编辑点

举个例子:
我们把这段代码保存为 " bs3-自适应横导航栏.sublime-snippet "

<snippet>
 <content><![CDATA[
 <ul class="nav nav-tabs nav-justified">
  <li class="active"><a href="${1:#}">${2:首页}</a></li>
  <li><a href="${3:#}">${4:默认菜单1}</a></li>
  <li><a href="${5:#}">${6:默认菜单2}</a></li>
  <li><a href="${7:#}">${8:默认菜单3}</a></li>
  <li><a href="${9:#}">${10:默认菜单4}</li>
</ul>
]]></content>
 
 <tabTrigger>bs3-navline</tabTrigger>
 
 <!-- <scope>source.python</scope> -->
</snippet>

然后在其他的html文件中输入 bs3-navline 再按下 table键 就会出现以上代码光标停留在第一个a的href的地址中,再按下table键就光标就会到第一个li的菜单名…
在这里插入图片描述

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/jiwei_1234____5/article/details/83934500
今日推荐