作者：IT圈版主 明劼

好久沒(méi)碰寫作這種東西了。我做了不少網(wǎng)頁(yè)的前端設(shè)計(jì)，雖然沒(méi)有熟練到能夠和大家談笑風(fēng)生的地步，但是還是能夠和大家分享一些經(jīng)驗(yàn)的。做了這個(gè)技術(shù)宅筆記的系列，每周，每月寫一點(diǎn)小經(jīng)驗(yàn)，分享給大家，不求報(bào)酬，只希望大家能夠喜歡。

簡(jiǎn)單講一下我的開(kāi)發(fā)環(huán)境：我身在墻外，所以做Web開(kāi)發(fā)的阻礙還是比較小的。個(gè)人偏好于筆記本，畢竟可以隨身帶比較方便。聽(tīng)說(shuō)過(guò)Mac的開(kāi)發(fā)體驗(yàn)很好，可惜沒(méi)這個(gè)票子去買Macbook，所以買了一個(gè)非常簡(jiǎn)單的Windows開(kāi)發(fā)本。開(kāi)發(fā)本的特征基本就是高內(nèi)存高續(xù)航鍵盤手感一般就好。不多說(shuō)，我暫時(shí)用的是華碩的X555LAB，能夠湊活。

今天主要想跟大家分享的是文字（代碼）編輯器。

Web開(kāi)發(fā)者用什么編輯器？相信這個(gè)問(wèn)題如果在幾年之前被問(wèn)出來(lái)，一定會(huì)有人毫不猶豫地回答Adobe的Dreamweaver。沒(méi)錯(cuò)，直至現(xiàn)在，我們都不得不說(shuō)Dreamweaver是一個(gè)非常易于上手的編輯器，而且它提供的功能非常有特色。我也是從Dreamweaver開(kāi)始的，不過(guò)一開(kāi)始用的是別人借給我的賬號(hào)。等進(jìn)入正軌之后就沒(méi)有再使用是因?yàn)樗膬r(jià)格——太貴了！$20每月來(lái)買一個(gè)軟件（當(dāng)然學(xué)生是$20買全套Adobe軟件）絲毫不在我們能夠接受的范圍之內(nèi)。功能強(qiáng)，強(qiáng)到讓人望而卻步。

提到Git，大家都會(huì)想到GitHub這個(gè)集新手和大神為一體的網(wǎng)站。沒(méi)錯(cuò)，它本身也附帶了一個(gè)簡(jiǎn)單的在線代碼編輯器，顏色標(biāo)注和代碼排版等功能齊全。顯示的大概效果如下：

效果還是不錯(cuò)的。

而我自己使用最多的還是微軟最新的Visual Studio Code開(kāi)源編輯器。這款編輯器以自己的模塊化作為賣點(diǎn)，各種主題和插件很多，也很實(shí)用。界面如下：

這款編輯器的界面不是很有特色，但是滿滿的都是Visual Studio的影子（這里解釋下為什么我不用Visual Studio——碩大個(gè)安裝包，給我個(gè)Web開(kāi)發(fā)用，使用率不到1%，還不如省點(diǎn)時(shí)間，呱；再說(shuō)，這啟動(dòng)速度，估計(jì)等Visual Studio開(kāi)好了我都可以把整個(gè)Google API庫(kù)緩存一遍。）可它的整體體驗(yàn)非常好，包括界面，效率以及代碼的可讀性都是非常優(yōu)質(zhì)的。這里要著重說(shuō)的也是我用的比較多的功能，就是VS Code自帶的格式化代碼功能。這項(xiàng)功能在HTML里可能不是最有用（把我辛辛苦苦寫在后面的注釋全部換行了，根本看不見(jiàn)），但是CSS和JavaScript的使用效果極佳。有時(shí)候你是復(fù)制粘貼其他地方的代碼，或者是代碼比較亂自己都看不清楚哪個(gè)標(biāo)簽對(duì)應(yīng)哪個(gè)標(biāo)簽的時(shí)候，只需要輕輕右鍵—Format Code（格式化代碼）或者使用快捷鍵Alt+Shift+F就可以讓代碼變得干凈易讀。這點(diǎn)在之后要介紹的Atom編輯器中沒(méi)有自帶，但是仍然有擴(kuò)展程序可以支持。另一個(gè)很有用的功能就是“Change All Occurrences”（改變所有同樣的文字）。

