我们在编写代码的时候,总会遇到一些需要反复使用的代码片段。这时候就需要反复的复制和黏贴,大大影响效率。我们利用Sublime Text的snippet功能,就能很好的解决这一问题。通俗的讲,就是把我们常用的代码分别保存起啦,然后通过插件的形式来反复调用。
创建方法: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选项。
更多说明可查看:帮助文档(英)
感谢您的阅读,本文由 蓝色梦想 版权所有。如若转载,请注明出处:蓝色梦想 - Sublime Text Snippets(代码片段)功能
寒梧子 说:
Tab键可以展开也可以跳转 他们之间有没有优先级设置啊
March 18, 2020 12:22 pm
梦幻神化 说:
优先级这块没有单独的设置(主要根据你自定义的前缀来识别),但编辑器有记忆功能,会根据你 tab 内容的频率,自动调调整优先级。
March 21, 2020 2:59 pm
嘻嘻嘻嘻嘻 说:
如果是新版的 写好的文件应该放到哪个目录下
November 1, 2017 1:23 pm
嘻嘻嘻嘻嘻 说:
只有Packages 没有User这个文件 准确的说是Packages中没文件夹
November 2, 2017 9:24 am
梦幻神化 说:
新建snippet后直接保存,就可以看到他的默认存储路径:
"C:\Users\用户名\AppData\Roaming\Sublime Text 3\Packages\User"
November 8, 2017 9:13 am
嘻嘻嘻嘻嘻 说:
.... 这样啊 谢了哥们 非常感谢 纠结了1个月了
November 8, 2017 9:43 am
mx 说:
请问要在.shtml 文件中生效要怎么设置
March 29, 2017 8:40 pm
Anjaxs 说:
如果scope里要写多个类型的文件,要怎么写?
December 7, 2016 8:43 am
梦幻神化 说:
不同类型文件名在scope里用逗号分隔 text.html,source.php
April 26, 2017 5:11 pm
Joey Yan 说:
感谢楼主,学习了
November 23, 2016 12:03 pm
Alien 说:
我内容里面有$就不行了,怎么解决呢?
September 1, 2016 7:59 pm
梦幻神化 说:
$ 符号的话 需要将它转义成 /$
September 2, 2016 10:14 am
Pingback 引用通告: 使用sublime的snippets(片段)功能 – 有爱前端
season1121 说:
snippet代码片段,在css文件中,样式名外面,没有提示,反而是在{}括号中写属性的时候有提示出来。请教是否有遇到这个问题。
June 7, 2016 12:20 pm
mx 说:
请问这个问题你解决了没?遇到同样的问题,求解答
March 29, 2017 10:40 pm
FarmerZ 说:
请问对已经存在的snippet怎么修改呢,找了半天没找到啊。本来只想把自带的html片段的lang改成“zh”而已。希望楼主还建在。
May 7, 2016 4:18 pm
梦幻神化 说:
哈哈哈 健在!你可以尝试再新建一个 "new snippet" 然后选择保存,就是你默认存放snippet的路劲。直接找的话,以ST3为例一般是在 C:\Users\用户名\AppData\Roaming\Sublime Text 3\Packages\User
May 9, 2016 10:57 am
小白 说:
$ 符号被过滤了。。。。。。JQ里面的$符号不起作用
April 19, 2016 12:04 pm
梦幻神化 说:
$ 符号的话 需要将它转义成 /$
April 22, 2016 4:46 pm
李凯 说:
谢谢
April 22, 2016 9:26 pm
dd 说:
为什么我转移成/$还是不行呢
May 9, 2017 5:33 pm
lsj8924 说:
写的很易懂,谢谢了。
April 16, 2016 6:28 pm
蔺菇凉 说:
是日期是几年前写的了,很有用,谢谢
December 19, 2015 10:11 am
毛小龙 说:
为什么我的范围限制没效果,比如php文件,该怎么写
July 29, 2014 4:29 am
毛小龙 说:
我错了,原来限制代码段范围在php生效是根据这个定界符来的.我本来想用代码段创建相同头信息的php文件的.哎....不知道怎么弄了
July 29, 2014 4:48 am
梦幻神化 说:
在scope标签里写上 source.php 表示仅针对PHP文件生效,如果为空则代表对所有文件有效。
August 1, 2014 3:25 pm
Sigma 说:
拼写错误:
后缀名.sublime-snoppet
后缀名.sublime-snippet
December 24, 2013 5:29 pm
梦幻神化 说:
非常感谢,已更正。
December 25, 2013 12:28 pm
Sigma 说:
有点小疑惑。
文中讲解的如何设置一个snippet,如果多个呢?
是多个snippet标签在一个文件里,还是每个保存一个文件?
December 24, 2013 4:59 pm
梦幻神化 说:
每个片段,保存成一个文件。
December 25, 2013 12:30 pm
longDD 说:
不错欧~~
June 25, 2013 12:24 pm
楔子 说:
不错哦!
June 9, 2013 8:03 am
Pingback 引用通告: sublime text2代码片段 | 楔子
保定期货开户 说:
表示很专业。。。
April 12, 2013 5:07 pm