Sublime擴展代碼塊 · 模板

[TOC] # 使用 Sublime-snippet 來快速做前端頁面來自：http://www.jianshu.com/p/219de00c8343 ## Sublime-snippet 簡介在 Sublime 中，可以通過 Sublime-snippet 來快速補全代碼。舉個栗子，如果在 Sublime 的存放 Submlime-snippet 的文件夾下有如下的文件(elem-edge.sublime-snippet 文件名不重要) ``` <snippet> <tabTrigger>elem-edge</tabTrigger> <description>edge of the element</description> <content><![CDATA[  ${2:content}  ]]></content> </snippet> ``` 其中， * <content><![CDATA[ ]]></content> 定義了補全的內容 * ${1:elem name} 中： 1是輸入點的序號，1表示的是第一個輸入點，elem name表示的是輸入點的默認值。 * ${2:content} 中：2表示第二個輸入點。 * <tabTrigger> ：定義了觸發補全的字符串 * <description> ：對snippet描述打開任意一個文件，通過輸入elem-edge，然后按Tab鍵，就可以補全內容。再按Tab進入下一個輸入點。上面的是snippet在任意類型的文件中都能觸發。如果要限定文件類型，可以用 <scope>source.文件類型</scope>。 ## 創建 Submlime-snippet 的方式 1. 在菜單中打開 Tools-> New Snippet 2. 編輯內容 3. 保存 ## 用 Submlime-snippet 來快速做前端頁面的方式 1. 制作一個組件演示頁面 2. 打開 Sublime 存放 snippet 文件夾。打開方式是：打開 Preferences>Browse Package，在打開的文件夾中，打開 User文件夾。即 Sublime 存放 snippet 的文件夾。 3. 新建一個文件夾，名稱為項目的名稱。這樣做是方便管理。應該沒人一輩子只做一個項目吧~ 4. 將一個個組件做成一個個的Snippet。為了保證和之前的Snippet的觸發的按鍵不沖突，定義觸發按鍵要加項目名稱。例如,下面是一個通用的 Box ``` <snippet> <content><![CDATA[  <div class="box ${1:box-name}-box"> <div class="box-header clearfix"> <h3 class="box-title">${2:title}</h3> <div class="box-header-op"> <a href="###">更多>></a> </div> </div> <div class="box-content">${3:content}</div> </div>  ${4:} ]]></content> <tabTrigger>項目名稱:box</tabTrigger> </snippet> ``` 稍微復雜一點的，分頁組件。 ``` <snippet> <content><![CDATA[  <link rel="stylesheet" href="path-to-jquery.paging.css/jquery.paging.css"> <script src="path-to-jquery.paging.js/jquery.paging.js"></script> <div class="paging-wrap ${1:paging-name}"></div> /*var pager = \$('.${1:paging-name}').paging({ pageNum: 10, onPageChange: function(pageAt) { console.log(pageAt); } });*/  ]]></content>  <tabTrigger>項目名稱:paging</tabTrigger>   </snippet> ``` >注意，補全內容如果要輸出$的話，要用``進行轉義。然后，就可以進行飛速的編碼啦~ ## 推薦最后，推薦幾個，比較好用的 Sublime 的自動補全插件 * Emmet 這個大家應該都知道 * Bootstrap 3 Snippets 快速生成bootstrap3的一些組件的 Snippets。