1.3 工欲善其事，必先利其器

“工欲善其事，必先利其器”，雖然這句話(huà)是2000多年前孔子說(shuō)的，但放到今天依然十分受用。不僅是前端開(kāi)發(fā)，做任何事情有了合適的工具，便可事半功倍，令人“有著絲滑般的享受”。

這里給大家介紹一些常用的開(kāi)發(fā)工具，這些開(kāi)發(fā)工具并不是下載安裝后就非常好用，重點(diǎn)在于它們的可擴(kuò)展性，擴(kuò)展讓這些工具有著更多的可能。

1.3.1 開(kāi)發(fā)者的眼——Chrome

先從最基礎(chǔ)的瀏覽器開(kāi)始介紹，基本上每個(gè)前端開(kāi)發(fā)人員都會(huì)使用Chrome。但是有多少開(kāi)發(fā)人員能用好Chrome呢？下面先介紹一些常用的插件。

1. Vue.js devtools

開(kāi)發(fā)Vue.js時(shí)，這個(gè)插件是必不可少的，可以方便地用它查看當(dāng)前路由和組件內(nèi)容，及時(shí)地反饋?zhàn)兞績(jī)?nèi)容的變化。

2. AdBlock

AdBlock是用來(lái)屏蔽廣告的，功能十分強(qiáng)大，一般廣告都會(huì)被屏蔽掉，給用戶(hù)一個(gè)“干凈”的網(wǎng)頁(yè)。但是要注意，有些網(wǎng)站可能不支持AdBlock，打開(kāi)AdBlock之后，網(wǎng)頁(yè)的樣式和架構(gòu)可能會(huì)亂掉，這時(shí)可以選擇把這個(gè)網(wǎng)頁(yè)網(wǎng)址加入AdBlock的白名單里，這樣AdBlock就不會(huì)對(duì)此網(wǎng)站進(jìn)行過(guò)濾，簡(jiǎn)單方便。

3. JSONView

Chrome上其實(shí)有很多查看JSON數(shù)據(jù)的插件，但是經(jīng)過(guò)測(cè)試，此款插件的展示效果非常好，除了放大、縮小、折疊之外，沒(méi)有其他多余功能，簡(jiǎn)單易用。

4. Momentum

這個(gè)插件與開(kāi)發(fā)沒(méi)有多大關(guān)系，它用來(lái)替換初始頁(yè)的背景圖片，并且提供了一個(gè)TodoList，每次新開(kāi)一個(gè)頁(yè)面的時(shí)候，都會(huì)隨機(jī)出現(xiàn)一張令人賞心悅目的風(fēng)景圖，同時(shí)TodoList還會(huì)提醒你接下來(lái)要做什么，在開(kāi)發(fā)之余，還能放松心情。

5. minerBlock

此插件的作用是防止電腦被人惡意當(dāng)作礦機(jī)使用。現(xiàn)在開(kāi)源的東西比較多，可能就會(huì)有人利用這一點(diǎn)，曾經(jīng)有人開(kāi)源了一款JS插件，在插件中藏有惡意挖礦的代碼，若是使用了這樣的插件，每次運(yùn)行的時(shí)候，都是在幫制作者挖礦。所以找到了minerBlock，用來(lái)防止類(lèi)似事件的發(fā)生，有需要的讀者可以安裝一下。

介紹完插件，下面來(lái)了解一些常用的斷點(diǎn)功能。斷點(diǎn)功能可以說(shuō)是代碼調(diào)試中最常用的功能，有經(jīng)驗(yàn)的讀者可以直接跳過(guò)這部分內(nèi)容。

斷點(diǎn)調(diào)試：斷點(diǎn)可以讓程序運(yùn)行到某一行的時(shí)候，將程序的整個(gè)運(yùn)行狀態(tài)進(jìn)行凍結(jié)。你可以清晰地看到這一行所有的作用域變量、函數(shù)參數(shù)、函數(shù)調(diào)用堆棧。總而言之，就是比console.log強(qiáng)了不止一個(gè)檔次，運(yùn)行速度也快很多。一般情況下，調(diào)試網(wǎng)頁(yè)的時(shí)候，都會(huì)打開(kāi)Chrome控制臺(tái)，在控制臺(tái)界面有Source欄，如圖1.10所示。

在開(kāi)發(fā)環(huán)境下可以看到當(dāng)前項(xiàng)目的所有文件，之后找到需要的文件，在需要暫停的行上單擊行號(hào)，頁(yè)面如圖1.11所示。