比如說(shuō)，你在寫JavaScript時(shí)突然想重命名一個(gè)變量，或者一個(gè)函數(shù)，怎么辦？這個(gè)名字在你的代碼中被使用了千萬(wàn)次，你總不見(jiàn)得去一個(gè)一個(gè)重命名吧？這時(shí)候只需要選中一個(gè)變量，然后按下Ctrl+F2（或者右鍵找到Change All Occurrences）就可以同時(shí)編輯整個(gè)文檔里的同類數(shù)據(jù)。如下圖：

這個(gè)功能到現(xiàn)在我也沒(méi)有在Atom中找到一樣的功能。

VS Code就告一段落，在講我的新朋友Atom之前，先帶過(guò)兩個(gè)不得不說(shuō)，但我又沒(méi)怎么使用地編輯器：一就是大家都知道的Notepad++。Notepad++是一個(gè)可謂全能的編輯器，各種功能齊全，主要可以用來(lái)代替Windows自帶記事本。但是感覺(jué)插件系統(tǒng)不是很完善，導(dǎo)致部分功能缺失，然后就是UI不是非常好看。（我弄過(guò)不少UI設(shè)計(jì)，所以UI不好看的不能忍?。┲Z，就長(zhǎng)這樣：

第二個(gè)我可以直接帶過(guò)的就是Sublime Text。在這里介紹是因?yàn)槲衣?tīng)說(shuō)這款軟件的速度很快（在我電腦上看好像不是非常明顯），功能性也很全。還有就是畢竟Sublime Text好像非常古老，開(kāi)發(fā)者的第一篇文檔是2007年寫的，也就是XP時(shí)代。更新也不是很活躍，上一次更新在今年2月。界面有些老款OSX的設(shè)計(jì)風(fēng)格，所以在Windows上看起來(lái)比較別扭。我不選擇使用的原因還是因?yàn)槭召M(fèi)，好像直接購(gòu)買要70美金吧……雖然是一次性購(gòu)買但學(xué)生狗表示還是買不起。

最后就是我還是在最近開(kāi)始用的一款我的操作還不是非常熟練的開(kāi)源編輯器，Atom，也是出自GitHub大神爸爸們之手。這軟件我一拿到手就愛(ài)上了它的外觀——在使用了將近半年的VS Code之后我發(fā)現(xiàn)上手Atom非常簡(jiǎn)單（畢竟Sublime，VS Code和Atom的操作習(xí)慣和界面高度相似），因?yàn)樗蚔S Code非常接近，只是聽(tīng)說(shuō)Atom好像是一個(gè)WebApp打包出來(lái)的。Atom最大的問(wèn)題就是不穩(wěn)定，雖然我現(xiàn)在在用Beta版本，但是哪怕我在用穩(wěn)定版，也會(huì)碰到程序突然閃退的問(wèn)題（沒(méi)錯(cuò)，閃退）。雖然好像數(shù)據(jù)不會(huì)掉，但是也是一件麻煩事不是嗎？

除了外觀之外，Atom讓我非常滿意的還有它的Preview HTML功能。這個(gè)功能可以在你編輯HTML代碼的時(shí)候?qū)崟r(shí)預(yù)覽輸出結(jié)果。我再VS Code上找了半天好像都沒(méi)個(gè)方法（當(dāng)然如果你能找到歡迎告訴我），這里的插件Atom-html-preview可以做到這一功能（雖然Javascript和Ajax好像不能完整加載）。這個(gè)程序的Debug功能也是非常的實(shí)用（居然可以調(diào)試HTML我也是非常驚訝?。?，具體各位去嘗試一下也就明白我的意思了。

今天一共介紹了6種不同的編輯器。其中，VS Code，Sublime，Atom，都是全平臺(tái)的（包括Windows，Linux和Mac），Dreamweaver暫無(wú)Linux版本，Notepad++只有Windows。這些大大小小的公司和開(kāi)發(fā)者開(kāi)發(fā)的產(chǎn)品各有各的特點(diǎn)，當(dāng)然以我一個(gè)小型Web開(kāi)發(fā)者的使用習(xí)慣來(lái)看無(wú)法概括所有有意思的功能。具體選擇哪個(gè)，就要看你喜歡什么類型了——是美觀，還是實(shí)用；是效率，還是過(guò)程。無(wú)論你用哪個(gè)代碼編輯器，用哪個(gè)編譯器，我都想說(shuō)，編程，永遠(yuǎn)是一種享受。這種享受，通常是其他人無(wú)法理解的。

享受，創(chuàng)造世界的過(guò)程。