早知道就好了！這些編程起步神工具，你值得擁有

文：Mario Hoyos

譯：耷拉

在技術海洋里，人家現在會推薦給你成千上萬的工具，你根本不知道從哪裡開始。

對相對來初起步者來說，很難從鋪天蓋地的信息中做出有效篩選。到頭來我發現自己裝了很多根本沒用的擴展，這幫東西在開發周期中反而礙手礙腳。

我雖然不是專家，但隨著時間的推移，我也編出了一份「超有用」工具清單。如果你剛剛開始學習如何編程，這個清單有望給你一些引導。如果你是一個經驗豐富的開發人員，說不定還能從中學到些新東西。

這篇文章分成Chrome擴展和VS代碼擴展兩類。儘管還有其他瀏覽器和其他文本編輯器，但我敢打賭，大多數工具都可以用於你選擇的平台，所以我們先不在個人偏好上開展辯論了。

盡情蹦躂吧。

VS Code 擴展

我心愛的編輯器是Visual Studio Code。人人都有自己最愛的編輯器，我也不例外。不過我打賭以下大多數擴展，適用於你用的任何一款編輯器。來看我最愛的擴展們：

Auto Rename Tag:自動重命名成對的HTML tag。你創建了一個

標籤，後來又想改掉它，當然還要改它結尾處那個

。有了這個工具，你只需改其中一個，另一個就會自動更新。理論上，你的工作效率提高了2倍。

HTML CSS Support?：HTML文檔的CSS支持。它能讓你看到更整潔的語法高亮和代碼建議，這樣你每天被CSS虐到想告別編程的程度會下降到每天就那麼一二三五次。

HTML Snippets?：常用代碼片段，另一個節省時間小妙招。把這個跟Emmet 配對，你幾乎就不用再輸入任何真正的HTML了。

Babel ES6/ES7：給JavaScript 的添加Babel語法著色。如果你在用Babel，這個可以讓你更輕鬆地區分出你的代碼正在搞什麼。如果你喜歡玩兒JavaScript的那些先進特性，這個足足夠用了。

Bracket Pair Colorizer：給括弧加顏色，讓代碼塊更可視化。對付超常見bug的利器：因為你括弧或圓括弧關錯了。

ESLint?：將ESLint集成進VS代碼。它的方便之處在於，在你寫代碼的時候獲得bug提示，基於你的配置，它還能幫你強化好的編程風格。

Guides：為代碼添加額外的指導行。這是提醒你正確關閉括弧的另一個視覺提示。如果你吃不準，反正我是個很依賴可視化的人。

JavaScript Console Utils?：用於簡化控制台日誌。大多數開發人員都會發現自己在調試流程中登進控制台（我知道我們應該用調試器），這個實用工具能更輕鬆地創建有用的 console.log ()語句。

Code Spell Checker?：駝峰式拼寫的拼寫檢查程序。Bug的另一大來源：手太圓按岔鍵，拼錯變數或函數名。這個拼寫檢查器會自動查找「不正常」的單詞，並且能很好解釋我們用JavaScript編寫東西的方式。

Git Lens?：能看清是誰在什麼時候做了修改。十分便於找到應指責的合適對象，反正絕不可能是你的問題。

Path Intellisense?：文件路徑自動完成。從其他文件導東西進來超便捷。它使你的文件樹導航變得輕而易舉。

Prettier：自動代碼格式化程序。忘記那些手工縮進代碼來幫人類看懂的日子吧。Prettier會幫你做這個，比你自己更快更好。不能更推薦。

VSCode-Icons?：將圖標添加到文件樹中。如果你看著自己的文件結構感覺要瞎，這個工具會有幫助。對於你正在製作的任何文件它都有圖標，使你識別眼前的東西變得容易很多。

Chrome 擴展

作為一個自稱的web開發人員，某種意義上我就住在Chrome控制台裡頭。下面是一些工具，可以讓在上面少花一點時間（以下拓展在Google搜索即可裝載使用）:

WhatFont：名字就說明了一切。它可以輕鬆查出你心愛網站用的字體，然後借來用在自己的項目上。

Pesticide：需要看清你的

框架和修改CSS的時候很有用。我自己在學習盒模型時候這個東西超救命。

Colorzilla：用於從網站上複製精確的顏色。它會把顏色直接複製到你的剪貼板，再也不用找RGBA找到天荒地老了。

CSS Peeper：用於查看網站上使用的顏色和斷言。剛開始的時候，直接克隆自己喜歡的網站會是個不錯的練習。這個工具可以讓你「偷看」他們的配色方案，並允許你查看他們頁面上存在的其他斷言。

Wappalyzer?：用來查看一個網站使用的技術時非常給力。想知道一個網站用的是什麼框架，或者託管服務？再也不用到處找了。

React Dev Tools?：用來debug你的React應用。必須強調一點：只能用於React應用的編程。

Redux Dev Tools?：用來debug使用Redux的應用。再必須強調一點：只有在執行應用里的Redux時才有用。

JSON Formatter：在瀏覽器中讓JSON看起來更乾淨。你有沒有瞪著一坨噁心的JSON三個鐘頭想搞清楚自己要的信息被嵌套多深？現在這個工具能把你的時間節省到兩小時。

Vimeo Repeat and Speed?：用於加速Vimeo視頻。如果你像大多數web開發人員一樣觀看視頻教程，你就知道1.25倍速播放有多爽。這個工具還有YouTube適用版本。

可能你已經擁有一組對自己的開發周期不可或缺的工具。希望上面提到的工具中能有一些可以幫你提高工作效率。不過別掉坑：在把現有工具學會之前，別急著看到什麼都裝，不然你會發現時間都沉沒在這些事情上面了。

如果你有更好的工具，請留言區和大家分享，以便大家互相學習。

— 完 —

往期文章推薦

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！