頁(yè)面一片灰色，同時(shí)出現(xiàn)兩個(gè)按鈕：第一個(gè)按鈕用于逐過(guò)程執(zhí)行，可以理解為直接跳到下一斷點(diǎn)處，如果沒(méi)有斷點(diǎn)，會(huì)直接執(zhí)行完。第二個(gè)按鈕用于逐語(yǔ)句執(zhí)行，單擊它之后，程序會(huì)到下一條語(yǔ)句處暫停，不管這條語(yǔ)句有沒(méi)有斷點(diǎn)。在控制臺(tái)中可以輸出當(dāng)前狀態(tài)下所有變量，如函數(shù)參數(shù)等關(guān)鍵信息，這樣一來(lái)，整個(gè)項(xiàng)目的運(yùn)行過(guò)程更加清晰明了，尋找漏洞（Bug）也就更方便了。Chrome的斷點(diǎn)功能還有更高級(jí)的用法，例如條件斷點(diǎn)，在此不再贅述。

1.3.2 開(kāi)發(fā)者的手——VS Code

VS Code是一款編輯器，全稱(chēng)Visual Sutdio Code，它是由微軟開(kāi)發(fā)的，與Visual Sutdio無(wú)關(guān)。編輯器一直是程序員們爭(zhēng)論不休的焦點(diǎn)，我使用過(guò)很多編輯器，覺(jué)得VS Code最順手。

VS Code一直在走一條比較中庸的路線(xiàn)，從大小上來(lái)說(shuō)，它沒(méi)有Sublime那么小，但相比Atom和Webstorm來(lái)說(shuō)卻小了很多，Windows系統(tǒng)安裝包大概40MB，完全可以接受。而且它運(yùn)行流暢，在復(fù)雜項(xiàng)目上，打開(kāi)時(shí)間比Sublime快很多。

雖然2015年才發(fā)布VS Code，但是其插件種類(lèi)十分豐富，目前已經(jīng)有8000多個(gè)，完全可以滿(mǎn)日常使用需求。下面介紹一些日常使用的插件。

1. Chinese （Simplified） Language Pack for Visual Studio Code

這是VS Code的漢化包，之前的VS Code可以在設(shè)置中修改語(yǔ)言類(lèi)型，在某一版本后取消了多語(yǔ)言的支持，改為使用插件來(lái)漢化編輯器。VS Code漢化包就是官方開(kāi)發(fā)的中文語(yǔ)言包。

2. vscode-icons

幾乎每個(gè)用戶(hù)都會(huì)裝一個(gè)這種圖表式的插件，這是為了更方便地看見(jiàn)文件的類(lèi)型，同時(shí)對(duì)文件進(jìn)行區(qū)分。這款插件是VS Code官方推薦的，圖標(biāo)種類(lèi)無(wú)比豐富，幾乎涵蓋了所有類(lèi)型的文件。

3. ESLint

一般前端都會(huì)使用ESLint來(lái)對(duì)代碼格式進(jìn)行規(guī)范，這可以解決很多不必要的Bug，在項(xiàng)目中也可以使用，但是只有在項(xiàng)目運(yùn)行時(shí)的Terminal才能看見(jiàn)，這樣相對(duì)比較麻煩，不利于修改。在VS Code中可以直接安裝ESLint插件，在編寫(xiě)代碼的時(shí)候，就可以看見(jiàn)自己的語(yǔ)法有哪些錯(cuò)誤，利于修改。

4. Vetur

Vetur是針對(duì)Vue.js的語(yǔ)法高亮、提示和補(bǔ)全的插件，同時(shí)還可以在VS Code內(nèi)部進(jìn)行Debugg，或者進(jìn)行相應(yīng)的代碼格式化，是Vue.js開(kāi)發(fā)者必備插件之一。

5. Beautify

Beautify屬于代碼格式規(guī)范插件，可以針對(duì)HTML、CSS、Sass、JS進(jìn)行代碼格式整理，雖然Vetur也有代碼規(guī)范功能，但僅限于Vue.js文件，對(duì)于一般的文件，Beautify使用起來(lái)更加方便。

6. Markdown Preview Enhanced

它可以增強(qiáng)對(duì)Markdown格式文件的預(yù)覽，比原生的預(yù)覽好看了很多。

7. One Dark Pro

這是一個(gè)暗黑系的Atom主題，雖然不是五花八門(mén)的黑，但也不是簡(jiǎn)簡(jiǎn)單單的純黑，看上去比較舒服。

8. Solarized-light Theme

暖黃色的主題，對(duì)護(hù)眼比較看重的讀者可以看看。

需要注意：在這里沒(méi)有安裝任何語(yǔ)法提示的插件，因?yàn)閂S Code原生已經(jīng)支持了HTML、CSS和JS的語(yǔ)法提示，十分全面。

1.3.3 開(kāi)發(fā)者的心——Terminal

