第 30 章 使用 Emmet 外掛程式

標籤：

學習要點：

1.安裝方式

2.自訂！產生

3.快速產生

 

主講教師：李炎恢

 

本章主要探討瞭解一下 Sublime Text3 的一個 HTML5 代碼提示外掛程式：Emmet，這個外掛程式比內建原生的要強大許多。

 

一．安裝方式

Emmet 外掛程式安裝一般採用兩種方式，1.通過命令安裝；2.下載離線安裝。我這裡直接採用的是下載離線安裝方式。具體步驟：

1.解壓下載好的 Emmet 外掛程式包(這裡會提供)；

2.將 Emmet 和 PyV8 兩個檔案夾複製到 Sublime Text3 的程式包中；

3.左下角會顯示自動安裝，安裝好後，重啟 Sublime Text3；4.在編輯器輸入英文狀態下的“!”，然後 ctrl+e，出現了 HTML5 的程式碼程式庫，則安裝

成功。

註：如果安裝失敗或出現其他錯誤，請自行百度選用其他方式安裝，或解決安裝出錯的問題。

 

二．自訂！產生

我們輸入!，然後 ctrl+e，預設情況下會出現如下代碼：

//預設代碼

<!doctype html><html lang="en">    <head>        <meta charset="UTF-8">        <title>Document</title>    </head>    <body>    </body></html>

　　這裡有兩個地方和我們之前產生的程式碼不一樣，第一處是：doctype 沒有大寫；第二處：lang 是 en 的。其實這兩處不改也沒有太大關係，但有強迫症的看了可能會難受。具體修改方法如下：

1.首先，進入程式包 pagkages；

2.其次，進入 Emmet 檔案夾，再進入 emmet 檔案夾，找到 snippets.json 檔案；

3.最後，開啟這個檔案，找到相應處修改即可。

 

三．快速產生

　　Emmet 提供了非常豐富的 HTML 和 CSS 代碼的快速產生功能，通過使用快速產生代碼，極大的增加了開發速度。只不過，Emmet 提供的產生方式需要二次學習，起初可能還不如手工敲擊的快。所以，需要一定時間的學習磨合。

//快速產生 HTML5 代碼結構

! + (ctrl + e 或 tab 鍵) 或 html:5 + tab 鍵

<!DOCTYPE html><html lang="zh-cn">    <head>        <meta charset="UTF-8">        <title>Document</title>    </head>    <body>    </body></html>

所有代碼產生，都需要通過 tab 鍵來產生代碼，後面不在贅述。

//快速產生標籤代碼 a

<a href=""></a>

//快速產生標籤相應的屬性值a:link、a:mail

<a href="http://"></a> 
<a href="mailto:"></a>

//產生標籤內的值a{超連結}

<a href="">超連結</a>

//產生 CSS 連結 link link

<link rel="stylesheet" href="">

//產生表單控制項input、input:hidden

<input type="text"><input type="hidden" name="">

//產生帶子標籤的一組標籤ul+、ol+、dl+、table+

<ul>    <li></li></ul><ol>    <li></li></ol><dl>    <dt></dt>    <dd></dd></dl><table>    <tr>        <td></td>    </tr></table>

//產生嵌套子標籤 nav>ul>li

<nav>    <ul>        <li></li>    </ul></nav>

//產生相鄰兄弟標籤 div+p+h1

<div></div><p></p><h1></h1>

//產生乘積數量的標籤 ul>li*5

<ul>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li></ul>

//建立具有 ID 的標籤 div#header

<div id="header"></div>

//建立具有 class 的標籤 div.header、div.header.sidebar

<div class="header"></div><div class="header sidebar"></div>

 

以上是 HTML 部分的代碼產生功能，下面來看下 CSS 的快速產生功能：

//產生 position: relative pos

輸入 pos 即可出現 position:relative 這組 CSS 樣式，並且 relative 是選定狀態，有助於你更換屬性值。

但是我們發現使用 sublime 結合 Emmet 外掛程式的 CSS 提示非常的靈活，不會死板的必須要輸入 pos。下面的輸入都可以得到相應的值：

po = position: relative

只要輸入 po 或者大於 po 字母量的值，都可以得到 position:relative。當然，如果你只是輸入 p，那麼由於優先順序的考慮，出現的是 padding: |。

如果你輸入有誤，它也會自動錯誤修正，比如下面這個：

pod = position: relative

如果你想一開始得到的是 absolute 這個屬性值，那麼直接輸入：

poa = position: absolute;

當然，上門的標準寫法是這樣的：

pos:a = position: absolute;

如果想輸入背景的屬性，直接使用 bg 即可：

bg = background: |;

使用 bg+可以展開背景屬性的完整形式： bg+ = background: #fff url() 0 0 no-repeat;

使用 bg:n 可以設定背景屬性值為 none： bg:n = background: none;

備忘：HTML 和 CSS 其他大部分代碼產生方案，可以參考如下網址：

http://docs.emmet.io/cheat-sheet/

第 30 章 使用 Emmet 外掛程式