對(duì)于前端工程師來講，寫一個(gè)html頁(yè)面的基本結(jié)構(gòu)是體力活，每次去拷貝一個(gè)也麻煩，sublime text 2 提供了一個(gè)很好的復(fù)用代碼片段。下面介紹一下創(chuàng)建一個(gè)html5的代碼片段的過程。
在菜單上點(diǎn)擊Tools -> New Snippet，會(huì)新建一個(gè)xml文件頁(yè)簽：
<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>
注釋已經(jīng)說的比較詳細(xì)了。
content 里面就是代碼模版：${序號(hào)：默認(rèn)值} ，序號(hào)相同的地方光標(biāo)會(huì)同時(shí)停在那可以多處同時(shí)編輯。序號(hào)大小就是tabindex。在實(shí)際使用代碼的時(shí)候，可以使用tab切換光標(biāo)位置。
tabTrigger是指輸入該字符串后tab就是在光標(biāo)插入content中的內(nèi)容。
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下) 默認(rèn)的保存路徑就行。后綴必須是.sublime-snippet。
保存完重啟Sublime text 2，新建文件：輸入html5,tab會(huì)出現(xiàn)如下效果：
${1}出現(xiàn)了兩次，所以光標(biāo)同時(shí)編輯圖中兩處。
${2:this}，所以在2處出現(xiàn)this默認(rèn)值。${1}處編輯完按tab就到${2}處。
OK, That's all。