Case2: 使用現(xiàn)代化的代碼編輯器
簡介
工欲善其事，必先利其器。作為一名合格的開發(fā)人員，你應(yīng)該使用一個現(xiàn)代化的代碼編輯器來投入生產(chǎn)。放棄史前時代的記事本吧，這節(jié)課讓我們一起擁抱現(xiàn)代科技。
目標
- 更換并使用一種適合開發(fā)人員的代碼（文本）編輯器
- 學(xué)習(xí)使用插件來擴展編輯器的功能
- 感受代碼聯(lián)想和快速補全的快感
任務(wù)
- 使用emmet擴展快速書寫html代碼
預(yù)期時間
- 0.5 - 1天
了解代碼編輯器
所謂代碼編輯器，本質(zhì)上和記事本一樣都是用來書寫文本的（基本上所有的代碼都是文本），不過現(xiàn)在的代碼編輯器都集成了許多方便開發(fā)的功能，比如：
- 支持多種編程語言的語法高亮提示
- 支持多種編碼方式
- 支持插件來加快開發(fā)速度，擴展功能
- 集成代碼管理（git）以及開發(fā)調(diào)試功能
在編程界曾經(jīng)出現(xiàn)過下面四個主要的，里程碑式的開發(fā)工具，也形成了以各自為中心的開發(fā)人員集群，讓我們稍微了解一下這些工具：
Vim
Vim可以說是代碼編輯器領(lǐng)域的泰斗級別的存在了，有著悠久的歷史，極為強大的快捷鍵和命令操作，據(jù)說學(xué)會使用vim的程序員可以提升數(shù)倍的開發(fā)速度...
不過學(xué)會使用Vim并不是一件容易的事情，各種命令和組合鍵一開始會讓你頭疼不已。但迄今為止Vim在非圖形化界面下依然是編輯代碼的不二之選。
Emacs
Emacs是Vim的強力競爭者，曾經(jīng)一度替代Vim成為諸多l(xiāng)inux系統(tǒng)的默認編輯器，Emacs擁有近乎無敵的擴展性，甚至被成為“偽裝成編輯器的操作系統(tǒng)”。
Emacs和Vim兩者一個被稱為“神一樣的代碼編輯器”，另一個被稱為“代碼編輯器之神”，為此兩派的擁護者還曾經(jīng)發(fā)起過諸多斗爭...可見這兩個編輯器在極客史上的地位之高。
不過和Vim一樣，Emacs的學(xué)習(xí)曲線一樣十分陡峭，因此決定使用它需要一定的勇氣哦。
Notepad++
相比上面兩位元老級別的編輯器，Notepad++就是相對比較年輕的存在了，這款編輯器主要應(yīng)用于Windows操作系統(tǒng)，很長的一段時間里，許多人程序員用它代替windows內(nèi)置的記事本。
它是較早的幾個專門針對GUI圖形界面開發(fā)的編輯器（同一時代出現(xiàn)了一系列優(yōu)秀的GUI編輯器，比如UltraEdit等），代碼高亮和一定程度的自動補全算是當年的一大亮點了。
Notepad++小巧簡潔，擁有多種語法高亮支持，可惜的是它的擴展性不好，所以現(xiàn)在基本已經(jīng)湮滅在歷史的長河中了...
SublimeText 2/3
這款編輯器可以說是劃時代的產(chǎn)品了，絕對現(xiàn)代化的功能：代碼高亮，自動補全，聯(lián)想，集成調(diào)試，海量的插件庫...都成就了SublimeText在現(xiàn)代化編輯器中奠基者的地位。
至今它仍然是相當一部分開發(fā)人員的主力工具，加上合適擴展和配置的SublimeText可以用于進行任何一種語言的開發(fā)。
主要有2和3兩個版本，部分插件在SublimeText3中存在兼容性問題，因此SublimeText2依然擁有相當大的用戶基數(shù)。
我們的選擇
上面講了代碼編輯器界的四大金剛，那么我們的課程中到底要選擇哪一個呢？
答案是哪個也不用！
雖然這些編輯器都十分強大，但是對于新手而言實在太不友好，而且他們都相對比較古老了，在2017年的今天，我們擁有更好的選擇，更好的方式來編寫代碼。下面祭出我認為當今最好用的兩大代碼編輯器！
1. Atom
這款編輯器由github開發(fā)，擁有龐大的主題和插件庫，而且集成了絕大多數(shù)常用的開發(fā)功能，可以說一步到位。
當年我是被一個插件吸引才開始使用atom的，這個插件可以讓你寫代碼的時候擁有炫酷的特效，是下面這樣的...
是不是看起來狂拽酷炫屌炸天，帶著這樣的特效寫代碼仿佛自己都要去拯救世界了
下面是atom的官網(wǎng)和下載地址：
2.VisualStudioCode
簡稱VSCODE，由微軟開發(fā)，在windows上用過VisualStudio開發(fā)的人一定都會記住這個龐大的IDE的功能有多強大。
不過身為一個IDE，VisualStudio的體積太過強大了，而且只能在windows環(huán)境中使用，使得許多人望而卻步，于是微軟爸爸良心發(fā)現(xiàn)，推出了VSCODE（這也是這么多年來微軟出的第一款跨平臺產(chǎn)品...）
VSCODE也擁有諸多插件庫，雖然不像Atom那樣擁有龐大的主題資源庫但是它簡潔優(yōu)雅的配色方案和布局也非常不錯，而且相比Atom，VSCODE的一大優(yōu)勢是原生支持中文，英文不好的同學(xué)可以考慮一下它。
下面是VSCODE的官網(wǎng)和下載地址
理由
選擇這兩大編輯器作為主力開發(fā)工具的原因主要有以下幾點：
- 安裝使用方便，原生就內(nèi)置了許多方便的功能，無需配置，開箱即用
- 擁有龐大的開發(fā)者社區(qū)，這就意味著每天每時每刻都有新的擴展源源不斷的產(chǎn)生...
- 跨平臺，Linux，Windows，OSX都可以使用
開始上手
安裝
訪問上面的官網(wǎng)并安裝他們。
界面介紹
現(xiàn)在讓我們介紹兩個編輯器的主界面：
你可以選擇打開一個目錄來查看目錄的文件結(jié)構(gòu)（文件樹）
1.VSCODE
2.Atom
整體看上去都差不多，注意下面的編碼和語言選擇，大多時候是很有用的。
配置
任何工具和使用者之間都會存在磨合的過程，因此你很有可能不滿足編輯器所提供的默認配置（尤其是字體大小和樣式），所以你需要對他們進行配置。
VSCODE
VSCODE的配置全部使用JSON來設(shè)定，JSON是一種簡單的交互形式，你可以簡單的理解它是一種 鍵:值對的形式。
現(xiàn)在我們嘗試修改VSCODE的默認字體大小和樣式
從菜單欄：Code -> 首選項 -> 設(shè)置 打開配置界面，或者使用
Ctrl + ,快捷鍵（Mac下把Ctrl替換為Command，以后如果不說明默認都是此規(guī)則）你會看到下面這個界面
- 左邊一欄為配置內(nèi)容，格式是
"配置名稱":"配置值" - 你不能在左側(cè)直接修改配置的值，需要將它復(fù)制到右側(cè)的編輯區(qū)中（用戶設(shè)置或工作區(qū)設(shè)置），然后修改使其覆蓋原配置值。
- 點擊編輯按鈕，選擇“復(fù)制到設(shè)置”，就會在右側(cè)看到生成的配置項了，然后編輯它，按下
Ctrl+S保存就可以生效了。
Atom
相比VSCODE，Atom的配置要人性化一些
-
從菜單欄：Atom -> Preferences... 或者
Ctrl + ,進入配置中心
直接修改對應(yīng)的配置值即可
更多...
每個編輯器都擁有眾多的配置項，當你需要的時候就去修改它們，讓編輯器變得更順手吧
安裝擴展和插件
插件和擴展是編輯器的生命力所在，Atom和VSCODE都提供了強大的擴展中心，使用也十分方便
VSCODE
切換到擴展選項卡就可以安裝和管理擴展了，在搜索框中搜索你想要的擴展名稱，選擇一個合適的點擊一下就可以安裝了，之后只要重啟編輯器就能使其生效了
Atom
在上面所說的配置中心(Ctrl + ,)中，選擇packges選項可以管理已經(jīng)安裝的擴展：
選擇Install選項可以搜索并安裝新的插件
Tips
一般來說當你開始著手開發(fā)一個項目之前，你應(yīng)該先安裝好合適的擴展
- 語言支持：主要包括錯誤檢測，自動補全等
- 調(diào)試工具
- 其他快捷輔助工具
如果你不知道要安裝那些插件，那就使用百度吧，會有很有多的解決方案。
比如我想用VSCODE進行g(shù)o語言的開發(fā)，那么只需要搜索：“使用VSCODE搭建go語言開發(fā)環(huán)境”就能找到相應(yīng)的解決方案了。
實踐：使用代碼補全編寫html
說了這么多，不實際上手操作一下是無法體會到代碼編輯器的實際作用的?，F(xiàn)在我們使用VSCODE和Atom都內(nèi)置了的emmet插件來快速編寫一下html
(emmet是一款用于前端開發(fā)的，快速編寫html的插件，最早產(chǎn)生于
SublimeText，因為使用極其方便，現(xiàn)在所有的前端工具都集成了這個功能)
你現(xiàn)在需要創(chuàng)建一個html文件，然后使用編輯器打開它。請注意文件后綴的正確性，否則編輯器如果沒有識別出是html文件的話將不會打開emmet擴展。
一鍵生成骨架
還記得上節(jié)課講到的所有html所共有的骨架嗎？每次都復(fù)制粘貼顯然太麻煩了，現(xiàn)在你只需要一個按鍵就能生成它：
- 在編輯器中輸入
html:5 - 按下TAB
然后你就會已經(jīng)自動生成了整個html的骨架了！只需要一秒鐘！
對于這個語法做一點簡單的講解，html表示生成的是html文件骨架，冒號后面的數(shù)字表示了html的版本，主要有4，4s和5幾個版本，由于現(xiàn)在html已經(jīng)普及了，所以基本都是使用html:5了
生成標簽
絕大多數(shù)的標簽也可以一鍵生成，在body中輸入h1然后按下tab，就會自動生成<h1></h1>的代碼塊，然后直接編寫其中的內(nèi)容即可，p標簽，a標簽等等都是一樣的操作。
你還可以快速生成標簽中的內(nèi)容和附加屬性，看下面的兩個例子
h1{foo}
a[href=#]
按下tab會分別填充內(nèi)容和屬性，生成下面兩行代碼
<h1>foo</h1>
<a href="#"></a>
(注意要把光標移動到行末再按下tab)
快速生成多個標簽
輸入h1*3并按下tab試試，你會得到3個h1標簽，這種快速生成在需要生成多個屬性相同的標簽時異常有用，先用上面的語法寫好標簽的格式，然后寫乘號*加上要重復(fù)的次數(shù)就可以得到多個相同的標簽了。
生成嵌套標簽
如果你要生成多個嵌套的元素，可以使用>表明標簽間的嵌套關(guān)系：
輸入div>p按下tab，就會生成以下的嵌套結(jié)構(gòu)：
<div>
<p></p>
</div>
其他
emmet的常用語法介紹的差不多了，不過它的功能遠不止于此，感興趣的話就通過搜索引擎來查看它的手冊來看看到底都能怎么用吧。
此外，編輯器的自動補全和提示功能也會極大的方便你的代碼書寫，親自上手體驗就會明白了
快捷鍵
使用快捷鍵是加快開發(fā)速度的一個重要技巧，基本的復(fù)制粘貼撤銷重做自然不必多說，代碼編輯器內(nèi)置了更多更為強大的快捷鍵和組合操作（比如一鍵重命名變量，移動代碼塊,格式化代碼等，尤其是格式化代碼這個真的特別好用）。
下面是VSCODE和ATOM的常用快捷鍵列表，你可以根據(jù)需要在設(shè)置中修改它們，當然你不會記住和用到所有的快捷鍵，因此大概瀏覽并嘗試一下，需要的時候再查看就可以了。
小結(jié)
本節(jié)介紹了兩個常用的代碼編輯器，相信隨著開發(fā)能力的增長和深入，編輯器的強大之處將會一點一點地體現(xiàn)出來。
后續(xù)的課程中我們將會逐步解鎖代碼編輯器的各種擴展和功能，使它成為你得心應(yīng)手的工具。
任務(wù)與實踐
- 嘗試在編輯器中安裝一些插件，并且使用它來書寫html文檔吧
- 嘗試使用代碼格式化快捷鍵格式化你所寫的html代碼
