Sublime Text 3常用外掛安裝（含Emmet外掛指令介紹）
（本內容基於Windows環境）
一、已安裝有Sublime Text3
二、安裝Package Control
安裝這個後，可以線上安裝所需的外掛
方法1、Ctrl+~開啟控制檯，在控制檯輸入如下的Python命令
import urllib.request,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();urllib.request.install_opener(urllib.request.build_opener(urllib.request.ProxyHandler()));open(os.path.join(ipp,pf),'wb').write(urllib.request.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())
等待下載安裝。
方法2、下載Package Control外掛包到外掛目錄
外掛目錄在選單中開啟Preference--Browse Packages，沒有自己新建一個
按照提示重啟Sublime Text3，如果在Preferences->package settings中有看到package control這一項，則安裝成功，如果沒有，參照方法2可以下載package Control手動安裝
三、安裝外掛
常用的命令：Install Package（安裝擴充套件）
List Package（列出全部擴充套件）
Remove Package（移除擴充套件）
Upgrade Package（升級擴充套件）
1、Emmet外掛的安裝
1）Ctrl+Shift+P：調出控制皮膚
2）搜尋框鍵入Install Package命令（也可以簡寫）並回車，然後在列表選擇Emmet（也可以直接搜尋Emmett進行檢索）
3）點選確定等待安裝
4）自動安裝結束會自動彈出一個外掛的安裝資訊的檔案。重新調出控制皮膚，鍵入List Package列出全部擴充套件，檢視是否已經安裝成功。
Emmet常用技巧：（輸入下面簡寫，按Tab鍵可觸發效果）
生成 HTML 文件初始結構
html:5 或者 ! 生成 HTML5 結構
html:xt 生成 HTML4 過渡型
html:4s 生成 HTML4 嚴格型
生成帶有 id 、class 的 HTML 標籤
Emmet 預設的標籤為 div ，如果我們不給出標籤名稱的話，預設就生成 div 標籤。
編寫一個 class 為 bbb 的 span 標籤，我們需要編寫下面指令：
span.bbb
編寫一個 id 為 ccc 的 class 為 ddd 的 ul 標籤
ul#ccc.ddd
生成後代：>
大於號表示後面要生成的內容是當前標籤的後代。
要生成一個無序列表，而且被 class 為 aaa 的 div 包裹
div.aaa>ul>li
生成一個有序列表
.abc>ol>li
生成兄弟：+
上面是生成下級元素，如果想要生成平級的元素，就需要使用 + 號
div+p+bq
生成上級元素：^
上級 （Climb-up）元素是什麼意思呢？前面我們們說過了生成下級元素的符號“>”，當使用 div>ul>li 的指令之後，再繼續寫下去，那麼後續內容都是在 li 下級的。如果我想編寫一個跟 ul 平級的 span 標籤，那麼我需要先用 “^” 提升一下層次
div>ul>li^span
重複生成多份：*
重複生成多份：*
特別是一個無序列表，ul 下面的 li 肯定不只是一份，通常要生成很多個 li 標籤。那麼我們可以直接在 li 後面 * 上一些數字：
ul>li*5
生成分組：()
用括號進行分組，這樣可以更加明確要生成的結構，特別是層次關係
div>(header>ul>li*2>a)+footer>p
生成自定義屬性：[attr]
a 標籤中往往需要附帶 href 屬性和 title 屬性，如果我們想生成一個 href 為 “http://blog.wpjam.com” ，title 為“我愛水煮魚”的 a 標籤
a[href="http://blog.wpjam.com" title="我愛水煮魚"]
對生成內容編號：$
如無序列表，我想為五個 li 增加一個 class 屬性值 item1 ，然後依次遞增從 1-5，那麼就需要使用 $ 符號：
ul>li.item$*5
$ 就表示一位數字，只出現一個的話，就從1開始。如果出現多個，就從0開始。如果我想生成三位數的序號，那麼要寫三個 $
ul>li.item$$$*5
只能這樣單調的生成序號？對於強大的 Emmet 來說，肯定不會會了，我們也可以在 $ 後面增加 @- 來實現倒序排列
ul>li.item$@-*5
同樣，我們也可以使用 @N 指定開始的序號：
ul>li.item$@3*5
生成文字內容：{}
上面講解了如何生成 HTML 標籤，那裡面的內容呢？當然也可以生成了：
a[href="http://blog.wpjam.com"]{點選這裡到 我愛水煮魚}
在生成內容的時候，特別要注意前後的符號關係，雖然 a>{Click me} 和 a{Click me} 生成的結構是相同的，但是加上其他的內容就不一定了
<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>
<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>
不要有空格
在寫指令的時候，你可能為了程式碼的可讀性，使用一些空格什麼的排版一下。這就會導致程式碼無法使用。
CSS中的應用
編寫 position: absolute; 這一個屬性，我們只需要輸入 posa 這四個字母即可
1、簡寫屬性和屬性值
如果你想生成 width:100px; 你只需要輸入 w100 就可以了，因為 Emmet 的預設設定 w 是 width 的縮寫，後面緊跟的數字就是屬性值。預設的屬性值單位是 px ，你可以在值的後面緊跟字元生成單位，可以是任意字元。例如，w100foo 會生成 width:100foo; 這樣一條語句。你同樣也可以簡寫屬性單位，如果你緊跟屬性值後面的字元是 p ，那麼將會生成 width:100%; 這樣的語句，其中 p 表示百分比單位。與此類似的還有：e → em; x → ex
margin 這樣的屬性，可能並不是一個屬性值，生成多個屬性值需要用橫槓（-）連線兩個屬性值，因為 Emmet 的指令中是不允許空格的。例如使用 m10-20 這條命令可以生成 margin: 10px 20px; 這樣一條語句。如果你想生成負值，多加一條橫槓即可。需要注意的是，如果你對每個屬性都指定了單位，那麼不需要使用橫槓分割。例如使用 m10ff20ff 這條命令可以生成 margin: 10ff 20ff; 這條語句，如果你在 20ff 前面加了橫槓的話，20ff 就會變成負值了
你想一次生成多條語句，可以使用 ‘+’ 連線兩條語句，例如使用 h10p+m5e 可以生成 height: 10%;margin: 5em; 這兩條語句
顏色值也是可以快速生成的，例如 c#3 → color: #333;，更復雜一點的，使用 bd5#0s 可以生成border: 5px #000 solid; 這樣一句
#1 → #111111
#e0 → #e0e0e0
#fc0 → #ffcc00
生成 !important 這條語句也當然很簡單，只需要一個 ‘!’ 就可以了
2、增加額外的選項
使用 @f 即可生成 CSS3 中的 font-face 的程式碼結構
background-image、 border-radius、 font、@font-face、 text-outline、 text-shadow 等屬性，我們可以在生成的時候輸入 ‘+’ 生成增強的結構，例如我們可以輸入 @f+ 命令，即可輸出選項增強版的 font-face 結構
3、增加實驗性字首（Vendor Prefixes）
CSS3 等現在還沒有出正式的 W3C 規範，但是很多瀏覽器已經實現了對應的功能，僅作為測試只用，所以在屬性前面加上自己獨特的實驗性字首，不同的瀏覽器只會識別帶有自己規定字首的樣式。然而為了實現相容性，我們不得不編寫大量的冗餘程式碼，而且要加上對應的字首。使用 Emmet 可以快速生成帶有字首的 CSS3 屬性。
內建了一些常見的需要實驗性字首的 CSS3 屬性，例如輸入 trf 會彈出提示，然後敲擊Enter鍵即可生成。而 Emmet 增強了這個功能。在任意字元前面加上一條橫槓（-），即可生成該屬性的帶字首程式碼，例如輸入 -foo-css
雖然 foo-css 並不是什麼屬性，但是照樣可以生成。此外，你還可以詳細的控制具體生成哪幾個瀏覽器字首或者先後順序，使用 -wm-trf 即可生成
w 就是 webkit 字首的縮寫，m 是 moz 字首縮寫，s 是 ms 字首縮寫，o 就是 opera 瀏覽器字首的縮寫。如果使用 -osmw-abc 即可生成
4、生成漸變背景
CSS3 中新增加了一條屬性 linear-gradient 使用這個屬性可以直接製作出漸變的效果。但是這個屬性的引數比較複雜，而且需要新增實驗性字首，無疑需要生成大量程式碼。而在 Emmet 中使用 lg() 指令即可快速生成，例如：使用 lg(left, #fff 50%, #000) 可以直接生成：
Emmet高階功能介紹：
5、生成 Lorem Ipsum
Lorem Ipsum 表示一段隨機看不懂的文字。Lorem Ipsum的文字讓人看不懂，這樣才能忽略內容的含義而專注內容的排版，作為測試資料填充用的。使用 Emmet 生成Lorem Ipsum 文字非常簡單，只需要使用 lorem 這一條命令即可，敲擊 Tab 鍵之後
Emmet 的 lorem 命令不僅僅只有輸出這麼一段文字這樣一個簡單的功能，它既然作為測試資料，可以加上引數指定要輸出的字元數量。例如，我們如果想輸出一個十個單詞的 h1 標題，我們就可以使用如下命令 h1>lorem10 。但是這項功能對於使用中文的網頁測試來說，好像沒有多大用處，畢竟中文和英語單詞的排版是不同的。
6、跳轉編輯區域
用 Shift+Ctrl+. 和 Shift+Ctrl+,分別向下或者向上移動，選取的是一整塊，先從標籤開始，再是整個屬性，再是屬性值。
7、增加圖片的尺寸大小
將游標移動到程式碼段，摁下 Ctrl+U 即可讓 Emmet 自動讀取圖片的尺寸新增上。前提條件是圖片比較存在並且正確引用進來了
針對 <img> 標籤的，會在後面加上 width、height 屬性，如果是 background 引入的，會在下面加上 width、height 的 CSS 屬性
8、更新 CSS 的屬性值
想修改一下旋轉的角度值，那麼我們就需要依次修改或者按住 Ctrl 多個選中進行修改。使用 Emmet 的話，就方便多了，我們只需要修改其中一個，然後摁下 Shift+Ctrl+R 鍵即可更新其他的相關屬性值
9、將圖片資源轉換成 data url 形式
將游標移動到 background: url() 中的圖片位置的地方，按下 Ctrl+’ 即可將圖片編碼成 data url 格式。當然，前提條件是圖片資源引用正確。
一、已安裝有Sublime Text3
二、安裝Package Control
安裝這個後，可以線上安裝所需的外掛
方法1、Ctrl+~開啟控制檯，在控制檯輸入如下的Python命令
import urllib.request,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();urllib.request.install_opener(urllib.request.build_opener(urllib.request.ProxyHandler()));open(os.path.join(ipp,pf),'wb').write(urllib.request.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())
等待下載安裝。
方法2、下載Package Control外掛包到外掛目錄
外掛目錄在選單中開啟Preference--Browse Packages，沒有自己新建一個
按照提示重啟Sublime Text3，如果在Preferences->package settings中有看到package control這一項，則安裝成功，如果沒有，參照方法2可以下載package Control手動安裝
三、安裝外掛
常用的命令：Install Package（安裝擴充套件）
List Package（列出全部擴充套件）
Remove Package（移除擴充套件）
Upgrade Package（升級擴充套件）
1、Emmet外掛的安裝
1）Ctrl+Shift+P：調出控制皮膚
2）搜尋框鍵入Install Package命令（也可以簡寫）並回車，然後在列表選擇Emmet（也可以直接搜尋Emmett進行檢索）
3）點選確定等待安裝
4）自動安裝結束會自動彈出一個外掛的安裝資訊的檔案。重新調出控制皮膚，鍵入List Package列出全部擴充套件，檢視是否已經安裝成功。
Emmet常用技巧：（輸入下面簡寫，按Tab鍵可觸發效果）
生成 HTML 文件初始結構
html:5 或者 ! 生成 HTML5 結構
html:xt 生成 HTML4 過渡型
html:4s 生成 HTML4 嚴格型
生成帶有 id 、class 的 HTML 標籤
Emmet 預設的標籤為 div ，如果我們不給出標籤名稱的話，預設就生成 div 標籤。
編寫一個 class 為 bbb 的 span 標籤，我們需要編寫下面指令：
span.bbb
編寫一個 id 為 ccc 的 class 為 ddd 的 ul 標籤
ul#ccc.ddd
生成後代：>
大於號表示後面要生成的內容是當前標籤的後代。
要生成一個無序列表，而且被 class 為 aaa 的 div 包裹
div.aaa>ul>li
生成一個有序列表
.abc>ol>li
生成兄弟：+
上面是生成下級元素，如果想要生成平級的元素，就需要使用 + 號
div+p+bq
生成上級元素：^
上級 （Climb-up）元素是什麼意思呢？前面我們們說過了生成下級元素的符號“>”，當使用 div>ul>li 的指令之後，再繼續寫下去，那麼後續內容都是在 li 下級的。如果我想編寫一個跟 ul 平級的 span 標籤，那麼我需要先用 “^” 提升一下層次
div>ul>li^span
重複生成多份：*
重複生成多份：*
特別是一個無序列表，ul 下面的 li 肯定不只是一份，通常要生成很多個 li 標籤。那麼我們可以直接在 li 後面 * 上一些數字：
ul>li*5
生成分組：()
用括號進行分組，這樣可以更加明確要生成的結構，特別是層次關係
div>(header>ul>li*2>a)+footer>p
生成自定義屬性：[attr]
a 標籤中往往需要附帶 href 屬性和 title 屬性，如果我們想生成一個 href 為 “http://blog.wpjam.com” ，title 為“我愛水煮魚”的 a 標籤
a[href="http://blog.wpjam.com" title="我愛水煮魚"]
對生成內容編號：$
如無序列表，我想為五個 li 增加一個 class 屬性值 item1 ，然後依次遞增從 1-5，那麼就需要使用 $ 符號：
ul>li.item$*5
$ 就表示一位數字，只出現一個的話，就從1開始。如果出現多個，就從0開始。如果我想生成三位數的序號，那麼要寫三個 $
ul>li.item$$$*5
只能這樣單調的生成序號？對於強大的 Emmet 來說，肯定不會會了，我們也可以在 $ 後面增加 @- 來實現倒序排列
ul>li.item$@-*5
同樣，我們也可以使用 @N 指定開始的序號：
ul>li.item$@3*5
生成文字內容：{}
上面講解了如何生成 HTML 標籤，那裡面的內容呢？當然也可以生成了：
a[href="http://blog.wpjam.com"]{點選這裡到 我愛水煮魚}
在生成內容的時候，特別要注意前後的符號關係，雖然 a>{Click me} 和 a{Click me} 生成的結構是相同的，但是加上其他的內容就不一定了
<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>
<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>
不要有空格
在寫指令的時候，你可能為了程式碼的可讀性，使用一些空格什麼的排版一下。這就會導致程式碼無法使用。
CSS中的應用
編寫 position: absolute; 這一個屬性，我們只需要輸入 posa 這四個字母即可
1、簡寫屬性和屬性值
如果你想生成 width:100px; 你只需要輸入 w100 就可以了，因為 Emmet 的預設設定 w 是 width 的縮寫，後面緊跟的數字就是屬性值。預設的屬性值單位是 px ，你可以在值的後面緊跟字元生成單位，可以是任意字元。例如，w100foo 會生成 width:100foo; 這樣一條語句。你同樣也可以簡寫屬性單位，如果你緊跟屬性值後面的字元是 p ，那麼將會生成 width:100%; 這樣的語句，其中 p 表示百分比單位。與此類似的還有：e → em; x → ex
margin 這樣的屬性，可能並不是一個屬性值，生成多個屬性值需要用橫槓（-）連線兩個屬性值，因為 Emmet 的指令中是不允許空格的。例如使用 m10-20 這條命令可以生成 margin: 10px 20px; 這樣一條語句。如果你想生成負值，多加一條橫槓即可。需要注意的是，如果你對每個屬性都指定了單位，那麼不需要使用橫槓分割。例如使用 m10ff20ff 這條命令可以生成 margin: 10ff 20ff; 這條語句，如果你在 20ff 前面加了橫槓的話，20ff 就會變成負值了
你想一次生成多條語句，可以使用 ‘+’ 連線兩條語句，例如使用 h10p+m5e 可以生成 height: 10%;margin: 5em; 這兩條語句
顏色值也是可以快速生成的，例如 c#3 → color: #333;，更復雜一點的，使用 bd5#0s 可以生成border: 5px #000 solid; 這樣一句
#1 → #111111
#e0 → #e0e0e0
#fc0 → #ffcc00
生成 !important 這條語句也當然很簡單，只需要一個 ‘!’ 就可以了
2、增加額外的選項
使用 @f 即可生成 CSS3 中的 font-face 的程式碼結構
background-image、 border-radius、 font、@font-face、 text-outline、 text-shadow 等屬性，我們可以在生成的時候輸入 ‘+’ 生成增強的結構，例如我們可以輸入 @f+ 命令，即可輸出選項增強版的 font-face 結構
3、增加實驗性字首（Vendor Prefixes）
CSS3 等現在還沒有出正式的 W3C 規範，但是很多瀏覽器已經實現了對應的功能，僅作為測試只用，所以在屬性前面加上自己獨特的實驗性字首，不同的瀏覽器只會識別帶有自己規定字首的樣式。然而為了實現相容性，我們不得不編寫大量的冗餘程式碼，而且要加上對應的字首。使用 Emmet 可以快速生成帶有字首的 CSS3 屬性。
內建了一些常見的需要實驗性字首的 CSS3 屬性，例如輸入 trf 會彈出提示，然後敲擊Enter鍵即可生成。而 Emmet 增強了這個功能。在任意字元前面加上一條橫槓（-），即可生成該屬性的帶字首程式碼，例如輸入 -foo-css
雖然 foo-css 並不是什麼屬性，但是照樣可以生成。此外，你還可以詳細的控制具體生成哪幾個瀏覽器字首或者先後順序，使用 -wm-trf 即可生成
w 就是 webkit 字首的縮寫，m 是 moz 字首縮寫，s 是 ms 字首縮寫，o 就是 opera 瀏覽器字首的縮寫。如果使用 -osmw-abc 即可生成
4、生成漸變背景
CSS3 中新增加了一條屬性 linear-gradient 使用這個屬性可以直接製作出漸變的效果。但是這個屬性的引數比較複雜，而且需要新增實驗性字首，無疑需要生成大量程式碼。而在 Emmet 中使用 lg() 指令即可快速生成，例如：使用 lg(left, #fff 50%, #000) 可以直接生成：
Emmet高階功能介紹：
5、生成 Lorem Ipsum
Lorem Ipsum 表示一段隨機看不懂的文字。Lorem Ipsum的文字讓人看不懂，這樣才能忽略內容的含義而專注內容的排版，作為測試資料填充用的。使用 Emmet 生成Lorem Ipsum 文字非常簡單，只需要使用 lorem 這一條命令即可，敲擊 Tab 鍵之後
Emmet 的 lorem 命令不僅僅只有輸出這麼一段文字這樣一個簡單的功能，它既然作為測試資料，可以加上引數指定要輸出的字元數量。例如，我們如果想輸出一個十個單詞的 h1 標題，我們就可以使用如下命令 h1>lorem10 。但是這項功能對於使用中文的網頁測試來說，好像沒有多大用處，畢竟中文和英語單詞的排版是不同的。
6、跳轉編輯區域
用 Shift+Ctrl+. 和 Shift+Ctrl+,分別向下或者向上移動，選取的是一整塊，先從標籤開始，再是整個屬性，再是屬性值。
7、增加圖片的尺寸大小
將游標移動到程式碼段，摁下 Ctrl+U 即可讓 Emmet 自動讀取圖片的尺寸新增上。前提條件是圖片比較存在並且正確引用進來了
針對 <img> 標籤的，會在後面加上 width、height 屬性，如果是 background 引入的，會在下面加上 width、height 的 CSS 屬性
8、更新 CSS 的屬性值
想修改一下旋轉的角度值，那麼我們就需要依次修改或者按住 Ctrl 多個選中進行修改。使用 Emmet 的話，就方便多了，我們只需要修改其中一個，然後摁下 Shift+Ctrl+R 鍵即可更新其他的相關屬性值
9、將圖片資源轉換成 data url 形式
將游標移動到 background: url() 中的圖片位置的地方，按下 Ctrl+’ 即可將圖片編碼成 data url 格式。當然，前提條件是圖片資源引用正確。
相關文章
- Sublime Text3—常用外掛Emmet
- sublime text3外掛安裝
- sublime Text3 前端常用外掛前端
- 在sublime text3 中安裝 sass 高亮外掛、提示外掛
- Sublime text3 無法安裝外掛
- MacOS Sublime Text 3 安裝使用 Sublime-phpcs 外掛MacPHP
- Sublime Text 3 安裝外掛與快捷鍵總結
- sublime text3 好用的外掛
- Mac中Sublime Text 3外掛安裝、漢化及基本使用Mac
- ubuntu下安裝 Sublime Text 3 及 PlantUML 繪圖外掛Ubuntu繪圖
- sublime text 3如何安裝外掛和設定字號
- Sublime安裝PlantUML外掛
- Sublime使用，安裝外掛
- Sublime Text 3 的微信小程式外掛！微信小程式
- Sublime Text 使用介紹、全套快捷鍵及外掛推薦
- JS開發者常用的10個Sublime Text外掛JS
- Sublime Text3工具的安裝、破解、VIM功能vintage外掛教程
- rematch常用外掛介紹REM
- 我的 Sublime text 外掛配置
- 我使用的 Sublime Text 外掛
- Sublime 安裝外掛不生效
- Sublime Text 3能用支援的外掛推薦
- Win7環境下Sublime Text 3下安裝NodeJS外掛Win7NodeJS
- Emmet外掛常用語法總結
- logstash常用外掛介紹
- Sublime裝vue外掛Vue
- 推薦！Sublime Text 最佳外掛列表
- Sublime Text 3最好的功能、外掛和設定
- Sublime Text 3 最好的功能、外掛和設定
- sublime安裝外掛詳細教程
- 我自己的程式碼編輯器-sublime text 3 及常用外掛
- Sublime Text3 常用快捷鍵動畫演示及優秀外掛分享動畫
- 剛安裝的sublime如何安裝外掛
- Sublime Text 3下安裝Emmet的問題
- ubuntu 常用外掛安裝Ubuntu
- php常用外掛安裝PHP
- 工具 -- Sublime Text 漢化方法、外掛推薦
- 20 個強大的 Sublime Text 外掛