sublime text 2代码片段（Snippet）功能的使用
2013-08-15 18:24
106 查看
“snippet”在英语里面是“片段”的意思。当我们编码时候，通常想要打几个简略的字符串，就出来一些固定的模板。
例如：使用snippet在新建文件时快速生成HTML头部信息等。
定义很简单，菜单：tools->new snippets，会新建一个xml文件页签：
是不是看的有点眼晕，那我们看下完整的结构和说明：
现在对以上的参数进行说明：
content：是你要定义的模板内容;
===========================================================================
其中${序号:默认值} 表示序号相同的地方，光标会同时停在那，进行多处同时编辑；其中【:默认值】为自定义参数（可选），其中的【默认值】会直接输出在文件中；
如果是${序号}表示代码插入后，按Tab键，光标会根据顺序跳转到相应位置（以此类推）；
序号大小就是tabindex；
在实际使用代码的时候，可以使用tab切换光标位置。
===========================================================================
tabTrigger：是你按tab键之前需要输入的快捷字符串，输了该字符串后，按tab键，就在光标处插入content中的内容。
scope：这个很重要，表示这个snippet在什么文件或什么内容下有效，是对文件格式的限制，比如，html格式的要设置为text.html。
===========================================================================
如果你不知道如何设置scope，才会让sinppet正常响应，可以参考：https://gist.github.com/iambibhas/4705378
如果设置错误，就会无效啦。
scope列表如下：
View Code
===========================================================================
现在，我们有了个大致的了解，那我们就开始自己动手编写一个实例：
创建完毕以后，保存在\Packages\User目录下（例 X:\Sublime Text 2.0\Data\Packages\User），文件命名为cft-code，后缀名.sublime-snoppet。
重启sublime text 2，该snippet即可使用了。
此时我们打开一个html文件，输入cft，再按Tab键，刚才我们所编写的代码段，就插入了进来。
并且此时的光标停留在我们所标记的${1}位置处，如果我们再按下Tab，那么光标就跳转到${2}的位置。
由于我们在scope中定义了仅在html文件中使用，所以此时如果我们打开的是css或其他格式的文件，那将无法插入代码段。
补充：除了利用快捷键Tab出代码之外，我们还能通过菜单来加载，打开Tools > Snippet，选择Snippet: custom-footer。如果你没有定义description，那此时便会看到以我们文件名为命名的Snippet: cft-code选项。
要是还没有看懂，那我们在来一个例子，下面是html5代码片段的定义：
保存完重启Sublime text 2，新建文件：输入html5,tab会出现如下效果：
${1}出现了两次，所以我们看到2个光标，这样我们就可以同时编辑图中两处。
${2:this}，所以在2处出现this默认值。
${3:snippet}，所以在3处出现snippet默认值。
${1}处编辑完按tab就到${2}处。
例如：使用snippet在新建文件时快速生成HTML头部信息等。
定义很简单，菜单：tools->new snippets，会新建一个xml文件页签：
<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:this} ]]></content>
<!-- 可选：快捷键，利用Tab自动补全代码的功能 -->
<tabTrigger>hello</tabTrigger>
<!-- 可选：使用范围，不填写代表对所有文件有效。附：source.css和text.html分别对应不同文件。 -->
<scope>source.python</scope>
<!-- 可选：在snippet菜单中的显示说明（支持中文）。如果不定义，菜单则显示当前文件的文件名。 -->
<description>My Fancy Snippet</description>
</snippet>现在对以上的参数进行说明：
content：是你要定义的模板内容;
===========================================================================
其中${序号:默认值} 表示序号相同的地方，光标会同时停在那，进行多处同时编辑；其中【:默认值】为自定义参数（可选），其中的【默认值】会直接输出在文件中；
如果是${序号}表示代码插入后，按Tab键，光标会根据顺序跳转到相应位置（以此类推）；
序号大小就是tabindex；
在实际使用代码的时候，可以使用tab切换光标位置。
===========================================================================
tabTrigger：是你按tab键之前需要输入的快捷字符串，输了该字符串后，按tab键，就在光标处插入content中的内容。
scope：这个很重要，表示这个snippet在什么文件或什么内容下有效，是对文件格式的限制，比如，html格式的要设置为text.html。
===========================================================================
如果你不知道如何设置scope，才会让sinppet正常响应，可以参考：https://gist.github.com/iambibhas/4705378
如果设置错误，就会无效啦。
scope列表如下：
ActionScript: source.actionscript.2 AppleScript: source.applescript ASP: source.asp Batch FIle: source.dosbatch C#: source.cs C++: source.c++ Clojure: source.clojure CSS: source.css D: source.d Diff: source.diff Erlang: source.erlang Go: source.go GraphViz: source.dot Groovy: source.groovy Haskell: source.haskell HTML: text.html(.basic) JSP: text.html.jsp Java: source.java Java Properties: source.java-props Java Doc: text.html.javadoc JSON: source.json Javascript: source.js BibTex: source.bibtex Latex Log: text.log.latex Latex Memoir: text.tex.latex.memoir Latex: text.tex.latex TeX: text.tex Lisp: source.lisp Lua: source.lua MakeFile: source.makefile Markdown: text.html.markdown Multi Markdown: text.html.markdown.multimarkdown Matlab: source.matlab Objective-C: source.objc Objective-C++: source.objc++ OCaml campl4: source.camlp4.ocaml OCaml: source.ocaml OCamllex: source.ocamllex Perl: source.perl PHP: source.php Regular Expression(python): source.regexp.python Python: source.python R Console: source.r-console R: source.r Ruby on Rails: source.ruby.rails Ruby HAML: text.haml SQL(Ruby): source.sql.ruby Regular Expression: source.regexp RestructuredText: text.restructuredtext Ruby: source.ruby Scala: source.scala Shell Script: source.shell SQL: source.sql TCL: source.tcl HTML(TCL): text.html.tcl Plain text: text.plain Textile: text.html.textile XML: text.xml XSL: text.xml.xsl YAML: source.yaml
View Code
===========================================================================
现在，我们有了个大致的了解，那我们就开始自己动手编写一个实例：
<snippet>
<content>
<![CDATA[
<footer>
<p>Copyright © 2012 ${1:feige}.com</p>
<p>增值电信业务经营许可证 赣A2-${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-snoppet。
重启sublime text 2，该snippet即可使用了。
此时我们打开一个html文件，输入cft，再按Tab键，刚才我们所编写的代码段，就插入了进来。
并且此时的光标停留在我们所标记的${1}位置处，如果我们再按下Tab，那么光标就跳转到${2}的位置。
由于我们在scope中定义了仅在html文件中使用，所以此时如果我们打开的是css或其他格式的文件，那将无法插入代码段。
补充：除了利用快捷键Tab出代码之外，我们还能通过菜单来加载，打开Tools > Snippet，选择Snippet: custom-footer。如果你没有定义description，那此时便会看到以我们文件名为命名的Snippet: cft-code选项。
要是还没有看懂，那我们在来一个例子，下面是html5代码片段的定义：
<snippet>
<content><![CDATA[
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>${1}</title>
</head>
<body>
<h1>${1}</h1>
Hello, ${2:this} is a ${3:snippet}.
</body>
</html>
]]></content>
<tabTrigger>html5</tabTrigger>
<scope>text.html</scope>
</snippet>保存完重启Sublime text 2，新建文件：输入html5,tab会出现如下效果：
${1}出现了两次，所以我们看到2个光标，这样我们就可以同时编辑图中两处。
${2:this}，所以在2处出现this默认值。
${3:snippet}，所以在3处出现snippet默认值。
${1}处编辑完按tab就到${2}处。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Sublime Text的Snippet功能来自定义代码片段
- sublime text 3 添加 javascript 代码片段 ( snippet )
- C# Snippet使用，代码片段管理
- sublime text 之snippet功能的使用
- sublime text 2:创建可复用的代码片段(snippet)
- Sublime Text 代码片段 .sublime-snippet
- Sublime Text 2使用：如何为它添加编译环境（如Lua编译环境）和代码片段
- Sublime Text 2使用：如何为它添加编译环境（如Lua编译环境）和代码片段
- sublime text3 之snippet编写代码片段
- Sublime Text 使用 – 用 github的gist 管理代码片段
- sublime snippet(代码片段)使用总结
- iOS开发之使用Code Snippet创建代码片段
- 使用ADS时候有uboot功能的启动代码
- Eclipse使用代码清理功能（Clean Up）
- 使用Github来管理的代码片段
- Zend Studio上安装使用Aptana插件(html,css,js代码提示功能)
- Zend Studio上安装使用Aptana插件(html,css,js代码提示功能)
- 使用ElasticSearch6.0快速实现全文搜索功能的示例代码
- 100个直接可以拿来用的JavaScript实用功能代码片段