这里推荐一个前端开发工具webStorm。用了大概快半年了，发现全部其余工具无出其右的。目前最新版本已经到4.0.2，半年前仍是2.Xphp
相比aptana、dreamweaver、sublime和vim等我曾用过的，高端开发工具仍是用这个顺手、智能。css
一、切身感觉到的好处：html
1）灵活的默认快捷键。起初他的默认快捷键和经常使用的不太同样，感受不适应（固然在setting->keymap中能够切换你经常使用编辑器的快捷键，如eclipse、vim、Mac OS等），可是用惯了发现设计的合理性，如撤销和前进，经常使用的编辑器都是ctrl+z和ctrl+y,而webstorm为ctrl+z和ctrl+shift+z。ctrl+shift+i查看函数定义信息、ctrl+alt+l格式化代码等等很是方便。前端
2）更加智能的提示，区分浏览器内核，并智能加载本身写的类库；错误提示，如图html中图片路径写错，会智能红色智能提示；颜色试着在行数位置预览颜色而且能修改。等等，总之让前端开发从未这样智能过。java
3）不须要保存，当文件关闭后，再打开撤销和前进均不丢失。此处真的很好用。而以往的编辑器都是须要保存文件，而且关闭，再打开撤销和前进清空。node
4）丰富的插件。编辑器的强大之处就是插件的丰富和有序管理，webStorm作的不错。打开File->Settings...->Plugins中有丰富的经常使用捆绑在webStorm中的插件，还有不少外部custom插件，点击Browser repositiories...中寻找你想要的插件。不过没有找到相似ant这样的自动化脚本插件，有些遗憾。jquery
几个小技巧：a）ctrl+shift+i能够看到函数定义信息、F4为跳转到方法定义处，shift+F6局部变量统一更名等等方便的快捷键；web
b）若是某些脚本不想加入智能提示里面来。可在js文件上右键->Mark as Plain Textvim
c）选中一个局部变量，而后shift+F6可在局部内部赞成更名，固然此功能慎用，仍是有必定风险性，在eclipse中写java此功能尚且不完善，此处更改局部变量能够用用。浏览器
二、因为webStrom能够本身修改代码显示样式，而且能够导入导出，这里推荐这个风格，我以为很舒服：http://www.cnblogs.com/jikey/archive/2010/12/30/1921530.html
因为上边文章设置在字体大小、代码颜色颜色、js注释风格不太符合个人风格，这里我作了小量调整：请点击这里下载
怎样使用和编辑此风格：
1）而后放入以下路径：
XP:C:\Documents and Settings\Administrator\.WebIde40\config\colors
win7: C:\Users\用户\(用户名)\.WebIde40\config\colors
2）重启webStorm，打开 ->Settings...-> Editor->Colors & Fonts->Scheme name选中custom1
3）若是想编辑，在Colors & Fonts子目录中进行个性化代码风格编辑，编辑完毕便可：
我当前的风格以下：
三、webStorm的快捷键说明（来自于http://www.cnblogs.com/jikey）：
. ctrl + shift + n: 打开工程中的文件(相似于eclipse中的ctrl+shift+R)，目的是打开当前工程下任意目录的文件。 . ctrl + j: 输出模板 . ctrl + b: 跳到变量申明处 . ctrl + alt + T: 围绕包裹代码(包括zencoding的Wrap with Abbreviation) . ctrl + []: 匹配 {}[] . ctrl + F12: 能够显示当前文件的结构 . ctrl + x: 剪切(删除)行，不选中，直接剪切整个行，若是选中部份内容则剪切选中的内容 . alt + left/right:标签切换 . ctrl + r: 替换 . ctrl + shift + up: 行移动 . shift + alt + up: 块移动(if(){},while(){}语句块的移动) . ctrl + d: 行复制 . ctrl + shift + ]/[: 选中块代码<table>....</table> . ctrl + / : 单行注释 . ctrl + shift + / : 块注释 . ctrl + shift + i : 若是是css中的class则显示当前class详细信息,若是是js则显示function的详细信息(想象一下，若是在jquery的方法上查看详细信息，就直接能够看到实现代码了)，若是是php，那当时仍是function的详细信息 . ctrl + '-/+': 能够折叠项目中的任何代码块，包括htm中的任意nodetype=3的元素，function,或对象直接量等等。它不是选中折叠，而是自动识别折叠。 . ctrl + '.': 折叠选中的代码的代码。 . shift + esc: 当前激活的任意小窗口最小化，也能够是alt + '数字键'，数字在小窗口标题栏上有显示。 . alt + '7': 显示当前的函数结构。相似于eclipse中的outline的效果。试验了一下，要比aptana的给力一些，但仍是不能彻底显示prototype下面的方法名。 . 若是是*.html页面，则在文件名下的导航栏某DOM结构上右键，能够全选当前DOM结构。 . 项目中添加对jQuery的支持。File -> settings -> Javascript Libraries -> Add在files中添加路径，在documentations urls中添加文档支持。这里边须要注意一下的是，要添加原始未压缩的代码，*.min.js版的方法是不会被提示。添加完成后，右边菜单中还有一 download 按钮，单击以后，他会自动选择最新版的js库进行搜索，而后在弹出的列表中，再单击选择一个后，点击Download and Install以后，才会被下载。这块体验不是太好，没有checkbox,也没有radio，只是选中后整行变暗。 若是添加多个版本的jQuery，就能够直观的看到各个版本之间新方法的差异了。* 在这项的子菜单中 Usage Scope 右边 Project 第二栏Library下单击，选择新添加的jQuery，使其对整个项目进行覆盖。也能够在当前页面右键Use JavaScript Library 中选择最顶的刚添加的jQuery支持。 固然，并非添加的越多越好，添加的多以后，在代码提示后会有数毫秒的延迟，须要谨慎选择最新版。
ps:固然前端开发的话仍是高低搭配不错，大型编辑器必然启动、快速运行稍差
我这边一直用webStrom+editplus搭配，效率提升很多。工欲善其事，必先利其器，好的工具必然能事半功倍。