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