[插件]ZenCodingHTML/CSS代码编辑利器

去年就知道了Sublime Text 2这款编辑器，当时就颇有好感，还用了一段时间来进行开发。最近，偶然知道了还有Zen Coding这样的一个插件之后，简直对这个插件以及可以支持插件的Sublime Text 爱不释手。

Officially supported editors

• Aptana/Zend Studio/Eclipse (crossplatform) https://github.com/sergeche/eclipse-zencoding
• TextMate (Mac). Available in two flavors: basic snippets (Zen HTML and Zen CSS) and full-featured plugin (ZenCoding for TextMate)._{Bundles > Zen Coding menu item}
• Coda (Mac) — external download, via TEA for Coda. _{Plug-ins > TEA for Coda > Zen Coding menu item}
• Espresso (Mac) — external download, via TEA for Espresso. Zen Coding is bundled with Espresso by default, but you should upgrade ZC to latest version. _{Actions > HTML menu item}
• Komodo Edit/IDE (crossplatform) — external download. _{Tools > Zen Coding menu item}
• Notepad++ (Windows). _{Zen Coding menu item} Also a Python version of NPP plugin is available:http://sourceforge.net/projects/npppythonscript/files/
• PSPad (Windows). _{Scripts > Zen Coding menu item}
• </TT></STRONG> (browser-based). See online demo.</LI> <LI><STRONG>editArea</STRONG> (browser-based). See online demo.</LI> <LI><STRONG>CodeMirror</STRONG> (browser-based). See online demo.</LI> <LI><STRONG>CodeMirror2</STRONG> (browser-based). See online demo.</LI></UL> <H2>Third-party supported editors</H2> <UL> <LI><STRONG>Dreamweaver</STRONG> (Windows, Mac)</LI> <LI><STRONG>Sublime Text</STRONG> (Windows)</LI> <LI><STRONG>Sublime Text 2</STRONG> (crossplatform) — external download</LI> <LI><STRONG>UltraEdit</STRONG> (Windows)</LI> <LI><STRONG>TopStyle</STRONG> (Windows)</LI> <LI><STRONG>GEdit</STRONG> (crossplatform) — Franck Marcia‘s plugin, Mike Crittenden‘s plugin</LI> <LI><STRONG>BBEdit/TextWrangler</STRONG> (Mac) — external download</LI> <LI><STRONG>Visual Studio</STRONG> (Windows) — at Visual Studio Gallery</LI> <LI><STRONG>EmEditor</STRONG> (Windows) — external download</LI> <LI><STRONG>Sakura Editor</STRONG> (Windows) — external download</LI> <LI><STRONG>EditPlus</STRONG> (windows) — external download, release notes</LI> <LI><STRONG>NetBeans</STRONG> (crossplatform) — download</LI> <LI><STRONG>Chrome Extension</STRONG> — external download</LI> <LI><STRONG>Userscript for Greasemonkey</STRONG> — external download</LI> <LI><STRONG>Geany</STRONG> — external download</LI> <LI><STRONG>RJ TextEd</STRONG> — built in since v7.50</LI> <LI><STRONG>AkelPad</STRONG> — external download</LI> <LI><STRONG>WIODE web-based IDE</STRONG></LI> <LI><STRONG>BlueFish</STRONG> — built-in in v2.2.1</LI></UL> <DIV> </DIV> <DIV><STRONG>Zen Coding 的用法</STRONG></DIV> <DIV> </DIV> <DIV>使用ZenCoding编写代码时，需要遵循一定的缩写规则：</DIV> <DIV> </DIV> <DIV> <UL> <LI>E<BR>元素名（div、p）；</LI> <LI>E#id<BR>带Id的元素（div#content、p#intro、span#error）；</LI> <LI>E.class<BR>带class的的元素（div.header、p.error）,id和class可以连着写，div#content.column</LI> <LI>E>N<BR>子元素（div>p、div#footer>p>span）</LI> <LI>E*N<BR>多项元素（ul#nav>li*5>a）</LI> <LI>E+N<BR>多项元素</LI> <LI>E$*N<BR>带序号的元素</LI></UL></DIV> <DIV> </DIV> <DIV><STRONG>Sublime Text 中使用Zen Coding的一些技巧</STRONG></DIV> <DIV> </DIV> <DIV>1、缩写扩展（Expand Abbreviation）。</DIV> <DIV> </DIV> <DIV>     之前知道，通过Control ＋ Alt ＋ Enter可以在一个新行中输入ZC的缩写，来生成代码。同时，如果我们在编辑中直接书写了ZC缩写，比如 div#content>p 当光标放置在p之后时，可以通过Tab键来扩展，ZC会从光标处开始向左侧搜索到第一个空白处，之间的代码作为ZC缩写，这样不必每次打开新行输入，提高了效率，缺点就是不能够实时预览。</DIV> <DIV> </DIV> <DIV>2、嵌套代码（Wrap with Abbreviation）</DIV> <DIV> </DIV> <DIV><img alt="," title="207139100cd5233ca6b302c3b2756a21.png" border="0" alt="207139100cd5233ca6b302c3b2756a21" src="https://img8.php1.cn/3cdc5/15c33/807/1bacaeff8d89c1d1.jpeg" ></DIV> <DIV> </DIV> <DIV>如上图所示，可以实现在已经写好的代码外面嵌套其他的代码，实现方式是将光标放置到想要嵌套的标签上，然后使用Control ＋ Alt ＋ Enter 呼出ZC的命令行，就可以了。</DIV> <DIV> </DIV> <DIV>其实Zen Coding还提供了很多方便代码编写的操作，例如标签匹配、返回上一个/下一个编辑点、更新img标签、合并行等，但是因为在Sublime Text中没有提供完整的支持，所以这些特性还无法使用。</DIV> <DIV> </DIV> <DIV>参考资料：</DIV> <DIV>1、Sublime Text 2 安装Zen Coding</DIV> <DIV>2、百度百科 Zen Coding</DIV> <DIV>3、Zen Coding</DIV> <DIV>4、关于使用Sublime Text 2的那些事儿</DIV> <DIV>5、Sublime Text</DIV> <DIV>6、ZenCoding CSS Properties</DIV> <DIV>7、Zen Coding in Sublime Text 2</DIV> <DIV>8、Zen Coding 让NotePad＋＋代码书写健步如飞</DIV> <DIV>9、Sublime Text 2 编辑器实用技巧</DIV><P >[插件]ZenCoding-HTML/CSS代码编辑利器,,</P><p>[插件]ZenCoding-HTML/CSS代码编辑利器</p></span> <br> <script type="text/javascript"> var cpro_id = "u6885494"; </script> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js"></script> </div> <div class="blog_tags"> <ul> <li><a href="https://www.php1.cn/tag/android" target="_blank" title="android">android</a></li> <li><a href="https://www.php1.cn/tag/asp.net" target="_blank" title="asp.net">asp.net</a></li> <li><a href="https://www.php1.cn/tag/php" target="_blank" title="php">php</a></li> <li><a href="https://www.php1.cn/tag/jsp" target="_blank" title="jsp">jsp</a></li> <li><a href="https://www.php1.cn/tag/数据库" target="_blank" title="数据库">数据库</a></li> <li><a href="https://www.php1.cn/tag/html" target="_blank" title="html">html</a></li> <li><a href="https://www.php1.cn/tag/css" target="_blank" title="css">css</a></li> <li><a href="https://www.php1.cn/tag/sublimetext" target="_blank" title="sublimetext">sublimetext</a></li> <li><a href="https://www.php1.cn/tag/编辑器" target="_blank" title="编辑器">编辑器</a></li> </ul> </div> <div class="article_cmnt" style="display: none;"> <div class="cmnt_title">写下你的评论吧 !</div> <form action="" method="post"> <div class="cmnt_text"> <textarea class="ping-txt" onfocus="ck_txt(this);" onblur="ck_txt2(this);" id="ping-txt" name="ping-txt" >吐个槽吧,看都看了