https://www.jianshu.com/p/356bd7b2ea8e
下載APP
搜索
手把手教你寫Sublime中的Snippet
Andrew_liu
手把手教你寫Sublime中的Snippet
Andrew_liu
0.221
2014.12.10 22:16:30
字數 914
閱讀 22,782
Sublime Text號稱最性感的編輯器, 並且越來越多人使用, 美觀, 高效
關於如何使用Sublime text可以參考我的另一篇文章, 相信你會喜歡上的..
Sublime Text 2使用心得
現在介紹一下Snippet, Snippets are smart templates that will insert text for you and adapt it to their context. Snippet 是插入到文本中的智能模板並使這段文本適當當前代碼環境. 程序員總是會不斷的重寫一些簡單的代碼片段, 這種工作乏味/無聊, 而Snippet的出現會讓Code更加高效.
1. Snippe創建,存儲和格式
(這裏snippet稱作代碼片段)
Snippet可以存儲在任何的文件夾中, 並且以.sublime-snippet爲文件擴展名, 默認是存儲在.sublime-snippet文件夾下.
Snippet文件是以.sublime-snippet爲擴展的XML文件, 可以命名爲XXX.sublime-snippet, 創建自己的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[Type your snippet here]]></content>
<!-- Optional: Tab trigger to activate the snippet -->
<tabTrigger>hello</tabTrigger>
<!-- Optional: Scope the tab trigger will be active in -->
<scope>source.python</scope>
<!-- Optional: Description to show in the menu -->
<description>My Fancy Snippet</description>
</snippet>
簡要介紹一下snippet四個組成部分:
content:其中必須包含<![CDATA[…]]>,否則無法工作, Type your snippet here用來寫你自己的代碼片段
tabTrigger:用來引發代碼片段的字符或者字符串, 比如在以上例子上, 在編輯窗口輸入hello然後按下tab就會在編輯器輸出Type your snippet here這段代碼片段
scope: 表示你的代碼片段會在那種語言環境下激活, 比如上面代碼定義了source.python, 意思是這段代碼片段會在python語言環境下激活.
description :展示代碼片段的描述, 如果不寫的話, 默認使用代碼片段的文件名作爲描述
2. snippet環境變量
列舉一下可能用到的環境變量, 這些環境變量是在Sublime中已經預定義的.
環境變量名 描述
$TM_FILENAME 用戶文件名
$TM_FILEPATH 用戶文件全路徑
$TM_FULLNAME 用戶的用戶名
$TM_LINE_INDEX 插入多少列, 默認爲0
$TM_LINE_NUMBER 一個snippet插入多少行
$TM_SOFT_TABS 如果設置translate_tabs_to_spaces : true 則爲Yes
$TM_TAB_SIZE 每個Tab包含幾個空格
同一通過下面的代碼片段進行驗證:
<snippet>
<content><![CDATA[
=================================
$TM_FILENAME 用戶文件名
$TM_FILEPATH 用戶文件全路徑
$TM_FULLNAME 用戶的用戶名
$TM_LINE_INDEX 插入多少列, 默認爲0
$TM_LINE_NUMBER 一個snippet插入多少行
$TM_SOFT_TABS 如果設置translate_tabs_to_spaces : true 則爲Yes
$TM_TAB_SIZE 每個Tab包含幾個空格
=================================
]]></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,在python文件夾下輸入hello按下tab
3. snippet Fields
設置Fields, 可以通過tab鍵循環的改變代碼片段的一些值
<snippet>
<content><![CDATA[
=================================
First Name: $1
Second Name: $2
Address: $3
=================================
]]></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>
驗證方式, 在python文件夾下, 輸入hello按下tab, 會出現已經定義的代碼片段, 不停的按下tab會發現輸入光標在$1, $2, $3的位置跳轉, 跳轉順序由數字由小到大決定, Shift+Tab可以進行向上跳轉, 可以通過Esc結束跳轉
4. snippet Mirrored Fields
設置snippet鏡像區域,會使相同編號的位置同時進行編輯
<snippet>
<content><![CDATA[
=================================
First Name: $1
Second Name: $1
Address: $1
=================================
]]></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>
驗證方法: 在python文件中, 輸入hello按下tab,出現代碼片段,會出現三行同行編輯的光標, 這時進行編輯可以同時進行三行相同的編輯
5. snippet Placeholders
snippet 佔位符含義類似於python的默認參數, 通過對Field做出一點修改, 可以定義Field的默認值, 並且可以通過tab鍵可以對不同的默認值進行修改
<snippet>
<content><![CDATA[
=================================
First Name: ${1:Guillermo}
Second Name: ${2:López}
Address: ${3:Main Street 1234}
User name: $1
Environment Variable : ${4:$TM_FILEPATH } #可以設置默認佔位符爲環境變量
Test: ${5:Nested ${6:Placeholder}}
=================================
]]></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>
驗證方式: 在pyton文件中輸入hello,然後按下tab, 輸入代碼片段後, 兩個$1的field可以同時修改默認值, 然後繼續按下tab鍵可以修改$2的默認值..., 還可以佔位符設置嵌套
寫到這裏基本上大家都應該可以根據需求編寫簡單的snippet了, 恭喜你..
6. snippet Substitutions
高級應用可以使用Perl的正則表達式
最後送上簡單的python的snippet
<snippet>
<content><![CDATA[
"""
文檔註釋
Args :
${1}:
Returns :
${2}:
Raises :
${3}:
"""
]]></content>
<tabTrigger>"""</tabTrigger>
<scope>source.python</scope>
<description>Documentation Comments</description>
</snippet>
###
<snippet>
<content><![CDATA[def ${1:foo}():
doc = "${2:The $1 property.}"
def fget(self):
${3:return self._$1}
def fset(self, value):
${4:self._$1 = value}
def fdel(self):
${5:del self._$1}
return locals()
$1 = property(**$1())$0]]></content>
<tabTrigger>property</tabTrigger>
<scope>source.python</scope>
<description>New Property</description>
</snippet>
7. 拓展閱讀和參考鏈接
Snippets
Syntax Definitions
Perl Regular Expression Syntax
Boost-Extended Format String Syntax
"小禮物走一走，來簡書關注我"
Andrew_liu
重度強迫症患者 軟件...
總資產9 (約0.95元)共寫了3.2W字獲得2,256個贊共3,139個粉絲
寫下你的評論...
全部評論
12
EternalFire
10樓 2017.08.16 14:24
在sublime text 3裏, 是通過這種方式新建Snippet:
Tools -> Developer -> New Snippet
:blush:
lerko_
9樓 2017.08.11 14:27
推薦一個插件叫snipetmaker，可以快速寫snippet
EternalFire
2017.08.16 14:25
少寫了個字母p吧......
lerko_
2017.08.18 09:13
@EternalFire :joy: 這都被你發現了
鰻魚飯_吃
8樓 2016.10.07 18:27
mark
喬其紗
7樓 2015.11.19 09:11
:progid:
喬其紗
6樓 2015.11.19 09:10
:progid:
Andrew_liu
5樓 2014.12.11 09:49
@CharlesTang dash有在用, 但主要是用來查文檔. 不太愛用IDE, 更喜歡簡潔的編輯器,然後自己我往上加功能, 就是愛折騰 - :stuck_out_tongue_winking_eye:
CharlesTang
4樓 2014.12.11 09:18
這種東西背限制在一個編輯器裏，還是有點弱的，如果用Mac可以看看dash的相同功能。非常好用，系統全局觸發。而且所有主流IDE都有這個功能。
另一方面，我覺得，這個功能有點反人類，竟然需要背出來所有的觸發詞才能愉快的使用這個功能，但是，這就跟設置了密碼老是忘一個道理……
will2yang
2017.11.10 08:44
沒dash 方便就沒dash方便強行反人類 爲什麼要snippet 只是因爲經常要敲重複代碼 重複代碼都記不住。。。
Andrew_liu
3樓 2014.12.11 08:49
@掛瓜 還好吧, xml也就做個格式, 主要還是自己寫下邏輯, 不是太難 :relaxed:
掛瓜
2樓 2014.12.10 23:10
有事沒事用xml，看的我很頭疼。
被以下專題收入，發現更多相似內容
Pythone...
代碼改變世界
編程工具
程序員
Sublime...
技術硬通貨
Sublime
推薦閱讀
更多精彩內容
轉載：Sublime Text 全程指南
Sublime Text 全程指南 2014年 9月27日|評論 作者：Lucida 微博：@peng_gong ...
raincoat
閱讀 4,079
評論 5
贊 70
Sublime Text 全程指南
轉載自：http://lucida.me/blog/sublime-text-complete-guide/ Su...
東引甌越
閱讀 3,890
評論 3
贊 80
Sublime Text 插件介紹合集
轉戰vscode 20170829 Sublime Text 插件介紹合集 1 Emmet 功能：編碼快捷鍵，前端...
小小遊輪
閱讀 1,524
評論 0
贊 7
值得收藏！神級代碼編輯器 Sublime Text 全程指南
原文地址http://mdsa.51cto.com/art/201507/484183_all.htm 本文系統全...
不負如來不負親
閱讀 4,521
評論 4
贊 63
Sublime Text 3 配置和使用方法
下載：Sublime Text 3 官方下載地址Sublime Text 3 漢化破解版 資料：Sublime T...
追風逸少丶
閱讀 5,030
評論 0
贊 2
廣告
Andrew_liu
總資產9 (約0.95元)
Scala入門筆記
閱讀 2,831
Atom開箱指南
閱讀 10,372
推薦閱讀
VsCode 自定義代碼片段變量說明
閱讀 291
協方差矩陣和散佈（散度）矩陣
閱讀 147
CleanMyMac X v4.6.0 for Mac-TNT中文完美破解版（附激活碼）
閱讀 2,075
臺大李宏毅機器學習公開課2020版登陸B站
閱讀 2,685
H5小遊戲合集
閱讀 250
廣告
寫下你的評論...