Terminal其實(shí)就是命令行工具，用來(lái)啟動(dòng)和查看系統(tǒng)的運(yùn)行狀態(tài)。macOS系統(tǒng)使用起來(lái)比較方便，Windows系統(tǒng)就有些問(wèn)題，自帶的CMD不是很好用，PowerShell也是勉勉強(qiáng)強(qiáng)，下面介紹根據(jù)不同的系統(tǒng)使用的不同Terminal軟件。

1. macOS

雖然自帶的已經(jīng)可以滿(mǎn)足部分需求，但是人總是得朝著更高的目標(biāo)追求。iTerm可是說(shuō)是macOS上最好用的Terminal軟件之一，目前版本是2，也就是iTerm2。下載也很方便，登錄官網(wǎng)，單擊下載即可。

下載之后進(jìn)行安裝即可使用，完全可以替代原生的Terminal，而且在分屏分頁(yè)展示上更加方便。這里再推薦兩個(gè)命令行工具的插件，可以讓命令行工具用起來(lái)更方便。

Oh My Zs界面很好看，共有142個(gè)皮膚可以選擇。而且提供了超強(qiáng)的補(bǔ)全功能，使用Tab鍵可以展示出所有的可選項(xiàng)，同時(shí)可以用方向鍵切換，按Enter鍵進(jìn)入，方便快捷。不僅可以補(bǔ)全目錄，還可以補(bǔ)全git分支以及之前輸入的命令，基本上可以補(bǔ)全任何東西。還有一個(gè)非常好的功能就是系統(tǒng)記錄所有的操作日志，并存放在zsh_history文件夾下，每次記錄還會(huì)同步記錄時(shí)間，這點(diǎn)配合補(bǔ)全操作記錄，效果簡(jiǎn)直無(wú)懈可擊。只要你想，就可以一直用上方向鍵找到你以前輸入的命令。

Tmux用于分屏，雖然iTerm2有分屏功能，但是軟件的分屏起始位置總是在當(dāng)前用戶(hù)的文件夾。如果用Tmux，分屏之后依然會(huì)保存分屏之前的狀態(tài)。這個(gè)狀態(tài)不僅指位置，而且指當(dāng)前窗口的軟件狀態(tài)。例如當(dāng)前窗口的Node.js版本是4.5，而系統(tǒng)默認(rèn)的是8.9。如果使用iTerm2打開(kāi)新窗口，Node.js版本會(huì)是8.9。如果使用Tmux分屏，則會(huì)保留Node.js的狀態(tài)，依然是4.5，這一特性在很多情況下都是很有用的。還有一些常用的快捷鍵，可以讓用戶(hù)的使用更加方便，例如當(dāng)前窗口太小了，但是內(nèi)容很多，想要全屏展示，若是用iTerm2，就要單獨(dú)把這個(gè)窗口挪出去，才能實(shí)現(xiàn)全屏顯示效果，但是Tmux中的快捷鍵可以直接將當(dāng)前窗口全屏，并且不影響其他窗口。全屏查看完之后，可以使用快捷鍵將當(dāng)前窗口變回原來(lái)的大小，所有窗口均不受影響。

如果你的電腦是macOS系統(tǒng)，那么上述工具和插件可以讓你的Terminal實(shí)現(xiàn)質(zhì)的飛越，美觀性和實(shí)用性都會(huì)得到很大提高，帶來(lái)“飛一般”的感覺(jué)。

2. Windows

如果說(shuō)macOS系統(tǒng)里原生的Terminal勉強(qiáng)可以使用，那么Windows就變得無(wú)從入手了，尤其是CMD。所幸cmder讓我脫離了苦海。

雖然這款軟件的名字含有“cmd”，但是其內(nèi)容和使用方式已經(jīng)無(wú)限接近Linux環(huán)境了，很多Windows系統(tǒng)不支持的命令在這里面都是支持的，對(duì)文件的操作更加得心應(yīng)手，還可以執(zhí)行分屏等操作。因?yàn)橄到y(tǒng)本身原因，Windows系統(tǒng)不支持命令行工具插件，所以無(wú)法使用oh My Zsh和Tmux，而其沒(méi)有替代品，除非安裝一個(gè)虛擬機(jī)，例如Docker之類(lèi)的，之后把代碼放到Docker里執(zhí)行，但這樣的操作比較復(fù)雜。VS Code上還有SFTP工具可以同步代碼到Docker里，配合起來(lái)還是挺好的。

關(guān)于Terminal的內(nèi)容就介紹到這里，這些工具已經(jīng)能夠滿(mǎn)足大部分前端開(kāi)發(fā)人員的使用需要，開(kāi)始使用時(shí)，因?yàn)楸容^陌生，可能記不住快捷鍵，但是熟練掌握之后，可以在很大程度上提升工作效率。