sublime開發工具，前端開發Emmet（zen coding）插件安裝與使用技巧

sublime開發工具，前端開發Emmet（zen coding）插件安裝與使用技巧

文章轉載自：http://www.cnblogs.com/tinyphp/p/3217457.html

　　　　　　http://www.zhugexiaojue.com/note/updatedrop-208.html　　

Sublime text 3下安裝Emmet插件

看清楚哦~~這是Sublime text 3不是2的版本，二者的安裝仍是有區別的，下面的方法是我感受比較簡單的，其餘的要命令什麼的感受太複雜了，經測試是OK的。

先關閉Sublime text 3：

第一步：下載sublime_package_control-master.zip ，解壓命名文件夾爲Package Control。(注意大小寫)

第二步：下載sublime_package_control-python3.zip，解壓後覆蓋到剛剛的Package Control中，完成插件API函數的更新。

第三步：打開Sublime Text 3，選擇菜單：Preference-->Browse Package... 瀏覽插件

第四步：把package control複製到此目錄，重啓 Sublime text 3。

而後菜單Preferences就會多了兩個Package..的東西以下： Package Control 安裝成功

第五步：

點擊菜單Preference-->Package Control

點擊Install Package

 

等待幾秒後再彈出以下內容，敲鍵盤emmet，選擇以下：

在 Emmet 安裝完成後，會顯示以下屏幕：而後會自動安裝PyV8，安裝完成，重啓 Sublime Text 3。

 

搜索框沒有emmet相關內容，手動把emmet插件放入第三步打開的文件夾，emmet插件下載>>

 

測試：

重啓以後還會看到左下角再次呈現 Loading PyV8 的提示，待其載入完畢，打開一個新文檔最後測試，輸入指令（不行就再重啓一下）

ul#test>li*4

按Ctrl+e 生成---

<ul id="test">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

相關：

下載sublime text3

縮寫API：

http://www.w3cplus.com/sites/default/files/baiyaimages/CheatSheet.jpg

 

超實用的emmet使用小技巧

1. 跳過Div

第一個小技巧就是跳過div，Emment很是清楚你須要輸入什麼內容，你只須要輸入class或者是id，Emmet會自動幫助你生成正確的div。以下：

你們能夠看到，無論你是否添加了div，Emmet都會自動生成須要div元素。

含糊標籤名稱

這個技巧屬於implicit tag names特性，你不須要指定div或者li，Emmet會自動幫助你生成，以下：

2. 帶有DOM導航的鏈式縮寫

若是你使用Emmet來擴展簡單的class名稱生成div的話。這個方式能夠幫助你省去大量的時間。你只須要記住以下語法：

• > 子節點：在DOM樹下一層添加建立一個元素
• + 同級別：在DOM樹同一層添加建立一個元素
• ^ 向上層：向上一層添加建立建立一個元素。

向上一層

若是須要的話你能夠向上多層，以下：

3. 使用分組來簡化你的代碼結構

有的時候你可能會發現使用向上符號比較複雜，這時候可能使用分組更加的合理。以下：

一個更復雜一些的例子，以下：

4. 插入文本和屬性

若是你須要生成HTML，內容和屬性也是你經常須要添加的。不少開發人員只是使用Emmet來生成框架，而後再添加內容。其實你能夠在生成頁面框架的過程當中同時添加屬性和內容。

從下面代碼能夠看到，你輸入的文字和屬性均可以分別經過大括號和中括號來生成。

5. 添加多個class到一個元素 

這個很是簡單，你只須要使用逗號來添加多個class，以下：

6.  重複添加

這多是最讓人舒服的操做了，幫助你重複添加元素：

若是你整合分組功能，那麼你將可以處理更復雜的HTML生成：

7. 自動列表記數 

若是你須要按順序生成HTML元素，這個技巧你必定喜歡，使用$符號能夠幫助你生成一系列數字，支持class，id，屬性，內容等等。以下：

注意若是你須要生成2位的數字，使用兩個$符號便可。 

再試一次

<!-- Skip The Div #1 -->div.container <!-- Skip The Div #2 -->.container <!-- Implicit Tag Names -->.wrap>ul.list>.sites <!-- Chaining Abbreviations -->.outer>.inner>h1+p <!-- Climbing Up #1 -->.wrap>p>a^p <!-- Climbing Up #2 -->.wrap>p>em>a^^p <!-- Grouping #1 -->(.one>h1)+(.two>h1) <!-- Grouping #2 -->(section>.wrap>h1>p>a)+(section>.wrap>p+p) <!-- Text & Attributes #1 -->h1{heading}+p{lorem ipsum} <!-- Text & Attributes #2 -->a[href="http://www.apple.com"]{Apple} <!-- Multiple Class Names -->.one.two.three <!-- Multiplication #1 -->ul>li*3 <!-- Multiplication #2 -->(section>.wrap)*2 <!-- Automatic Numbering -->ul>li.item${item $$}*3