這里推薦一個前端開發工具webStorm。用了大概快半年了，發現所有其他工具無出其右的。目前最新版本已經到4.0.2，半年前還是2.X
相比aptana、dreamweaver、sublime和vim等我曾用過的，高端開發工具還是用這個順手、智能。
1、切身感受到的好處：
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中圖片路徑寫錯，會智能紅色智能提示；顏色試着在行數位置預覽顏色並且能修改。等等，總之讓前端開發從未這樣智能過。
3）不需要保存，當文件關閉后，再打開撤銷和前進均不丟失。此處真的很好用。而以往的編輯器都是需要保存文件，並且關閉，再打開撤銷和前進清空。
4）豐富的插件。編輯器的強大之處就是插件的豐富和有序管理，webStorm做的不錯。打開File->Settings...->Plugins中有豐富的常用捆綁在webStorm中的插件，還有很多外部custom插件，點擊Browser repositiories...中尋找你想要的插件。不過沒有找到類似ant這樣的自動化腳本插件，有些遺憾。
幾個小技巧：a）ctrl+shift+i可以看到函數定義信息、F4為跳轉到方法定義處，shift+F6局部變量統一改名等等方便的快捷鍵；
b）如果某些腳本不想加入智能提示里面來。可在js文件上右鍵->Mark as Plain Text
c）選中一個局部變量，然后shift+F6可在局部內部同意改名，當然此功能慎用，還是有一定風險性，在eclipse中寫java此功能尚且不完善，此處更改局部變量可以用用。
2、由於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子目錄中進行個性化代碼風格編輯，編輯完畢即可：
我當前的風格如下：
3、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搭配，效率提高不少。工欲善其事，必先利其器，好的工具必然能事半功倍。