建站
咨詢
售后
建站咨詢
新聞中心
編者按：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)證明對我非常有用。如果你剛剛開始學(xué)習(xí)怎么編程的話，這個(gè)清單能給你提供一些指導(dǎo)。如果你是個(gè)經(jīng)驗(yàn)豐富的開發(fā)人員，也希望你能從中學(xué)到一些新的東西。
我將把這篇文章分為 Chrome 擴(kuò)展程序和 VS 代碼擴(kuò)展擴(kuò)展程序兩部分。我知道還有其他的瀏覽器和文本編輯器，但是我想你當(dāng)然只能在你能找到的工具里選擇，所以還是別因?yàn)閭€(gè)人喜好而引起一場宗教般的爭論。
請隨便選。
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ò)展程序介紹給你，而它們對你所使用的大多數(shù)編輯器都適用?？纯次易钕矚g的擴(kuò)展程序有哪些：
-
Auto Rename Tag?——自動(dòng)重命名成對的 HTML 標(biāo)記。假如你創(chuàng)建了一個(gè)
標(biāo)記。現(xiàn)在你想更改它。有了這個(gè)軟件，你只需要更改一個(gè)就行，另一個(gè)會(huì)自動(dòng)修改。從理論上來說，使用這個(gè)軟件可以把你的工作效率提升一倍。
-
HTML CSS Support?——HTML 文檔的 CSS 支持工具。該工具在獲得一些簡潔的語法高亮顯示和代碼建議方面非常有用。
-
HTML Snippets?——這一工具在代碼分段方面非常有用，可以為你節(jié)省大量的時(shí)間。它能跟 Emmet 配對，這樣一來你甚至都不用再真正鍵入 HTML 了。
-
Babel ES6/ES7?——JavaScript Babel 的輔助工具。如果你用的是 Babel，這個(gè)工具可以讓你更容易區(qū)分代碼。如果你喜歡 JavaScript，那務(wù)必也不要錯(cuò)過這款軟件。
-
Bracket Pair Colorizer?——色彩可視化工具。如果你沒有準(zhǔn)確地括號(hào)，那這個(gè)工具對于發(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?——可以讓我們對某文件何時(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ì)比你自己做得更快更好。對這個(gè)程序我是鼎力推薦的。
-
VSCode-Icons?——將圖標(biāo)添加到文件譜中。如果文件結(jié)構(gòu)非常不科學(xué)，你的眼睛想罷工的話，這個(gè)程序可能會(huì)有所幫助。它對于你正在制作的任何文件都能提供有用的圖標(biāo)輔助，能使你更為輕易地區(qū)分看到的內(nèi)容。
總結(jié)
你肯定也有自己中意的工具，這些工具對你的開發(fā)工作來說是必不可少的。也希望我上面提到的一些工具能夠提高你的工作效率。
但是千萬不要落入貪多不爛的陷阱，因?yàn)樗赡芎馁M(fèi)很多時(shí)間。
希望你能在評論區(qū)留下你最喜歡的工具，這樣我們就可以共同進(jìn)步了。
網(wǎng)站名稱：剛開始學(xué)編程？這幾款小工具能讓你事半功倍
文章路徑：http://www.dlmjj.cn/article/cocohip.html
