前端工具——编辑器之Notepad++

欲先善其事,必先利其器,如题。有人很喜欢拿编辑器作为信仰或者参照,事实上它只不过是一个 ”习惯“ ,目的是为了达到高效。

Adobe Dreamweaver

Dreamweaver相信没人没用过她,元老级人物了。现在最新的cs5.5版本已经能自定义pho功能的代码提示、jqurey、html5和css3支持,功能比当初强大多了,但是缺点就是:体积太大了。因为我是她领进前端开发的这条路的,所以也用她来作为这篇文章的引子。这里再提供一个Adobe cs5.5全系列的破解补丁和下载链接(文件里也包含了adobe全套软件的安装包下载地址)(不详细介绍了)。

Notepad++

现在我用这哥们了,因为他的优点也很多 免费、开源、灵活、轻巧,功能强悍。Notepad++ 最优秀的不是它本身,而是它的可扩展性,这跟VIM很类似,但是VIM的前期,全代码的操作方式学习起来很令人头疼,感觉用VIM就是个另类。这也是我最终选择基本不用学习就可以轻松上手的Notepad++的原因所在。

首先介绍下我是怎么配置我的Notepad++。点击Notepad++的官网下载并按提示安装。接下来我将介绍我的 Notepad++ 的配置。作为编辑器就只有两个插件和系统默认的代码提示,跟着我一步一步来配置吧

默认代码提示搭配css3、jq、html5的自定义设置

首先打开[首选项]->[备份与自动完成],按下图设置

前端工具——编辑器之Notepad++

Notepad++ 默认代码提示功能设置,可自行修改

接着点击下载本站为你精心编辑的css3、jq、html5提示文件并将其解压覆盖到\Notepad++\plugins 文件 。如果想增加提示就打开里面的文件自行添加

QuickText用标签代码替换文本自动完成的插件

QuickText是一款标签代码替换和文本自动完成插件标签代码替换和文本自动完成插件点击下载,解压发现里面有 QuickText.ANSI.dll QuickText.UNI.dll QuickText.ini 这样三个文件,(Uni版本一般给2000/XP用,ANSI版本一般给98)。所以对于不是98系统有用的只有QuickText.UNI.dll QuickText.ini 这两个文件是有用的。

安装步骤:

  1. 把 QuickText.UNI.dll 放到 Notepad++的 plugins 目录下
  2. 把 QuickText.ini 放到 Notepad++ 的 plugins/Config 目录下
  3. 重启notepad++

安装好之后为了避免快捷键冲突,进入设置-》管理快捷键-》Plugin commands-》找到 Replace Tag,把原来的 Tab 改为 ctrl+Shift+Enter,如下图

前端工具——编辑器之Notepad++

避免Text快捷键跟Notepad++ Tab键冲突

最后再设置QuickText插件里的快捷设置,在插件-》QuickText-》Options,添加你想要快速输入的内容。比如:选择语言项里的JavaScript, tag name 里输入“jq”(你想快捷输入的标签), substitution Text里输入如下代码($代表光标位置):

jQuery(document).ready(function() {/n$/n});

这样设置好了之后,只要输入jq再下ctrl+Shift+Enter就会出现形如:

jQuery(document).ready(function() {

});

zen-coding让你编写代码快速如飞的插件

zen-coding是一款更强大代码缩写自动完成插件点击下载

安装步骤:

  1. 解压将里面的 NppScripting文件 和 NppScripting.dll 放到 Notepad++的 plugins 目录下
  2. 重启notepad++

这样就安装完毕后。那我们先学习一下 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)
  • 【Ctrl+Shift+A】 嵌套代码(Wrap with Abbreviation)
  • 【Ctrl+Shift+D】选中代码块(Balance Tag Inward/Outward),选中当前光标所在的代码块,长按可依次选中父块
  • 【Ctrl+Alt+[ , Ctrl+Alt+]】转到上一个/下一个编辑点(Go to Next/Previous Edit Point),选中当前光标所在的代码块,长按可依次选中父块
  • 【Ctrl+Alt+M 】合并行(Merge Lines),将选中的多行代码合并为一行。
  • 【Alt+/ 】添加、移除注释(Toggle Comment),注释掉光标所在的代码块 (Notepad++ 自带的Ctrl+Shift+Q也可以用来注释代码)
  • 【Ctrl+’ 】空标签转化(Split/Join Tag),
  • 【Ctrl+Shift+’ 】移除标签(Remove Tag)

其他html、css缩写方式建议查看 Zen Coding 缩写规则

Zen Coding Ctrl+Y 快捷键冲突修复

plugins\NppScripting\includes\Zen Coding.js 8001行

addMenuItem('Evaluate Math Expression', 'evaluate_math_expression', 'Ctrl+Y');

将Ctrl+Y修改成Ctrl+Shift+Y只要不冲突就好了,(修改缩写规则也是在这个js文件里的)

Zen Coding搭配QuickText插件和默认提示代码设置一起使用,速度绝对会是飞快了。习惯dw提示的朋友难道不想也自己亲手配置一个自己的notepad++,他不仅有dw的提示功能还有其没有的功能,体积小,携带方便,而且notepad++是开源的,就此摆脱了在网上苦苦寻找破解dw的方法的煎熬。快按照步骤一步一步配置吧。还有在设置语言项里可以设置主题样式。

Notepad++ 的其他插件

Notepad++作为一款编辑器如果你照着上面配置再慢慢熟练那些命令,我相信你一定会喜欢上Notepad++ 的。接下来我介绍一些作为编辑器可有可无的功能插件,如果你觉得有必要的就安装。想要什么功能就装什么插件,不像dw那样,不管你要不要先给你一股脑装上。这样两者的区别就很明显:一个开启速度慢的要死,如果再开个ps了,何况我们还要开很多浏览器测试兼容性,配置不好的电脑会受不了的,卡死你。果断换了用Notepad++吧。其他给力插件接上

  1. Explorer plugin该项目包括资源管理器,功能列表,十六进制编辑器,拼写检查和一个控制台程序NppExec。
  2. NPPFTP plugin一个集成于Notepad++的FTP客户端。
  3. Compare Plugin一个非常实用的工具,可以用来比较两个文件不同之处。

Notepad++ 其实还有很多插件,我这里只介绍一些给力,大家可以去SourceForge上Notepad++插件寻找自己觉得需要功能的插件。

Notepad++插件的安装方法,

  1. 打开[插件]-》[plugin manager]-》[show plugin manager],他就自动把所有插件都列出来了,你只需选出自己想要的插件,然后他就自动帮你安装。
  2. 所有notepad++插件下载页下载,然后按照按照文件里readme的步骤安装。

这里再提醒一下,Notepad插件有ANSI版和Unicode版本的,Uni版本一般给2000/XP用,ANSI版本一般给98。有些插件安装方法可能不同,安装前先看下安装包里的说明文件。好叻,前端编辑器notepad++介绍到此结束。

本文源链接:http://www.html5jscss.com/editor-notepad.html

转载请注明《前端工具——编辑器之Notepad++》| html5jscss

评论关闭了.