介紹
經(jīng)常在碼代碼的時候,為了減少代碼的輸入赛惩,會創(chuàng)建代碼的片段躏碳,在需要的時候直接呼出即可搞旭。這種方法往往能夠提高我們的效率,同時也大大降低我們代碼的出錯幾率!在 Sublime Text
中肄渗,就提供了創(chuàng)建代碼片段的功能镇眷,接下來我們就來看看如何自定義 snippet
欠动。
1惑申、創(chuàng)建片段-Snippet
在 Sublime Text 3
中,點擊 Tools->Developer->New Snippet...
就可以打開創(chuàng)建 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>
- 位于
CDATA[]
中的內(nèi)容就是你需要替換的內(nèi)容萤厅,本例中我們將其替換為Welcome to Tom's blog.
惕味; - `` 是激活
snippet
的trigger
赦拘,本例中我們?nèi)∠⑨尯髮⑵涓某?<tabTrigger>welcome</tabTrigger>
芬沉; - `` 激活的環(huán)境(具體參考附錄的列表)丸逸,默認是在python語言下激活黄刚,本例中我們將其改成
<scope>source.js</scope>
民效;
修改后的 snippet
就是這樣了:
<snippet>
<content><![CDATA[
Welcome to Tom's blog.
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>welcome</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.js</scope>
</snippet>
這樣就算完成了一個簡單的 snippet
的定義畏邢,取個名字保存到 Sublime Text 3\Packages\User\MySnippets
下舒萎, MySnippets
是自己建的,便于管理自定義的 snippet
摊灭。保存文件的后綴名必須是 .sublime-snippet
败徊,本例中我們保存的是 welcome.sublime-snippet
皱蹦。
因為我們定義的 scope
是 source.js
,所以要在 JavaScript
文件中才能執(zhí)行怜珍。
-
演示:
2酥泛、創(chuàng)建占位符-Placeholders
接下來有個問題了柔袁,我不想每次都輸出 Welcome to Tom's blog.
异逐,我想每次由我自定義名字灰瞻,那好,看見模板替換內(nèi)容里面的 ${1:this}
了吧燎竖,這就是占位符构回∠说В基本格式是 $
浑塞,自動補全之后光標會出現(xiàn)在該位置處缩举。 1
是序號匹颤,表示光標第一次出現(xiàn)的地方印蓖, this
是默認占位值赦肃,本例中我們將其修改為 ${1:Name}
,并將內(nèi)容修改為 Welcome to ${1:Name}'s blog.
修改后的內(nèi)容就是這樣了:
<snippet>
<content><![CDATA[
Welcome to ${1:Name}'s blog.
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>welcome</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.js</scope>
</snippet>
-
演示:
如果有多個占位符,用 tab
鍵進行切換厅各,回切用 shift+tab
预柒。
<snippet>
<content><![CDATA[
Welcome to ${1:Name}'s blog.
I'm ${2:Age} years old.
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>welcome</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.js</scope>
</snippet>
-
演示:
如果有多個序號一樣的占位符憔古,光標會同時出現(xiàn)在多個地方淋袖。
<snippet>
<content><![CDATA[
Welcome to ${1:Name}'s blog.
My name is ${1:Name}.
I'm ${2:Age} years old.
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>welcome</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.js</scope>
</snippet>
-
演示:
其實還有叫 Fields
和 Mirrored Fields
的兩個概念焰情,只是將 Placeholders
中的 ${1:this}
換成了 $1
拜姿,個人覺得有個占位值會讓人更容易明白需要輸入的內(nèi)容蕊肥,所以就不介紹了蛤肌,可以參考文檔 Sublime Text Documentation for Snippets #Filds
3裸准、一個文件下創(chuàng)建片段-Completions
上述方式可以建立 snippet
,但是如果建立的 snippet
比較多盐肃,修改起來就稍微有些麻煩砸王,那么你可以試試用一個文件來創(chuàng)建這些 snippet
。
我們要用的技術(shù)就是 Sublime
的 Completions
耘成,首先新建一個文件瘪菌,后綴為 .sublime-completions
,本例中我們命名為 welcome.sublime-completions
嘹朗,也放在 MySnippets
文件夾下,基本格式是這樣的:
{
"scope": "source.js",
"completions":
[
{ "trigger": "welcome", "contents": "Welcome to ${1:Name}'s blog."},
]
}
-
scope
和trigger
與之前講的一樣疆栏,只是格式不同; -
contents
后面跟的和之前CDATA[]
里的內(nèi)容一樣壁顶。
我創(chuàng)建的一個Completions文件:
{
"scope": "source.js",
"completions":
[
{ "trigger": "mdh1", "contents": "# ${1:Heading1} #\n${2:Next Line}"},
{ "trigger": "mdh2", "contents": "## ${1:Heading2} ##\n${2:Next Line}"},
{ "trigger": "mdh3", "contents": "### ${1:Heading3} ###\n${2:Next Line}"},
{ "trigger": "mdh4", "contents": "#### ${1:Heading4} ####\n${2:Next Line}"},
{ "trigger": "mdh5", "contents": "##### ${1:Heading5} #####\n${2:Next Line}"},
{ "trigger": "mdh6", "contents": "###### ${1:Heading6} ######\n${2:Next Line}"},
{ "trigger": "mdb", "contents": "**${1:Bold Text}**${2:}"},
{ "trigger": "mdi", "contents": "*${1:Italic Text}*${2:}"},
{ "trigger": "mdbq", "contents": "> ${1:Blockquote Text}\n\n${2:Next Line}"},
{ "trigger": "mdhr", "contents": "***\n${1:Next Line}"},
{ "trigger": "mdic", "contents": "`${1:Code}`"},
{ "trigger": "mdbc", "contents": "```\n${1:Code}\n```\n${2:Next Line}"},
{ "trigger": "mda", "contents": "[${1:Website}](http://${2:URL})"},
{ "trigger": "mdimg", "contents": "![${1:Alternate Text}](http://${2:URL})"},
{ "trigger": "mdol", "contents": "1. ${1:Ordered List}"},
{ "trigger": "mdul", "contents": "- ${1:Unordered List}"},
]
}
注意:
- 這是
JSON
格式的文件,鍵值都要在""
內(nèi)蝴猪,- 每行的
,
不能少- 為了統(tǒng)一格式自阱,換行我用的
\n
轉(zhuǎn)義字符沛豌。
附錄-scope
ActionScript: source.actionscript.2
AppleScript: source.applescript
ASP: source.asp
Batch FIle: source.dosbatch
C#: source.cs
C++: source.c++
Clojure: source.clojure
CoffeeScript: source.coffee
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
LESS: source.css.less
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
SASS: source.sass
Scala: source.scala
Shell Script: source.shell
SQL: source.sql
Stylus: source.stylus
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
還有未涉及的概念沒有介紹叫确,可以參考 Sublime Text Documentation for Snippets