對于前端來說，編輯器是除了chrome瀏覽器以外，每天打開時間最長的軟件。選擇一款功能強(qiáng)大又趁手的工具，可以讓開發(fā)效率提升，達(dá)到事半功倍的效果。

推薦名單

ATOM：來自github的編輯器，基于electron開發(fā)，CoffeeScript 實(shí)現(xiàn)。

Brackets：來自adobe的編輯器，繼承了adobe的優(yōu)秀傳統(tǒng)，自帶即時預(yù)覽和眾多好用的插件。

Hbuilder ：國產(chǎn)優(yōu)秀IDE，基于eclipse，完備的代碼提示，并且可以輕松生成hybrid應(yīng)用。

SublimeText3：非常多前端使用的編輯器，輕量級，快速啟動，豐富的插件。

VS Code： 來自微軟的編輯器，被稱作“披著編輯器外衣的IDE”

Atom

默認(rèn)深色背景，樣式全部由CSS設(shè)定，非常方便修改主題，同時有非常豐富主題可供下載。

可以非常自由的組合子窗口，簡直自由的可怕。

Atom的插件都是基于JS開發(fā)的，截止到2016年9月5日，ATOM共有4819款插件。

所以你所能需要的插件，在Atom幾乎全部都找到。

插件開發(fā)基于JS，其實(shí)Atom整個編輯器都是基于JS的。

推薦一個Atom獨(dú)占的，狂拽炫酷的插件：activate-power-mode 用起來有一種戰(zhàn)斗程序員的感覺。貌似身邊有很多朋友都是因?yàn)檫@個插件才裝上了Atom。

sublime

中規(guī)中矩的外觀，多種主題和配色可選擇，可以通過配置文件定義各種外觀細(xì)節(jié)。

有7種layout方式，日常也是比較夠用了

SublimeText插件基于python開發(fā)，這一點(diǎn)對于前端來說不是很友好，也許這就是為什么SublimeText只有3766款插件，在數(shù)量上還不如后來者Atom。

不過因?yàn)槭褂谜弑姸啵瑫r成名已久，任何一個新的知名插件幾乎都有SublimeText的版本。(但是你看，activate-power-mode就沒有)所以我們說，SublimeText的插件生態(tài)依然是很健康的。

Brackets

默認(rèn)有兩個主題，可以通過安裝theme包拓展新的主題。親測brackets的插件商店并不是很好用，安裝插件可以通過網(wǎng)頁的插件商店查找安裝包.zip的鏈接，然后通過鏈接安裝。

布局方面只支持左右或者上下兩種方式。

但是編輯器有一個很逆天的自帶功能(雖然其他編輯器也可以通過插件實(shí)現(xiàn))，可以一鍵打開一個瀏覽器窗口，同步預(yù)覽在編輯的網(wǎng)頁渲染效果，HTML和CSS的修改可以頁面無刷新的即時顯示。

另外一個逆天的功能是，直接在HTML代碼的位置修改CSS，還可以直接在CSS代碼段中選擇編輯顏色。

編輯器不集成nodejs調(diào)試，親測node-debug插件也不是很好用。

Brackets的插件需要科學(xué)上網(wǎng)才能安裝，官方的插件商店有1246款插件。(這個數(shù)量包含主題包，代碼片等)并不是很豐富，不過代碼格式化，less編譯，git同步等常用的插件還是有的。

Brackets插件同樣是基于js開發(fā)，但是插件開發(fā)相關(guān)的文檔教程比較少。

Hbuilder

類似eclipse的界面，功能也是大而全。主打“綠柔”主題，為了宣傳也是很拼。

有很豐富的配置選項(xiàng)，這也是Hbuilder作為一個IDE和其他幾個編輯器很大的區(qū)別。

同時支持邊看邊改模式

Hbuilder最強(qiáng)大的是可以很方便做移動端開發(fā)，甚至直接打包hybrid應(yīng)用。

Hbuilder是基于eclipse開發(fā)的，所以也是使用的eclipse插件。在插件菜單，Hbuilder推薦了一些常用插件，基本覆蓋了前端開發(fā)需要的各種功能。

VS Code

自帶debug模塊和git模塊，布局和配色也很舒服，

debug模塊可以添加斷點(diǎn)調(diào)試nodejs代碼，用來開發(fā)后端或者寫寫任務(wù)腳本頓時方便了很多。

git面板非常友好的顯示代碼對比，可以直接修改，提交。

VS Code作為后來者，2015年12月才開放插件，但是短短大半年時間就已經(jīng)積累了3500款插件。除了涵蓋前端開發(fā)的各個方面，同時各種后端代碼的高亮甚至調(diào)制都有相應(yīng)插件支持，可謂是相當(dāng)強(qiáng)大。

總結(jié)

好像monokai的配色方案被很普遍的接受，身邊的同事大多也是使用深色背景，但是Hbuild一直很努力的說服大家使用淡綠色。我個人依然是喜歡黑色背景，對比度高，比較清楚。不過這幾款編輯器都支持更換主題和配色，所以原生配色并不是什么大問題。

原生功能方面，布局最強(qiáng)大的非Atom莫屬，無比自由的分欄，搭配4K屏進(jìn)行開發(fā)，完全就是科幻片中的感覺。同時Atom在插件數(shù)量方面也是最領(lǐng)先的，這顯然可以讓一款編輯器如虎添翼。

Brackets畢竟是adobe出品的，雖然js調(diào)試的功能比較弱，但是我們重構(gòu)強(qiáng)啊。雖然比如Hbuilder也有同步查看，但是要刷新，chrome搭配livereload可以實(shí)時刷新，但是瀏覽器會閃一下。而Brackets顯示平滑，并且可以高亮當(dāng)前編輯的dom元素，不愧為編輯器界的“重構(gòu)小王子”。

Hbuilder在hybrid開發(fā)的方面一騎絕塵，同時代碼提示和快捷鍵也是完備的要上天。對于英文不好的同學(xué)來說，Hbuilder絕對是體驗(yàn)頂級前端開發(fā)工具的一個最好選擇。

VS Code有著其他幾個編輯器都沒有的Nodejs調(diào)試面板，同時內(nèi)置了git工具，是重度前端開發(fā)非常優(yōu)秀的編輯器。插件開發(fā)的社區(qū)也非常活躍，是一個很有前景的編輯器。

sublimeText是我日常用的，優(yōu)勢在于成名已久，插件眾多，高度可配置，各方面的能力比較平均，畢竟是個收費(fèi)軟件的品質(zhì)。