|
編者按：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è)人喜好而引起一場(chǎng)宗教般的爭(zhēng)論,。 請(qǐng)隨便選。 Chrome擴(kuò)展程序
現(xiàn)在設(shè)我是一位web開發(fā)人員,，以Chrome為陣地。下面是一些能讓我少花點(diǎn)時(shí)間的工具： WhatFont?——?名字就說明了一切,。這是找出你最喜歡網(wǎng)站使用的字體的簡(jiǎn)單方法,，這樣你就可以為己所用了。 Pesticide——?修改CSS的絕佳程序,。當(dāng)我試著學(xué)習(xí)匣子模型的時(shí)候,，它簡(jiǎn)直就是救命稻草般的存在。 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ù)編輯器都適用,。看看我最喜歡的擴(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支持工具。該工具在獲得一些簡(jiǎn)潔的語(yǔ)法高亮顯示和代碼建議方面非常有用,。 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)日志記錄變得更為簡(jiǎn)單可行,。如果你像大多數(shù)開發(fā)人員一樣，你會(huì)發(fā)現(xiàn)自己需要在調(diào)試流中登錄到控制臺(tái)（我知道我們應(yīng)該使用調(diào)試器）,。這個(gè)實(shí)用的程序使得創(chuàng)建有用的console.log()語(yǔ)句變得易如反掌,。 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è)工具，事情就變得簡(jiǎn)單多啦,。這個(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)步了。 編譯組出品,。編輯：郝鵬程
|
