Notepad++配合QuickText打造快速高效的文本编辑器&&Zen Coding 让 Notepad++ 代码书写健步如飞

最新推荐文章于 2024-09-04 17:17:45 发布

onlyaisha

最新推荐文章于 2024-09-04 17:17:45 发布

阅读量3.8k

点赞数

文章标签：文本编辑 class dreamweaver html xhtml plugins

Notepad++配合QuickText打造快速高效的文本编辑器

http://www.soberma.com/notepad-quicktext

一直以来，很想把我使用的Notepad++这款文本编辑器(TextEditor)和QuickText这个标签代码替换和文本自动完成插件介绍给大家，但是一直疏于整理，一直没能放出，只是私下给几个朋友做过简单的介绍和演示。

近来发现好多网友开始关注编辑器的标签代码替换或者自动完成等相关功能，这也是我一直在使用的一个功能。的确，这是一个很好的功能，编辑器配合这个功能可以有效地提升代码的书写速度，提高自己的工作效率。

其实，具有文本替换或者代码自动完成这个功能的软件也是挺多的，Windows环境下，至少TopStyle、Komodo IDE、EditPlus、VIM、Emacs等编辑器都具有类似功能的插件。这些编辑器我个人也都曾经用过一段时间，就功能、授权方式以及资源占用方面比较来看，Notepad++和VIM无疑是最好的选择，两者功能都比较强大，都是开源软件，软件本身都比较小，占用系统资源也很少。但是VIM的前期学习成本却太大，全代码的操作方式学习起来确实很令人头疼。这也是我最终选择基本不用学习就可以轻松上手的Notepad++的原因所在。

前面说了一堆不知道算不算废话的废话，本想继续废话，但是想想这些废话本已经存在，我也就不再废话了。想详细了解Notepad++这款软件的请移步Notepad++官网或者维基百科。想了解QuickText这个插件的请移步SourceForge。

废话结束，下面开始上图，用图片的方式给大家带来一个从Notepad++下载、安装、配置，到QuickText下载、安装、配置，到体验快速代码自动完成的全过程。

1、打开Google，在搜索框中输入notepad++并搜索
2、在Google搜索结果中点击进入Notepad++官网
3、在Notepad++官网中点击上导航的“下载专区”进入下载页面，然后点击“下载Notepad++可执行程式码”
4、在打开的SourceForge页面中点击绿色的“Download Now!”按钮下载最新的Notepad++程序
5、双击下载的Notepad++程序进行安装
6、选择安装位置
7、如果你想把Notepad++设为默认的IE浏览器源代码查看程序，请勾选“As default html……”选项
8、完成安装并运行Notepad++程序
9、Notepad++运行后会打开一个显示软件最新属性的页面
10、点击下载我提供的Notepad++插件风格包并解压缩
11、复制QuickText.dll到Notepad++安装目录下的plugins文件夹中
12、复制QuickText.ini到Notepad++的安装根目录下
13、复制stylers.xml文件，XP用户到C:\Documents and Settings\用户名\Application Data\Notepad++\ Win7用户到C:\Users\用户名\AppData\Roaming\Notepad++\目录备份并替换原有的stylers.xml文件
注意：Application Data和AppData两个目录为隐藏目录
14、打开Notepad++，在菜单中选择设置-管理快捷键
15、选择Main menu中36行单词自动完成
16、双击在弹出的窗口中勾选SHIFT选项完成更改
17、在Notepad++菜单中选择插件-QuickText，可见默认的Repalce Tag快捷键为Ctrl+Enter
18、点击插件-QuickText中的Options选项可进入QuickText的选项设置窗口
19、打开Notepad++，在语言菜单中将当前文档语言设置为HTML
20、在文档中输入dtd
21、按Ctrl+Enter快捷键，dtd标签自动替换为
22、打开Notepad++，在语言菜单中将当前文档语言设置为CSS
23、在文档中输入w
24、按Ctrl+Enter快捷键，w标签自动替换为
25、本篇教程也是用Notepad++写成的，截图如下：

俗话说，师傅领进门，修行在个人。我不敢自称师傅，只愿这个小小的分享能够有助于大家学习Notepad++和QuickText并利用它们有效地提升你的工作速度和效率。Notepad++的更多功能和技巧，需要在使用中慢慢探索。

http://rpsh.net/archives/zen-coding-npp/

Notepad++ 是一款无比轻巧便捷的代码编辑工具。它无可挑剔的启动速度，优秀的语法高亮，干净整齐的代码缩进，便捷的括号高亮匹配赢得了无数人的喜爱。

但，不知道有多少同学跟我一样，在coding 时被 Notepad++ 粗陋的代码自动补全折磨的体无完肤（Notepad++那甚至不能叫自动完成）。虽然无比羡慕诸如Dreamweaver之类的代码自动完成，但固于上述提到的几点Notepad++的优秀之处，纠结中毅然依旧坚守Notepad++。而 Zen Coding 的横空出世，总算终结了这种纠结，让我们得以以一种无比帅气的方式书写代码。

先看一段演示视频吧（建议反复观摩，其中演示了 Zen Coding 的各种典型用法）

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo. （网速慢的，可以观看优酷版或者下载该视频。）

为Notepad++安装 Zen Coding 插件

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

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

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

Zen Coding 用法

首先，我们先学习一下 Zen Coding 的缩写规则（其实就是CSS选择器）

E
元素名 (div, p);
E#id
带id的元素 (div#content, p#intro, span#error);
E.class
带class的元素 (div.header, p.error.critial). id 和 class 可以连写，如： div#content.column.width;
E>N
子元素 (div>p, div#footer>p>span);
E+N
兄弟元素 (h1+p, div#header+div#content+div#footer);
E*N
多项元素 (ul#nav>li*5>a);
E$*N
带序号的元素 (ul#nav>li.item-$*5);

接下来，我们来熟悉 Zen Coding for Notepad++ 的快捷键，也是 Zen Coding 的精髓

【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>

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

比如，我们想让写好的 <p>hello world</p> ，想在外层再套一个div，只需按下【Ctrl+Shift+A】，在弹出的对话框中输入：div.wrap，回车。此标签就能自动被嵌套。

甚至，我们可以玩的更炫一些，写好三行列表内容，全裸，此时没有任何标签。只需按下【Ctrl+Shift+A】，输入 ul>li* ，回车。这三行内容就能自动被ul li 嵌套起来。（不仅限于 li 列表哦）

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

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

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

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

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

将选中的多行代码合并为一行。压缩css、js代码为一行时，这个很方便。Ctrl+A，然后Ctrl+Alt+M，两下即可搞定，免去了动用压缩工具的麻烦。（当然这个只是简单地将代码合并为一行，并不能做更深入的代码压缩）

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

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

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

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

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

比如将 <div class="test">hello world</div> 移除div标签，留下hello world。
好了，目前 Notepad++ 的 Zen Coding 只有这几个快捷键，下面介绍一些常用到的缩写

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

head 中常用到的一些缩写

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

body 中会常用到的缩写

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

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

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

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

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$*3  =>
		<li class="item1"></li><li class="item2"></li><li class="item3"></li>

li.item$$$ =>
	<li class="item001"></li>


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>

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

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

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

&lt;div id="wrap"&gt;
    &lt;div class="content"&gt;
        &lt;p&gt;&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;

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

&amp;lt;div id=&quot;wrap&quot;&amp;gt;
    &amp;lt;div class=&quot;content&quot;&amp;gt;
        &amp;lt;p&amp;gt;&amp;lt;/p&amp;gt;
    &amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;

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