zen-Coding是一款快速編寫HTML,CSS（或其他格式化語言）代碼的編輯器插件，這個插件可以用縮寫方式完成大量重復的編碼工作，是web前端從業(yè)者的利器。 zen-Coding插件支持多種編輯器，如UltraEdit，Notepad++等。

溫馨提示：zen-Coding已經(jīng)改名Emmet，并且搭建了一個新的網(wǎng)站：docs.emmet.io。

zen-Conding下載地址：http://code.google.com/p/zen-coding/downloads/list?(進入下載頁，選擇相應的編輯器插件下載)

Notepad++ 是一款無比輕巧便捷的代碼編輯工具。它無可挑剔的啟動速度，優(yōu)秀的語法高亮，干凈整齊的代碼縮進，便捷的括號高亮匹配贏得了無數(shù)人的喜愛。 但，其代碼自動補全很“雞肋”，或者說Notepad++根本就沒有代碼補全功能。平時改點源代碼很方便，但是想單獨的寫點源代碼就比較麻煩了，難道要一點點的都敲嗎？先上段視頻：

怎么樣？驚呆了吧。Zen Coding–一款使用仿CSS選擇器的語法來快速開發(fā)HTML和CSS的插件。它無視了編輯器的自動提示和自動完成，秒殺了你自定義的各種快捷鍵或者 AHK 的熱字符串，以智能簡潔高效的縮短輸入，帶給你超快速地書寫各種復雜而枯燥的 HTML 和 CSS 代碼的體驗。

1.下載zen-Coding的Notepad++插件;(zen-Coding for Notepad++)
2.解壓后將壓縮包中的文件放入Notepad++安裝目錄下的plugins文件夾中;
3.重新啟動Notepad++編輯器就能看到菜單欄上增加了一項Zen Coding。如下圖所示：

二、zen-Coding的使用

zen-Coding的使用需要掌握CSS和HTML相關知識。其實只要對CSS的選擇器比較熟悉，就可以得用簡短的類似于CSS選擇器的代碼高效的編寫出HTML代碼。打開Notepad++編輯器，輸入以下代碼：

div#name

然后接著按一下快捷鍵ctrl+E，就會自動生成如下的HTML代碼：

1	<div?id="name"></div>

接下來看一個更高效的例子

div#header>div#logo+ul.nav>li.item-$*5>a

按ctrl+E生成如下代碼

1 2 3 4 5 6 7 8 9 10

<div?id="header"> <div?id="logo"></div> <ul?class="nav"> <li?class="item-1"><a?href=""></a></li> <li?class="item-2"><a?href=""></a></li> <li?class="item-3"><a?href=""></a></li> <li?class="item-4"><a?href=""></a></li> <li?class="item-5"><a?href=""></a></li> </ul> </div>

Zend Coding語法

1.E | E#name | E.name

這里E表示元素，如p,div等。#name和.name分別表示ID和class屬性。例：

div

1	<div></div>

div#main

1	<div?id="main"></div>

ul.item

1	<li?class="item"></li>

如要顯示一個id和多個class屬性時，可以這樣寫

ul#nav.one.two

1	<ul?id="nav"?class="one two"></ul>

2.E>E | E#name>E#name | E.#name>E.name | E.name>E.name

>表示父級嵌套子級。例：

div>span

1	<div><span></span></div>

div#nav>ul.main

1 2 3

<div?id="nav"> <ul?class="main"></ul> </div>

3.E+E | E#name+E#name | E.#name+E.name | E.name+E.name

+號表示兄弟關系。例：

p+p

1 2	<p></p> <p></p>

div#header+div#content+div#footer

1 2 3

<div?id="header"></div> <div?id="content"></div> <div?id="footer"></div>

E+ (+號表示會生成默認的子元素)

table+

1 2 3 4 5

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

ul+

1 2 3

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

dl+

1 2 3 4

<dl> <dt></dt> <dd></dd> </dl>

4.E*N

N:表示某個元素需要重復的次數(shù)。例：

p*3

1 2 3

<p></p> <p></p> <p></p>

ul#nav>li.item*4

1 2 3 4 5 6

<ul?id="nav"> <li?class="item"></li> <li?class="item"></li> <li?class="item"></li> <li?class="item"></li> </ul>

5.E*N$

$:表示序號。例：

ul#nav>li.item-$*4

1 2 3 4 5 6

<ul?id="nav"> <li?class="item-1"></li> <li?class="item-2"></li> <li?class="item-3"></li> <li?class="item-4"></li> </ul>

6.E[attr]

attr:表示元素屬性。例:

a[title]

1	<a href=""?title=""></a>

td[colspan=2]

1	<td?colspan="2"></td>

7.E|filter

E|e

|e輸出轉義字符

div#wrap>div.content>p|e

1 2 3 4 5

