sublime代码片段

创建方法:Tools > New Snippet

这时你会看到如下示例代码:

<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>

此时的你应该有点莫名,我们接着来看下完整的结构和说明:

<snippet>

    <content><![CDATA[ 你需要插入的代码片段${1:name} ]]></content>

    <!-- 可选:快捷键,利用Tab自动补全代码的功能 -->

    <tabTrigger>xyzzy</tabTrigger>

    <!-- 可选:使用范围,不填写代表对所有文件有效。附:source.css和test.html分别对应不同文件。 -->

    <scope>source.python</scope>

    <!-- 可选:在snippet菜单中的显示说明(支持中文)。如果不定义,菜单则显示当前文件的文件名。 -->

    <description>My Fancy Snippet</description>

</snippet>

${1:name}表示代码插入后,光标所停留的位置,可同时插入多个。其中:name为自定义参数(可选)。
${2}表示代码插入后,按Tab键,光标会根据顺序跳转到相应位置(以此类推)。

现在,你应该有了个大致的了解。那我们就开始自己动手编写一个实例:

<snippet>

     <content>

     <![CDATA[

     <footer>

          <p>Copyright © 2008-2012 ${1:bluesdream}.com</p>

          <p>增值电信业务经营许可证 沪B2-${2} <a href="#">沪ICP备号${3}</a></p>

     </footer>

     ]]>

     </content>

     <tabTrigger>cft</tabTrigger>

     <description>custom-footer</description>

     <scope>text.html</scope>

</snippet>

创建完毕以后,保存在\Packages\User目录下(例 X:\Sublime Text 2.0\Data\Packages\User),文件命名为cft-code,后缀名.sublime-snippet。

此时我们打开一个html文件,输入cft,再按Tab键,刚才我们所编写的代码段,就插入了进来。并且此时的光标停留在我们所标记的${1}位置处,如果我们再按下Tab,那么光标就跳转到${2}的位置。由于我们在scope中定义了仅在html文件中使用,所以此时如果我们打开的是css或其他格式的文件,那将无法插入代码段。

补充:除了利用快捷键Tab出代码之外,我们还能通过菜单来加载,打开Tools > Snippet,选择Snippet: custom-footer。如果你没有定义description,那此时便会看到以我们文件名为命名的Snippet: cft-code选项。

时间: 2024-10-29 09:14:49

sublime代码片段的相关文章

如何使用sublime代码片段快速输入PHP头部版本声明

Sublime 菜单栏->Tools→New Snippet→输入以下内容: <snippet> <content><![CDATA[ <?php // vim: set expandtab cindent tabstop=4 shiftwidth=4 fdm=marker: // +----------------------------------------------------------------------+ // | The CompanyNam

自定义sublime代码片段

sublime text 已经有一些他们内置的一些代码片段,但是有时候,这些并不能满足我们,这就需要我们自定义一些代码片段. 步骤如下: 1.打开sublime text 2.选择 tools -> new snippet 就会打开一个未命名的文件,代码如下: <snippet> <content><![CDATA[ Hello, ${1:this} is a ${2:snippet}. ]]></content> <!-- Optional:

sublime代码片段功能

tools - > developer - > new snippet有了这个,你就可以通过iu这两个键,直接弄出自己的模板了,这就很方便了,不用在复制粘贴了.上是代码模板,下面是快捷键,< tabTrigger > iu < / tabTrigger > 这就代表你的快捷键是iu. <snippet> <content><![CDATA[ #include <bits/stdc++.h> using namespace std

sublime text3 之snippet编写代码片段

sublime text 3 中有个强大的功能就是可以编写各种文件类型的snippet代码片段,可以节省大量的时间. 文件名为:jekyll-top.sublime-snippet(.sublime-snippet)后缀必须这样 <snippet> <content><![CDATA[/** * author:qinbb * title:智能推荐${1:标题} */ ${2}]]></content> <!-- Optional: Set a tabT

Sublime Text Snippets(代码片段)功能

我们在编写代码的时候,总会遇到一些需要反复使用的代码片段.这时候就需要反复的复制和黏贴,大大影响效率.我们利用Sublime Text的snippet功能,就能很好的解决这一问题.通俗的讲,就是把我们常用的代码分别保存起啦,然后通过插件的形式来反复调用. 创建方法:Tools > New Snippet 这时你会看到如下示例代码: 1 <snippet> 2 <content><![CDATA[ 3 Hello, ${1:this} is a ${2:snippet}.

sublime text 2自定义代码片段

本文引用   http://www.blogjava.net/Hafeyang/archive/2012/08/17/how_to_create_code_snippet_in_subline_text_2.html 对于前端工程师来讲,写一个html页面的基本结构是体力活,每次去拷贝一个也麻烦,sublime text 2 提供了一个很好的复用代码片段.下面介绍一下创建一个html5的代码片段的过程. 在菜单上点击Tools -> New Snippet,(工具->代码段)会新建一个xml文

sublime 添加代码片段(snippets)

1.工具-新代码片段(Tools -> New Snippet) 2. <snippet> <content><![CDATA[ if(\$rs && is_array(\$rs)){ foreach(\$rs as \$k => \$v){ ${1} } } ]]></content> <tabTrigger>phpiffor</tabTrigger> </snippet> 3.保存在 \Su

sublime自定义snippet代码片段

相信很多人喜欢sublime编辑工具有两个原因:第一sublime很轻巧方便:第二sublime提供很多自定义拓展功能,包括很简单且和很好用的代码片段功能snippet文件. 今天,在这里就介绍下sublime如何自定义各种代码片段,先来感受一下效果: 上面看到的是我用sublime初始化一个html文件的操作gif,相信这是很多人在新项目必经的步骤.而我里面不同的时,不需要任何复制,只需几秒钟就完成整个初始化的工作,这就是sublime的魅力之一:代码片段snippet. 下面我就拿上面的动画

sublime text 2学习(二):创建可复用的代码片段

对于前端工程师来讲,写一个html页面的基本结构是体力活,每次去拷贝一个也麻烦,sublime text 2 提供了一个很好的复用代码片段.下面介绍一下创建一个html5的代码片段的过程. 在菜单上点击Tools -> New Snippet,会新建一个xml文件页签: <snippet> <content><![CDATA[ Hello, ${1:this} is a ${2:snippet}. ]]></content> <!-- Optio