進(jìn)來(lái)，不少小伙子、小妹子來(lái)問(wèn)一個(gè)家常便飯，但又逃不脫的問(wèn)題：
小北哥哥，現(xiàn)在這么多編輯器，我該用哪一個(gè)好啊，看著都不孬?。ㄘ钟玫煤茫。?/p>
此篇文章，純客觀分析 順便吹逼，老鳥(niǎo)和大神直接略過(guò)吧！
省的你們看到我寫(xiě)這個(gè)問(wèn)題，再說(shuō)我煩不煩啊，這問(wèn)題都討論了多少年了，甚至好多群里，一看到誰(shuí)在討論編輯器，就要送飛機(jī)票。
但很多轉(zhuǎn)入前端的孩子還是很迷茫， 能力和悟性也分三六九等，人不同，自然適合自己的工具也要不同， 你不能你是個(gè)弱雞，就學(xué)人家用VIM 或者直接文本編輯器？你這不找虐呢？
俗話說(shuō)得好: 工欲善其事,必先利其器. 代碼要寫(xiě)好, 利器少不了.利器如果少，BUG天天找！
** 下面先跟著我 來(lái)了解一下 前端普遍流行的代碼編輯器. **
NO 1: 「 Dreamweaver 」
特點(diǎn)：年代久遠(yuǎn)，古時(shí)候 網(wǎng)頁(yè)三劍客必備良藥。
因?yàn)槲业?html css 是在大學(xué) 室友玩CF、魔獸、 星際的時(shí)候 我戴著耳機(jī)偷偷學(xué)的，我的一篇文章：《web到底是什么》也簡(jiǎn)單介紹了這個(gè)花花綠綠的玩意兒。
那會(huì)只知道Dreamweaver 可以自動(dòng)提示，那是相當(dāng)牛逼了. 當(dāng)時(shí)覺(jué)得好方便啊, 代碼花花綠綠的（當(dāng)時(shí)好多教程，都是文本編輯器直接敲的，一片黑呼呼的，嚴(yán)重影響顏值）, 看起來(lái)舒服, 主要是有代碼提示. 敲一個(gè) 'position：'屬性 這個(gè)在新手來(lái)講很長(zhǎng)了吧，你不給我提示你想讓我天天過(guò)英語(yǔ)四級(jí)？所以理所應(yīng)當(dāng) 那時(shí)候入坑的人 沒(méi)人不用Dreamweaver 的。
上面圖片是cs4, 我那時(shí)還沒(méi)有這個(gè)版本, 貌似是dw8, 而且那時(shí)候Dreamweaver還是micromedia公司（公司名字當(dāng)時(shí)我都記不住，太長(zhǎng)）, 后來(lái)才被Adobe收購(gòu)的
當(dāng)時(shí)用Dreamweaver的時(shí)候還需要特別注意utf-8和非utf-8的問(wèn)題, 因?yàn)橛浀媚菚r(shí)默認(rèn)好像不是utf-8, 需要在設(shè)置里設(shè)置一下才行.
以前還有一個(gè)frontpage的工具,主要是自動(dòng)表格能力強(qiáng)悍！那時(shí)候大部分網(wǎng)頁(yè)還是table居多，你們現(xiàn)在體會(huì)不到！
NO 2: 「 Notepad++ 」
特點(diǎn)：后端程序猿的真愛(ài)，性能出眾，插件良多，自動(dòng)提示友好，在當(dāng)時(shí)顏值也可以了
我跟風(fēng)，用了好長(zhǎng)一段時(shí)間的notepad++ ，還總是更新最新版，每次啟動(dòng)此神器，都要先點(diǎn)擊更新。
那時(shí)候 google由于歷史原因被K了，被度娘迷惑，一搜代碼神器就是 Notepad++ ，并不知道 [ Sublime text ] 這個(gè)真正的神器。不然依著我 先看顏值的尿性 早用sublime text 去了！呵呵呵！
Notepad++最大的特點(diǎn)就是輕便、性能強(qiáng)悍. 不過(guò)它相對(duì)于ide來(lái)說(shuō), 功能還是弱. Notepad++要想功能強(qiáng)大點(diǎn), 就需要安裝一些插件了.
插件地址在這里, 挺多的.
這里推薦2個(gè)我最常用的插件:
Zen Coding或者Zen Coding-Python(代碼編寫(xiě)神器, 必備)
Compare Plugin(代碼對(duì)比工具, 比較2個(gè)代碼之間的差異)
Notepad++還有一個(gè)很大的亮點(diǎn)就是配對(duì)標(biāo)簽高亮功能, 如下圖:
我覺(jué)得sublime和 webstorm 的配對(duì)標(biāo)簽高亮都沒(méi)有這個(gè)好用.醒目
雖然我現(xiàn)在基本不用Notepad++寫(xiě)代碼了, 但有時(shí)候工作中看一些代碼塊 和單個(gè)源文件還是會(huì) 右鍵-> Notepad++ ,估計(jì)變成習(xí)慣了！
NO 3: 「 Sublime Text 」 -- 重點(diǎn)推薦
特點(diǎn)：最合適前端的神器，神器， 神器！ 輕便、快捷、目前 顏值最高、速度最快、插件最人性化的編碼神器（不是IDE）
Sublime Text 是我目前最常用離不開(kāi)的編輯器了。它是一款巨牛的編輯器，然而我自己配置過(guò)的 比ide 還要強(qiáng)大，不吹！我現(xiàn)在只要打開(kāi)工作電腦，第一件事就是打開(kāi)它 我用的最新版本 Sublime text3
我的博客也有很多關(guān)于Sublime Text3的一些文章 和 主題 和必不可少的開(kāi)發(fā)插件，因?yàn)槲业谝谎劭吹剿臅r(shí)候，我tm 就吧其他編輯器封存了，對(duì)只愛(ài)他一個(gè)了。
顛覆了我的三觀
- 一個(gè)編輯器居然有這樣的顏值和插件配置方式。
- 插件全部是Python 腳本編寫(xiě)，寄存到官網(wǎng)，在編輯器本身就可以直接搜索下載（這本身就像IDE 的思維了，具方便）
- 各種配置靈活，全部可以打開(kāi)配置文件手動(dòng)修改，而不是像IDE 一樣只能勾勾選選。真正做到了靈活和功能的同樣強(qiáng)大
- 編輯器的通?。簺](méi)語(yǔ)法檢測(cè)和格式化，甚至不能編譯程序。然而 此神器統(tǒng)統(tǒng)都有插件可以解決，我有時(shí)候調(diào)試java、nodejs 部分class都可以編譯
- 最主要的一點(diǎn)，顏值太tm高了，寫(xiě)代碼都覺(jué)得瞬間有逼格了。你想想，你在一個(gè)貧民窟里寫(xiě)代碼 和 馬爾代夫海邊寫(xiě)代碼是不是兩個(gè)感覺(jué)！
其他編輯器那丑逼樣就像貧民窟啊 對(duì)吧！
必裝插件
** Plugins ** - 我共享部分插件
（由于很多，也很好玩，篇幅長(zhǎng)不好介紹完，有興趣的童鞋可以留言問(wèn)我，后面還會(huì)專(zhuān)門(mén)介紹sublime）
插件有很多，但不建議全部都安裝，用到那個(gè)安裝那個(gè)，安裝過(guò)多，由于插件質(zhì)量良莠不齊，會(huì)使軟件本身不穩(wěn)定，經(jīng)常掛掉。
Emmet Git，Document原名為：Zencoding, 快速生成html,css
，默認(rèn)擴(kuò)展快捷為tab
，如果tab
按鈕損壞，ctrl+e
替換。 生成規(guī)則在：
Preferences -> Browser packages -> Emment -> emment -> snippets.json
中修改。
@ Emmet 中文版文檔
Side Bar增強(qiáng)的側(cè)邊欄
Docblockr增強(qiáng)js注釋
Alignment等號(hào)對(duì)齊
在Preferences -> package settings -> Alignment -> Settings User
添加冒號(hào)對(duì)齊。
{ "align_indent": false, "alignment_chars": ["=", ":"], "alignment_space_chars": ["=", ":"]}
AutoFileName:文件路徑自動(dòng)提示
gbk支持 GBK Encoding Support
檢測(cè)快捷鍵沖突
Markdown
markdown
markdown 轉(zhuǎn)為 pdf
SublimeText插件列表
html美化插件
Sublime Text 新建文件的模版插件: SublimeTmpl
前端自動(dòng)化神器LiveReload配合瀏覽器和less/sass使用方法
使用 Sublime Text 2 開(kāi)發(fā) Unity3D 項(xiàng)目
全棧開(kāi)發(fā)必備的10款 Sublime Text 插件
其它語(yǔ)言框架支持
JavaScript
nodejs snippets and bindings for Sublime Text 2
AngularJS-sublime-package
avalon completion for sublime 3
Sublime Text highlighting for Vue.js
Sublime Text helpers for React
TypeScript-Sublime-Plugin
CSS
Bootstrap 3 Snippets Plugin for Sublime Text 2/3
Sublime Text代碼片段收藏
PHP
Thinkphp Sublime插件 顯示優(yōu)化，兼容St3版本)
laravelgenerator
Laravel Blade Highlighter
Sublime中的函數(shù)手冊(cè)提示
Nodejs
sublime3 配置node build環(huán)境
CSS值轉(zhuǎn)REM的Sublime Text插件
本地歷史記錄
NO 4: 「 Webstorm 和Phpstorm)」--推薦
特點(diǎn)：典型的IDE 神器，專(zhuān)為前端web程序員打造，語(yǔ)法檢查完善，ide的本色應(yīng)有盡有，顏值也高。
phpstorm是我工作接觸了PHP以后在公司以后才真正開(kāi)始使用, 現(xiàn)在我公司的PHP程序員 都是此ide，超級(jí)好用。
webstorm和phpstorm基本一樣, phpstorm不過(guò)多了支持php的功能.
知道和認(rèn)真使用了webstorm以后, 誰(shuí)要討論誰(shuí)是最好前端編碼IDE（注意只是IDE ）, 我總是毫不猶豫的說(shuō): webstorm.
webstorm部分特點(diǎn)如下:
- 復(fù)制代碼塊結(jié)構(gòu)不亂 (無(wú)論你把代碼片斷復(fù)制到編輯器的哪個(gè)地方, 它都能自動(dòng)縮進(jìn)好)
- 快速選擇并操作大塊代碼 (利用快捷鍵快速選擇和操作配對(duì)代碼)
- 文件歷史記錄及代碼對(duì)比 (phpstorm會(huì)保存很多文件的歷史版本, 當(dāng)你有一天想恢復(fù)以前的代碼, 找出來(lái), revert即可, 而且還能將不同歷史版本, 歷史版本與當(dāng)前版本代碼進(jìn)行對(duì)比, 對(duì)比結(jié)果差異會(huì)很清晰的標(biāo)識(shí)出來(lái))
- 自動(dòng)保存 (不用ctrl+s, 自動(dòng)保存代碼. 個(gè)人認(rèn)為這個(gè)習(xí)慣了ctrl+s的人來(lái)說(shuō), 反而不喜歡這個(gè)功能)
- 基于上下文的自動(dòng)提示 (舉個(gè)栗子: 你如果在上文定義了一個(gè)function, 在下文如果輸入首字母, 就可以提示這個(gè)function名稱(chēng))
主要優(yōu)點(diǎn)：
- JS、PHP 弱類(lèi)型語(yǔ)言語(yǔ)法檢測(cè)牛掰，變量名 函數(shù)名有沒(méi)有定義和被用到 都會(huì)給出提示。
- 可以配置插件，插件也可以在單獨(dú)配置用法。靈活定制沒(méi)問(wèn)題
- 代碼格式化嚴(yán)謹(jǐn) 整潔，基本按照主流w3c標(biāo)準(zhǔn)和通用標(biāo)準(zhǔn)。還可以自己自定義格式化規(guī)則
- 主題多，可以和sublime 媲美了，不過(guò)還是比不上
- 唯一缺點(diǎn)：占用內(nèi)存多，cpu稍微高，低配置不用考慮！
NO 5: 「 Atom 和 VScode)」
特點(diǎn)：近兩年的新貴編輯器，而且也都開(kāi)源部分源碼。
Atom： github出品 必屬精品，顏值高，體驗(yàn)好 聽(tīng)說(shuō)還是angularjs寫(xiě)的。嚴(yán)格來(lái)說(shuō)算IDE 了 功能強(qiáng)大 插件繁多 。
優(yōu)點(diǎn)：
- 直接集成webkit 調(diào)試前端網(wǎng)頁(yè) js 不要太爽
- github 官方介紹：The hackable text editor
atom 的用戶越來(lái)越多，尤其是 web 前端開(kāi)發(fā)者，幾乎能和 sublime 分庭抗禮，而且要知道的是 sublime 是 個(gè)人開(kāi)發(fā)者并且收費(fèi)閉源(蛇神說(shuō)更新慢的一比，bug萬(wàn)年不修)，而 atom 則是整個(gè)社區(qū)驅(qū)動(dòng)，插件一年發(fā)布上千個(gè)(一堆 amazing 的插件)，而且在 web 前端開(kāi)發(fā)方面現(xiàn)在幾乎擁有 sublime 的所有功能（并且更多，關(guān)鍵是還可以 hackable ?。?/li>
缺點(diǎn)：加載插件真的超慢。。插件慢估計(jì)是我們是倒霉蛋大陸有關(guān)。打開(kāi)文件也慢，是設(shè)計(jì)目前還不成熟，不過(guò)勢(shì)頭很猛，值得期待
VScode： 本人沒(méi)怎么用于實(shí)際環(huán)境
（以下收集自 網(wǎng)友總結(jié)）
優(yōu)點(diǎn)：
1，好看，分分鐘逼死notepad++。
2，加載大文件幾乎秒開(kāi)。
3，C#支持高亮，已經(jīng)編譯過(guò)的還支持引用。
4，JS、HTML等支持高亮和補(bǔ)全。
5，全平臺(tái)，我再也不糾結(jié)買(mǎi)RMBP還是XPS了。
6，免費(fèi)，這是必須的好評(píng)7，占用內(nèi)存低，下圖是我打開(kāi)我正在寫(xiě)的開(kāi)源（20M左右代碼）文件夾后的內(nèi)存占用，堪稱(chēng)神奇。
缺點(diǎn)：
對(duì)C#支持還不夠好。不支持工程加載，只支持文件夾加載，引用比較復(fù)雜的大工程支持力度低。
支持git但是對(duì)github沒(méi)提供接口。
debug需要手動(dòng)輸入?yún)?shù)，雖不復(fù)雜，但和VS一貫定位不符。
總結(jié)：刪除了notepad++，并將所有文本文件關(guān)聯(lián)在了code上。
第一版本就這么給力，后續(xù)版本私鑰sublime和atom去死么。
以后別收費(fèi)才好。
對(duì)比這3個(gè)新貴 前端神器-如何選擇
** Sublime **: 快速，穩(wěn)定，性感，全局搜索和索引速度超快，插件功能性好，可定制化一般(不能大幅度魔改界面，功能)，可配置快捷鍵，構(gòu)建參數(shù)，代碼補(bǔ)全基于Snippet，沒(méi)有IDE那種全局帶類(lèi)型推導(dǎo)提示來(lái)的爽
適合用戶：我這種 喜歡 高顏值、自由、不受約束、極簡(jiǎn)主義的騷貨！
** Atom **: 速度一般，更新快，Hackable，任何了解過(guò)Web，會(huì)一點(diǎn)JS的都可以自己寫(xiě)插件，任何Web能實(shí)現(xiàn)的功能，效果都可以實(shí)現(xiàn)，且可配合本地庫(kù)。
對(duì)Web開(kāi)發(fā)者(尤其前端)友好，對(duì)很多語(yǔ)言代碼提示完善，配合插件可以全項(xiàng)目類(lèi)型聯(lián)想代碼補(bǔ)全，終端集成，分屏，調(diào)試器集成，Logger集成，非常簡(jiǎn)單可以打造一個(gè)自己的IDE，缺點(diǎn)就是基于Electron(Chrome)的效率問(wèn)題，資源占用大。
適合用戶：喜歡顏值、對(duì)代碼提示 和超喜歡折騰有要求的人
VSCode : 速度較快，對(duì)超大文件讀寫(xiě)速度飛快(打開(kāi)10M代碼不到1s，Subline原生會(huì)卡近6s)，插件數(shù)量相對(duì)少，有一些增強(qiáng)功能比如調(diào)試器，終端，原生支持語(yǔ)言語(yǔ)法高亮較少(C# JS TypeScript是第一位)，內(nèi)置JS/TS調(diào)試器…可以基于不同項(xiàng)目(文件夾)設(shè)置偏好，寫(xiě)C#和JS/TS專(zhuān)用。
適合用戶：對(duì)項(xiàng)目有依賴(lài)，微軟粉、對(duì)代碼語(yǔ)法檢查要求嚴(yán)謹(jǐn)?shù)娜?/p>
總結(jié):Sublime的潛在用戶是Vim/Emacs黨，超快的啟動(dòng)速度低資源占用，適合編輯任何小文本(包括普通文本，配置文件)，C/C++/ASM和很多腳本語(yǔ)言以及不需要實(shí)時(shí)調(diào)試類(lèi)型的語(yǔ)言，插件多是非常實(shí)在的功能。
缺點(diǎn)是：有證書(shū)購(gòu)買(mǎi)(雖然可以一直無(wú)限制使用)，感覺(jué)沒(méi)有開(kāi)源項(xiàng)目來(lái)的自由Atom目標(biāo)是IDE替代品，可以配合插件打造成高效IDE，而且對(duì)Web平臺(tái)開(kāi)發(fā)者友好，對(duì)前端更友好，Hackable讓任何人都能簡(jiǎn)單貢獻(xiàn)自己的插件，如果能解決速度問(wèn)題和資源問(wèn)題那就基本沒(méi)有什么缺點(diǎn)了VSCode目標(biāo)是對(duì)超大文件和項(xiàng)目管理有要求。
喜歡折騰 才能喜歡前端嘛!
如果讀完本文,有任何疑問(wèn)或者需求,可以給我公眾號(hào) 留言交流,我還可以給你我封裝好的 私貨.比如 sublime text ,后面我專(zhuān)門(mén)會(huì)放出下載地址和介紹必備插件配置。
在最后，特別感謝，賀賀妹子（傻白甜），辛苦整理提供一些資料和配圖，讓我的文章更加生動(dòng)和有趣。我想她一定是被我的顏值折服了吧！
長(zhǎng)按掃碼關(guān)注我 微信公眾號(hào): 前端你別鬧(webunao)
