zen-coding for notepad++，前端最佳手写代码编辑器
zen-Coding是一款快速編寫HTML,CSS（或其他格式化語言）代碼的編輯器插件，這個(gè)插件可以用縮寫方式完成大量重復(fù)的編碼工作，是web前端從業(yè)者的利器。 zen-Coding插件支持多種編輯器，如UltraEdit，Notepad++等。
溫馨提示：zen-Coding已經(jīng)改名Emmet，并且搭建了一個(gè)新的網(wǎng)站：docs.emmet.io。
zen-Conding下載地址：http://code.google.com/p/zen-coding/downloads/list?(進(jìn)入下載頁，選擇相應(yīng)的編輯器插件下載)
Notepad++ 是一款無比輕巧便捷的代碼編輯工具。它無可挑剔的啟動(dòng)速度，優(yōu)秀的語法高亮，干凈整齊的代碼縮進(jìn)，便捷的括號(hào)高亮匹配贏得了無數(shù)人的喜愛。 但，其代碼自動(dòng)補(bǔ)全很“雞肋”，或者說Notepad++根本就沒有代碼補(bǔ)全功能。平時(shí)改點(diǎn)源代碼很方便，但是想單獨(dú)的寫點(diǎn)源代碼就比較麻煩了，難道要一點(diǎn)點(diǎn)的都敲嗎？先上段視頻：
怎么樣？驚呆了吧。Zen Coding–一款使用仿CSS選擇器的語法來快速開發(fā)HTML和CSS的插件。它無視了編輯器的自動(dòng)提示和自動(dòng)完成，秒殺了你自定義的各種快捷鍵或者 AHK 的熱字符串，以智能簡潔高效的縮短輸入，帶給你超快速地書寫各種復(fù)雜而枯燥的 HTML 和 CSS 代碼的體驗(yàn)。
1.下載zen-Coding的Notepad++插件;(zen-Coding for Notepad++)
2.解壓后將壓縮包中的文件放入Notepad++安裝目錄下的plugins文件夾中;
3.重新啟動(dòng)Notepad++編輯器就能看到菜單欄上增加了一項(xiàng)Zen Coding。如下圖所示：
二、zen-Coding的使用
zen-Coding的使用需要掌握CSS和HTML相關(guān)知識(shí)。其實(shí)只要對(duì)CSS的選擇器比較熟悉，就可以得用簡短的類似于CSS選擇器的代碼高效的編寫出HTML代碼。打開Notepad++編輯器，輸入以下代碼：
div#name
然后接著按一下快捷鍵ctrl+E，就會(huì)自動(dòng)生成如下的HTML代碼：
| 1 | <div?id="name"></div> |
接下來看一個(gè)更高效的例子
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> |
如要顯示一個(gè)id和多個(gè)class屬性時(shí)，可以這樣寫
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
>表示父級(jí)嵌套子級(jí)。例：
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
+號(hào)表示兄弟關(guān)系。例：
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+ (+號(hào)表示會(huì)生成默認(rèn)的子元素)
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:表示某個(gè)元素需要重復(fù)的次數(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$
$:表示序號(hào)。例：
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輸出轉(zhuǎn)義字符
div#wrap>div.content>p|e
| 1 2 3 4 5 | <div id="wrap"> <div class="content"> <p></p> </div> </div> |
8.( )控制嵌套分組關(guān)系
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是兄弟關(guān)系*/ <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是父子關(guān)系*/ <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> |
以上兩種寫法得到的結(jié)構(gòu)是不一樣的。 請(qǐng)大家注意觀察。
練習(xí)：將以下代碼用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):嵌套父級(jí)元素
用法：選中需要嵌套父級(jí)元素的標(biāo)簽，按快捷鍵，在彈出的對(duì)話框中輸入父級(jí)標(biāo)簽回車即可。例：
| 1 2 3 4 5 | list1 list2 list3 list4 list5 |
選中以上內(nèi)容，然后按【Ctrl+Shift+A】在彈出的對(duì)話框中輸入ul.nav>li.item-$*>a[title]后按【Enter】鍵，就會(huì)生成如下代碼
| 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):選中代碼塊
選中當(dāng)前光標(biāo)所在的標(biāo)記，再次按下可以依次選中其父標(biāo)簽。
Go to Next/Previous Edit Point( Ctrl+Alt+] / Ctrl+Alt+[ ):轉(zhuǎn)到下一個(gè)/上一個(gè)編輯點(diǎn)
Merge Lines(Ctrl+Alt+M):合并行
將選中的多行代碼合并為一行。壓縮css、js代碼為一行時(shí)，這個(gè)很方便。Ctrl+A，然后Ctrl+Alt+M，兩下即可搞定，免去了動(dòng)用壓縮工具的麻煩。（當(dāng)然這個(gè)只是簡單地將代碼合并為一行，并不能做更深入的代碼壓縮）
Toggle Comment(Alt+/):添加、移除注釋
注釋掉光標(biāo)所在的代碼塊 （Notepad++ 自帶的Ctrl+Shift+Q也可以用來注釋代碼）
Split/Join Tag(Ctrl+’ ):空標(biāo)簽轉(zhuǎn)化
比如將?<div></div>?轉(zhuǎn)化為?<div/>， 反向亦可。
Remove Tag(Ctrl+Shift+’ ):移除標(biāo)簽
比如將?<div>hello world</div>?移除div標(biāo)簽，留下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這個(gè)JS文件看一看，熟悉Zen Coding自帶的一些縮寫規(guī)則。
Zen Coding PDF縮寫下載
www.songxiaodong.com.cn轉(zhuǎn)載于:https://www.cnblogs.com/goodbeypeterpan/p/3962820.html
總結(jié)
以上是生活随笔為你收集整理的zen-coding for notepad++，前端最佳手写代码编辑器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： eclipse安装阿里规范模板
- 下一篇： HTML/CSS/Javascript代