IntelliJ IDEA使用之Emmet

Emmet支持

Emmet和Emmet 1.1版是可以更快地開發(fā)HTML，CSS或JSX代碼的工具包。您可以使用Emmet代碼模板而無需離開IntelliJ IDEA。要將模板擴展為標(biāo)記，只需鍵入其縮寫并按擴展鍵或快捷鍵。例如，在HTML文件中，鍵入：table>tr*3>td*2，然后按下Tab鍵以獲取一個3x2表的存根：

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

IntelliJ IDEA支持這樣的功能作為新語法來編寫RGBA顏色，說明，默認(rèn)和布爾屬性， 更新標(biāo)記操作等等。

請注意，您只能在Ultimate版本中使用帶有CSS和XSL的Emmet。

啟用和配置Emmet

使用IntelliJ IDEA，您可以使用本機Emmet模板以及以及200多個附加的HTML，CSS和XSL實時模板，這些模板列在IntelliJ IDEA設(shè)置(Ctrl+Alt+S)的“編輯器|實時模板”頁面上的Zen CSS，Zen HTML和 Zen XSL節(jié)點下。

在IntelliJ IDEA中啟用和配置本機Emmet

1. 在“設(shè)置/首選項”對話框（Ctrl+Alt+S）中，單擊“編輯器”下的“Emmet”。將打開Emmet頁面。

2. 選擇用于展開Emmet縮寫的鍵，默認(rèn)情況下使用Tab鍵。

3. 要在各種語言環(huán)境中啟用和配置Emmet，請在編輯器|Emmet：Emmet  -  HTML，Emmet  -  CSS和Emmet  -  JSX下的語言特定設(shè)置頁面上使用相應(yīng)的設(shè)置 。

IntelliJ IDEA允許您使用和自定義Emmet實時模板，或者您可以添加自定義模板。假設(shè)您有一個entry模板，其中包含以下模板文本：

<entry type="$TYPES$">$END$ <entry>

要生成條目列表，您只需鍵入“entry-list<entry[number=$]*5″并按下Tab鍵。默認(rèn)情況下，該number屬性將在type之前生成。要自定義生成它的位置，您需要將ATTRS變量添加到模板中，例如：

<entry type="$TYPES$" $ATTRS{#content}gt;$END$ <entry>

該ATTRS變量必須有一個空的字符串作為默認(rèn)值，并應(yīng)被忽略。

使用Emmet的實時模板

1. 在“設(shè)置/首選項”對話框（Ctrl+Alt+S），點擊編輯器下的實時模板。

2. 在Emmet CSS， Emmet HTML和 Emmet JSX頁面上，選中要使用的模板旁邊的復(fù)選框。

3. 在列表中選擇模板時，鼠標(biāo)將移動到“模板文本” 區(qū)域，其中字段顯示所選模板的設(shè)置。

4. 在“模板文本”字段中，將所需的文本和變量添加到模板主體。

5. 單擊“編輯變量”按鈕。在 打開的“編輯模板變量”對話框中，在“默認(rèn)值”字段中指定默認(rèn)變量值，并在必要時選中“如果已定義則跳過”復(fù)選框。

配置縮寫擴展鍵

默認(rèn)情況下，通過按下Tab鍵擴展Emmet本機縮寫和其他實時模板。對于其他實時模板，IntelliJ IDEA允許您重新定義默認(rèn)擴展鍵。請注意，此自定義設(shè)置不會覆蓋本機Emmet支持的默認(rèn)設(shè)置；您將能夠使用這些鍵之一擴展模板。

為本機Emmet縮寫配置擴展鍵

1. 在“設(shè)置/首選項”對話框（Ctrl+Alt+S）中，單擊“編輯器”下的“Emmet”。該Emment頁面將打開。

2. 從“Expand縮寫”列表中，選擇新的擴展鍵而不是默認(rèn)的Tab鍵。

配置Emmet實時模板的擴展鍵

1. 在“設(shè)置/首選項”對話框（Ctrl+Alt+S），點擊編輯器下的實時模板。將打開“實時模板”頁面。

2. 展開Zen HTML，Zen CSS或Zen XSL模板組，然后選擇所需的模板。鼠標(biāo)移動到“ 模板文本”區(qū)域。

3. 從“展開方式”列表中，選擇用于展開模板的鍵。

使用Emmet模板圍繞一段代碼

1. 在編輯器中，選擇要包圍的代碼塊并按下Ctrl+Alt+J，或選擇主菜單上的：代碼|環(huán)繞著|實時模板。

2. 在“選擇模板”彈出菜單中，選擇“Emmet”：

   
3. 輸入要使用的Emmet縮寫，然后按下Enter鍵。

   請注意右側(cè)的下拉列表。單擊向下箭頭以查看最近應(yīng)用的Emmet實時模板的歷史記錄：

   
   還要注意顏色指示。如果鍵入有效的Emmet縮寫，則背景為綠色。但是，輸入不存在的縮寫時，背景變?yōu)榧t色：
   
   

在編輯點之間導(dǎo)航

在HTML和XML中，您可以在編輯點之間導(dǎo)航，即在Emmet模板適用的那些代碼點之間導(dǎo)航 。

• 要將光標(biāo)移動到上一個編輯點，請選擇：導(dǎo)航|上一個Emmet編輯點，或按下Shift+Alt+[。

• 要將光標(biāo)移動到下一個編輯點，請選擇：導(dǎo)航|下一個Emmet編輯點，或按下Shift+Alt+]。