notepad++ 可以偷懒的两个插件

转载于：http://www.huanlebang.com/y2011/193.html

 

插件1：

代码缩进插件：UniversalIndentGUI。

在插件--》plugin manager -->UniversalIndentGUI--》install安装

 

插件2：

 Zen Coding 插件：

下载 Zen.Coding-Notepad++.v0.6.1.zip 解压

将解压所得的文件放入 Notepad++ 程序的安装目录下的plugins文件夹。

重启Notepad++，即可开始使用 Zen Coding。

 

 

 熟悉 Zen Coding for Notepad++ 的快捷键，也是 Zen Coding 的精髓 


1.【Ctrl+E】 展开缩写（Expand Abbreviation）

　　比如写下，  div#page>div.logo+ul>li*3>a

　　按一下 Ctrl+E，立马就可以转化成： 


<div id="page">
	<div class="logo"></div>
	<ul id="navigation">
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
	</ul>
</div>

2.【Ctrl+Shift+A】 嵌套代码（Wrap with Abbreviation）

　　　　

　　　　比如，我们想让写好的 <p>hello world</p> ，想在外层再套一个div，只需按下【Ctrl+Shift+A】，

　　　　在弹出的对话框中输入： div.wrap，回车。此标签就能自动被嵌套。

　　　　甚至，我们可以玩的更炫一些，写好三行列表内容，全裸，此时没有任何标签。只需按下【Ctrl+Shift+A】，输入ul>li* ，回车。

　　　　这三行内容就能自动被ul li 嵌套起来。（不仅限于 li 列表哦）

　　　　

 

3.【Ctrl+Shift+D】选中代码块（Balance Tag Inward/Outward）

　　选中当前光标所在的代码块，长按可依次选中父块

 

4.【Ctrl+Alt+[ , Ctrl+Alt+]】 转到上一个/下一个编辑点（Go to Next/Previous Edit Point）

　　按下可以依次跳到可输入内容的编辑点，省去了不停按方向键或鼠标来定位编辑点的麻烦。

　　

 

5.【Ctrl+Alt+M 】合并行（Merge Lines）

　　将选中的多行代码合并为一行。压缩css、js代码为一行时，这个很方便。Ctrl+A，然后Ctrl+Alt+M，两下即可搞定，免去了动用压缩工具的麻烦。

　　（当然这个只是简单地将代码合并为一行，并不能做更深入的代码压缩）

 

6.【Alt+/ 】添加、移除注释（Toggle Comment）

　　注释掉光标所在的代码块 （Notepad++ 自带的Ctrl+Shift+Q也可以用来注释代码）

7.【Ctrl+’ 】空标签转化（Split/Join Tag）

　　比如将 <div class="test"></div> 转化为 <div class="test"/>， 反向亦可。

8.【Ctrl+Shift+’ 】移除标签（Remove Tag）

　　比如将 <div class="test">hello world</div> 移除div标签，留下hello world。 
好了，目前 Notepad++ 的 Zen Coding 只有这几个快捷键，

 

 

---

 

下面介绍一些常用到的缩写

不知道大家新建一个html 页面时，是如何输入文档声明和 head 那一坨东西的。现在有了Zen Coding，只需输入几个字母就能立马生成相应文档声明的

1.html 结构框架

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)

2.head 中常用到的一些缩写

meta:utf, meta:compat
style, link:css, link:print, link:favicon, link:rss,
script, script:src

3.body 中会常用到的缩写

诸如 div, p, a, ul, ol, input:t, input:r 等等

其中，类似 ul+ 的形式可展开为（+号可自动生产默认的子元素）

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

类似的还有 ol+, dl+, table+, tr+, select+, map+, optg+ 等

 

4.IE 条件注释：

cc:ie6, cc:ie, cc:noie

下边是一些典型用法示例：

• div#name.one.two => <div id="name" class="one two"></div>

• 　　[title="Hello world" rel] => <a href="" title="hello world" rel=""></a>

 

• td[colspan=2] => <td colspan="2"></td>

• li.item-$-content*3 => 
  	<li class="item-1-content"></li><li class="item-2-content"></li><li class="item-3-content"></li> 

• #content>.section => 

  	<div id="content"><div class="section"></div></div>

• li.item$$$ =>

	<li class="item001"></li>

• li.item$*3 =>
  • 　　<li class="item1"></li><li class="item2"></li><li class="item3"></li>


如果你写了这么一串出来，那么一个页面的基本结构就出来了：

div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer 

 

此外【|e】 可以输出转义字符

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

div#wrap>div.content>p|e|e 可转化为：

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

以上介绍的仅仅是有关HTML的缩写，CSS的缩写就更多了，建议查看 Zen Coding 小抄，学习CSS 的 Zen Coding 方式

自己编写缩写规则

plugins\NppScripting\includes\Zen Coding.js

在其中对应位置仿照已有规则添加自己的缩写规则。也可以修改缩写规则更符合自己的习惯。

即使你不编写自己的缩写规则，也强烈建议你阅读此文件，熟悉 Zen Coding 自带的一些缩写规则，让代码书写更加事半功倍~