我是FE,也是Fe

          前端來源于不斷的點滴積累。我一直在努力。

          統計

          留言簿(15)

          閱讀排行榜

          評論排行榜

          sublime text 2學習(二):創建可復用的代碼片段

          對于前端工程師來講,寫一個html頁面的基本結構是體力活,每次去拷貝一個也麻煩,sublime text 2 提供了一個很好的復用代碼片段。下面介紹一下創建一個html5的代碼片段的過程。

          在菜單上點擊Tools -> New Snippet,會新建一個xml文件頁簽:
          <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>

          注釋已經說的比較詳細了。

          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。







          posted on 2012-08-17 13:30 衡鋒 閱讀(16825) 評論(4)  編輯  收藏 所屬分類: Web開發sublime text

          評論

          # re: sublime text 2學習(二):創建可復用的代碼片段[未登錄] 2012-10-31 11:57 ff

          用了一下,真的很不錯sublime真強大,感謝博主的分享啊  回復  更多評論   

          # re: sublime text 2學習(二):創建可復用的代碼片段 2013-10-12 02:34 D.T

          膜拜啊,哥你下輩子可以做女人了,哈哈,因為吊爆了  回復  更多評論   

          # re: sublime text 2學習(二):創建可復用的代碼片段 2013-10-25 09:16 Ye

          3Q,找了好久,終于學會了  回復  更多評論   

          # re: sublime text 2學習(二):創建可復用的代碼片段 2013-11-12 12:41 紅領巾

          博主,可以問下像div#test tab補全后會生成id=test的div這種補全怎么弄呢,我想實現input~text自動補全成<input type="text">。  回復  更多評論   

          主站蜘蛛池模板: 察雅县| 沙田区| 遵义县| 镇远县| 洪雅县| 芷江| 潼关县| 磐安县| 郴州市| 津南区| 临西县| 顺平县| 绿春县| 会泽县| 冀州市| 久治县| 紫阳县| 自治县| 县级市| 饶阳县| 信宜市| 胶南市| 兴安盟| 永平县| 仙游县| 罗甸县| 万荣县| 汶川县| 麻阳| 缙云县| 甘洛县| 高雄市| 莒南县| 个旧市| 彰化县| 陈巴尔虎旗| 余庆县| 大邑县| 芦溪县| 双辽市| 武陟县|