首頁 > 開發者 > Sublime Text
標籤：
對於前端工程師來講，寫一個html頁面的基本結構是體力活，每次去拷貝一個也麻煩，sublime text 2 提供了一個很好的複用程式碼片段。下面介紹一下建立一個html5的程式碼片段的過程。
在菜單上點擊Tools -> New Snippet，會建立一個xml檔案頁簽：
1 <snippet>2 <content><![CDATA[3 Hello, ${1:this} is a ${2:snippet}.4 ]]></content>5 <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->6 <!-- <tabTrigger>hello</tabTrigger> -->7 <!-- Optional: Set a scope to limit where the snippet will trigger -->8 <!-- <scope>source.python</scope> -->9 </snippet>
注釋已經說的比較詳細了。
content 裡面就是代碼模版：${序號：預設值} ，序號相同的地方游標會同時停在那可以多處同時編輯。序號大小就是tabindex。在實際使用代碼的時候，可以使用tab切換游標位置。
tabTrigger是指輸入該字串後tab就是在游標插入content中的內容。
scope是指在何種檔案類型中使用。
下面是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> <!-- Optional: Set a tabTrigger to define how to trigger the snippet --> <tabTrigger>html5</tabTrigger> <!-- Optional: Set a scope to limit where the snippet will trigger --> <!-- <scope>source.python</scope> --></snippet>
編輯完之後儲存為 C:\Users\[使用者]\AppData\Roaming\Sublime Text 2\Packages\User\html5.sublime-snippet (Win7下) 預設的儲存路徑就行。尾碼必須是.sublime-snippet。
儲存完重啟Sublime text 2，建立檔案：輸入html5,tab會出現如下效果：
${1}出現了兩次，所以游標同時編輯圖中兩處。
${2:this}，所以在2處出現this預設值。${1}處編輯完按tab就到${2}處。
OK, That‘s all。
sublime text 2學習(一):建立可複用的程式碼片段
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
