Sublime Text 3-snippet菜鳥教程(動態(tài)圖演示)

介紹

經(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. 惕味;
  • `` 是激活 snippettrigger赦拘,本例中我們?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 皱蹦。
因為我們定義的 scopesource.js ,所以要在 JavaScript 文件中才能執(zhí)行怜珍。

  • 演示:


    demo1.gif

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>
  • 演示:


    demo2.gif

如果有多個占位符,用 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>
  • 演示:


    demo3.gif

如果有多個序號一樣的占位符憔古,光標會同時出現(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>
  • 演示:


    demo4.gif

其實還有叫 FieldsMirrored Fields 的兩個概念焰情,只是將 Placeholders 中的 ${1:this} 換成了 $1 拜姿,個人覺得有個占位值會讓人更容易明白需要輸入的內(nèi)容蕊肥,所以就不介紹了蛤肌,可以參考文檔 Sublime Text Documentation for Snippets #Filds


3裸准、一個文件下創(chuàng)建片段-Completions

上述方式可以建立 snippet ,但是如果建立的 snippet 比較多盐肃,修改起來就稍微有些麻煩砸王,那么你可以試試用一個文件來創(chuàng)建這些 snippet
我們要用的技術(shù)就是 SublimeCompletions 耘成,首先新建一個文件瘪菌,后綴為 .sublime-completions ,本例中我們命名為 welcome.sublime-completions 嘹朗,也放在 MySnippets 文件夾下,基本格式是這樣的:

{
    "scope": "source.js",

    "completions":
    [
      { "trigger": "welcome", "contents": "Welcome to ${1:Name}'s blog."},
    ]
}
  • scopetrigger 與之前講的一樣疆栏,只是格式不同;
  • 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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末竹勉,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子次乓,更是在濱河造成了極大的恐慌,老刑警劉巖照瘾,帶你破解...
    沈念sama閱讀 216,591評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件析命,死亡現(xiàn)場離奇詭異鹃愤,居然都是意外死亡完域,警方通過查閱死者的電腦和手機吟税,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,448評論 3 392
  • 文/潘曉璐 我一進店門肖抱,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人意述,你說我怎么就攤上這事荤崇∈趸纾” “怎么了瓣戚?”我有些...
    開封第一講書人閱讀 162,823評論 0 353
  • 文/不壞的土叔 我叫張陵带兜,是天一觀的道長。 經(jīng)常有香客問我喧兄,道長,這世上最難降的妖魔是什么吠冤? 我笑而不...
    開封第一講書人閱讀 58,204評論 1 292
  • 正文 為了忘掉前任拯辙,我火速辦了婚禮涯保,結(jié)果婚禮上夕春,老公的妹妹穿的比我還像新娘未荒。我一直安慰自己,他們只是感情好及志,可當我...
    茶點故事閱讀 67,228評論 6 388
  • 文/花漫 我一把揭開白布片排。 她就那樣靜靜地躺著,像睡著了一般速侈。 火紅的嫁衣襯著肌膚如雪率寡。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,190評論 1 299
  • 那天倚搬,我揣著相機與錄音勇劣,去河邊找鬼。 笑死潭枣,一個胖子當著我的面吹牛比默,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播盆犁,決...
    沈念sama閱讀 40,078評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼窜司!你這毒婦竟也來了帅涂?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,923評論 0 274
  • 序言:老撾萬榮一對情侶失蹤坯临,失蹤者是張志新(化名)和其女友劉穎看靠,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,334評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡烁峭,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,550評論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片芥丧。...
    茶點故事閱讀 39,727評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡物遇,死狀恐怖这敬,靈堂內(nèi)的尸體忽然破棺而出阳掐,到底是詐尸還是另有隱情汛闸,我是刑警寧澤,帶...
    沈念sama閱讀 35,428評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏巩检。R本人自食惡果不足惜丑搔,卻給世界環(huán)境...
    茶點故事閱讀 41,022評論 3 326
  • 文/蒙蒙 一谎仲、第九天 我趴在偏房一處隱蔽的房頂上張望杉武。 院中可真熱鬧,春花似錦、人聲如沸容燕。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,672評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽灰粮。三九已至柑肴,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,826評論 1 269
  • 我被黑心中介騙來泰國打工朴上, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人碉碉。 一個月前我還...
    沈念sama閱讀 47,734評論 2 368
  • 正文 我出身青樓毫蚓,卻偏偏與公主長得像元潘,于是被迫代替她去往敵國和親返咱。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,619評論 2 354

推薦閱讀更多精彩內(nèi)容