編者按：Mario Hoyos在 Medium 上寫瞭文章Tools I wish I had known about when I started coding，給新入行的開發工程師提供瞭幾款好用的工具。
科技行業裡，可供人們使用的工具成百上千，你要怎麼知道用哪一種上手最合適呢？
拿最近剛進入編程這行的人來說吧，大量的工具信息堆砌過來其實毫無益處，反而會無從下手。我發現在自己的開發過程中，很多安裝的擴展工具不僅沒有真正起到助益作用，反而常常妨礙瞭正常的開發工作。
我不是專傢，不過隨著時間的推移，我還是編制瞭一份工具清單，這些工具已經證明對我非常有用。如果你剛剛開始學習怎麼編程的話，這個清單能給你提供一些指導。如果你是個經驗豐富的開發人員，也希望你能從中學到一些新的東西。
我將把這篇文章分為 Chrome 擴展程序和 VS 代碼擴展擴展程序兩部分。我知道還有其他的瀏覽器和文本編輯器，但是我想你當然隻能在你能找到的工具裡選擇，所以還是別因為個人喜好而引起一場宗教般的爭論。
請隨便選。
Chrome 擴展程序
現在設我是一位 web 開發人員，以 Chrome 為陣地。下面是一些能讓我少花點時間的工具：
WhatFont —— 名字就說明瞭一切。這是找出你最喜歡網站使用的字體的簡單方法，這樣你就可以為己所用瞭。
Pesticide—— 修改 CSS 的絕佳程序。當我試著學習匣子模型的時候，它簡直就是救命稻草般的存在。
Colorzilla ——用於復制確切顏色的一個網站，用它可以將顏色直接復制到剪貼板上，這樣你就沒必要花太多時間獲得正確的 RGBA 組合瞭。
CSS Peeper——查看網站使用的顏色時非常方便。在你一開始山寨你認為酷的網站的時候很管用。這個程序能讓你查看它們的幕後的色彩方案。
Wappalyzer ——想要獲悉你在網站上看到的是什麼技術，這個程序很有用。想知道某網站使用什麼樣的框架或者它承載瞭什麼服務？這個照樣管用。
React Dev Tools——一款用於調試應用程序的工具。有一點要提一下，它隻有在你編寫 React 程序時才有用。
Redux Dev Tools——一款用於調試應用程序的工具。有一點要提一下，它隻有在你編寫 Redux 程序時才有用。
JSON Formatter ——讓 JSON 在瀏覽器中看起來更一目瞭然的不二之選。也許麻煩的 JSON 讓你苦不堪言，不過隻要用瞭這個軟件，找到你要找的東西，所花費的時間會大幅縮短。
Vimeo Repeat and Speed ——加速 Vimeo 視頻的絕佳工具。如果你像大多數的 web 開發人員一樣觀看視頻教程，你就會知道用 1.25 倍的常規回放速度觀看它們是多麼的方便。本程序同時也有適用於 YouTube 的版本。
VS Code 擴展程序
Visual Studio Code 是我寫代碼時的不二之選。
每個人都有他自己喜歡的文本編輯器，我也不例外。不過，我還是想把這些擴展程序介紹給你，而它們對你所使用的大多數編輯器都適用。看看我最喜歡的擴展程序有哪些：
Auto Rename Tag ——自動重命名成對的 HTML 標記。假如你創建瞭一個
標記。現在你想更改它。有瞭這個軟件，你隻需要更改一個就行，另一個會自動修改。從理論上來說，使用這個軟件可以把你的工作效率提升一倍。
HTML CSS Support —— HTML 文檔的 CSS 支持工具。該工具在獲得一些簡潔的語法高亮顯示和代碼建議方面非常有用。
HTML Snippets ——這一工具在代碼分段方面非常有用，可以為你節省大量的時間。它能跟 Emmet 配對，這樣一來你甚至都不用再真正鍵入 HTML 瞭。
Babel ES6/ES7 —— JavaScript Babel 的輔助工具。如果你用的是 Babel，這個工具可以讓你更容易區分代碼。如果你喜歡 JavaScript，那務必也不要錯過這款軟件。
Bracket Pair Colorizer ——色彩可視化工具。如果你沒有準確地括號，那這個工具對於發現因此導致的許多常見漏洞十分方便。
ESLint ——你在編寫代碼的時候，利用這個軟件可以輕易獲取有關漏洞的提示，而且在編碼過程中，它還可以幫助你養成良好的編碼習慣。
Guides ——這一工具可以被用來添加額外的指導行代碼。這是另一個視覺提示，以確保你正確地括號瞭。
JavaScript Console Utils ——使控制臺日志記錄變得更為簡單可行。如果你像大多數開發人員一樣，你會發現自己需要在調試流中登錄到控制臺（我知道我們應該使用調試器）。這個實用的程序使得創建有用的 console.log ( ) 語句變得易如反掌。
Code Spell Checker ——這一工具正如其名，是拼寫檢查程序。漏洞的的另一個常見來源是變量或函數名。這一拼寫檢查工具可以查找不常見的單詞，而且還可以把我們用 JavaScript 編寫的東西進行有效的審核。
Git Lens ——可以讓我們對某文件何時、以及由何人進行更改變得一目瞭然。當代碼被破壞時，我們就能找到該負責任的人，而不是讓你當替罪羊瞭。
Path Intellisense ——文件路徑自動完成程序。這樣一來從其他文件中導入重要的東西就非常方便瞭。這一工具使文件導航變得輕而易舉。
Prettier ——自動代碼格式化程序。忘掉那些你不得不手動縮進代碼的日子吧，有瞭這個工具，事情就變得簡單多啦。這個程序會比你自己做得更快更好。對這個程序我是鼎力推薦的。
VSCode-Icons ——將圖標添加到文件譜中。如果文件結構非常不科學，你的眼睛想罷工的話，這個程序可能會有所幫助。它對於你正在制作的任何文件都能提供有用的圖標輔助，能使你更為輕易地區分看到的內容。
總結
你肯定也有自己中意的工具，這些工具對你的開發工作來說是必不可少的。也希望我上面提到的一些工具能夠提高你的工作效率。
但是千萬不要落入貪多不爛的陷阱，因為它可能耗費很多時間。
希望你能在評論區留下你最喜歡的工具，這樣我們就可以共同進步瞭。
編譯組出品。編輯：郝鵬程