<div id="wrap"> <div class="content"> <p></p> </div> </div>

8.( )控制嵌套分組關系

div#header>(h1.logo>a)+ul.nav>li.item*5>a

1 2 3 4 5 6 7 8 9 10

<div?id="header"> <h1?class="logo"><a?href=""></a></h1> /*h1和ul是兄弟關系*/ <ul?class="nav"> <li?class="item"><a?href=""></a></li> <li?class="item"><a?href=""></a></li> <li?class="item"><a?href=""></a></li> <li?class="item"><a?href=""></a></li> <li?class="item"><a?href=""></a></li> </ul> </div>

div#header>h1.logo>a+ul.nav>li.item*5>a

1 2 3 4 5 6 7 8 9 10 11 12

<div?id="header"> <h1?class="logo"> /*h1和ul是父子關系*/ <a?href=""></a> <ul?class="nav"> <li?class="item"><a?href=""></a></li> <li?class="item"><a?href=""></a></li> <li?class="item"><a?href=""></a></li> <li?class="item"><a?href=""></a></li> <li?class="item"><a?href=""></a></li> </ul> </h1> </div>

以上兩種寫法得到的結構是不一樣的。 請大家注意觀察。

練習：將以下代碼用zen-coding寫出來。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<div?id="page"> <div?id="header"> <ul?id="nav"> <li><a?href=""></a></li> <li><a?href=""></a></li> <li><a?href=""></a></li> <li><a?href=""></a></li> </ul> </div> <div?id="page"> <h1><span></span></h1> <p></p> <p></p> </div> <div?id="footer"></div> </div>

答案：(選中下一空行試試)
div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer

三、Notepad++中zen-coding的使用

Expand Abbreviation(Ctrl+E):展開縮寫

用法：輸入縮寫代碼后，在代碼末尾直接按快捷鍵得到完整代碼。

Wrap with Abbreviation(Ctrl+Shift+A):嵌套父級元素

用法：選中需要嵌套父級元素的標簽，按快捷鍵，在彈出的對話框中輸入父級標簽回車即可。例：

1 2 3 4 5

list1 list2 list3 list4 list5

選中以上內(nèi)容，然后按【Ctrl+Shift+A】在彈出的對話框中輸入ul.nav>li.item-$*>a[title]后按【Enter】鍵，就會生成如下代碼

1 2 3 4 5 6 7

<ul?class="nav"> <li?class="item-1"><a?href=""?title="">list1</a></li> <li?class="item-2"><a?href=""?title="">list2</a></li> <li?class="item-3"><a?href=""?title="">list3</a></li> <li?class="item-4"><a?href=""?title="">list4</a></li> <li?class="item-5"><a?href=""?title="">list5</a></li> </ul>

Balance TagInward/Outward(Ctrl+Shift+D):選中代碼塊

選中當前光標所在的標記，再次按下可以依次選中其父標簽。

Go to Next/Previous Edit Point( Ctrl+Alt+] / Ctrl+Alt+[ ):轉到下一個/上一個編輯點

Merge Lines(Ctrl+Alt+M):合并行

將選中的多行代碼合并為一行。壓縮css、js代碼為一行時，這個很方便。Ctrl+A，然后Ctrl+Alt+M，兩下即可搞定，免去了動用壓縮工具的麻煩。（當然這個只是簡單地將代碼合并為一行，并不能做更深入的代碼壓縮）

Toggle Comment(Alt+/):添加、移除注釋

注釋掉光標所在的代碼塊 （Notepad++ 自帶的Ctrl+Shift+Q也可以用來注釋代碼）

Split/Join Tag(Ctrl+’ ):空標簽轉化

比如將?<div></div>?轉化為?<div/>， 反向亦可。

Remove Tag(Ctrl+Shift+’ ):移除標簽

比如將?<div>hello world</div>?移除div標簽，留下hello world。

zen-coding常用縮寫

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

html:4t (HTML 4.01 Transitional) html:4s (HTML 4.01) html:xt (XHTML 1.0) html:xs (XHTML 1.0 Strict) html:xxs (XHTML 1.1) html:5 (HTML5) meta:utf, meta:compat style, link:css, link:print, link:favicon, link:rss, script, script:src div, p, a, ul, ol, input:t, input:r ol+, dl+, table+, tr+, select+, map+, optg+ cc:ie6, cc:ie, cc:noie

可以打開plugins\NppScripting\includes\Zen Coding.js這個JS文件看一看，熟悉Zen Coding自帶的一些縮寫規(guī)則。

Zen Coding PDF縮寫下載

www.songxiaodong.com.cn

轉載于:https://www.cnblogs.com/goodbeypeterpan/p/3962820.html

總結

以上是生活随笔為你收集整理的zen-coding for notepad++，前端最佳手写代码编辑器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。