?

譯原文：https://medium.com/better-programming/how-to-use-vscode-like-a-pro-e120c428f45f^[1]
作者：Ann Adaya
「點(diǎn)贊+關(guān)注+收藏三連」，鼓勵(lì)作者寫出更好的教程??
譯：圖雀社區(qū)

?

擁有一個(gè)好的文本編輯器對(duì)你的開發(fā)效率、學(xué)習(xí)曲線和時(shí)間管理都很重要。

為什么是 VSCode？

VSCode 可能是目前排名第一的代碼編輯器，我喜歡它。

我認(rèn)為它如此受歡迎的原因很簡單，因?yàn)?VSCode 提供了每個(gè)開發(fā)者想要的功能，包括他們甚至不知道自己需要的功能。這就是 VSCode 的秘密魅力——它總能讓你大吃一驚。

我相信抓住一個(gè)人心的最好方法之一就是幫助他們?cè)谥雷约盒枰裁粗熬鸵庾R(shí)到自己需要什么。實(shí)際上，這是市場(chǎng)營銷中最強(qiáng)大的驅(qū)動(dòng)力之一，而 VSCode 做得非常好。

大多數(shù) VSCode 愛好者都是 JavaScript 開發(fā)人員ーー VSCode 是為現(xiàn)代技術(shù)而創(chuàng)建的。如今，流行的 JavaScript 框架非常適合 VSCode ーー它擁有你需要的所有東西。

在選擇文本編輯器的時(shí)候，一定要選擇最新最好的。技術(shù)正在迅速變化，你不想落后。想要成為一個(gè)偉大的開發(fā)人員，時(shí)間應(yīng)該永遠(yuǎn)站在你這邊。

我并不是說你應(yīng)該從一種語言跳到另一種語言，或者從一個(gè)框架跳到另一個(gè)框架---- 這太瘋狂了。你需要的是保持更新，保持敏銳，了解最新的信息，并將它們與你現(xiàn)在正在使用的信息進(jìn)行比較，了解其中的差異，利弊，觀察支持和社區(qū)的發(fā)展，因?yàn)榉€(wěn)定性也很重要。你會(huì)驚訝地發(fā)現(xiàn)你的生產(chǎn)力會(huì)如此之高！

VSCode 擁有一個(gè)龐大的開源社區(qū)。它的增長和潛力是無限的，在未來學(xué)習(xí)如何編碼和編碼本身將會(huì)更容易。

1. 自動(dòng)閉合 HTML 標(biāo)簽

擁有這種擴(kuò)展是必須的。編寫代碼已經(jīng)足夠困難和瘋狂，而不必僅僅因?yàn)槿鄙僖粋€(gè)關(guān)閉標(biāo)記 div / div 而花大量時(shí)間查找錯(cuò)誤

你可以以后再謝我！

它所做的是自動(dòng)添加剛才添加的開始標(biāo)記的結(jié)束括號(hào)，然后將鼠標(biāo)光標(biāo)定位在標(biāo)記之間。很酷，對(duì)吧？

自動(dòng)閉合 HTML 標(biāo)簽插件地址^[2]

2. VSCode 集成終端

將命令 / 終端放在 VSCode 編輯器中不僅會(huì)使您的生活更加輕松，而且還會(huì)節(jié)省空間。感謝 VSCode，讓你的終端派上用場(chǎng)。

Visual Studio 代碼中的集成終端下載地址^[3]

3. 代碼對(duì)著色器

對(duì)于大多數(shù)開發(fā)人員來說，處理括號(hào)是一種痛苦，尤其是在處理大型項(xiàng)目時(shí)。如果你有意大利面條式的代碼，那就更糟糕了。相信我，Bracket Pair Colorizer 會(huì)減輕你所有的壓力。

由于有大量嵌套的長代碼，尤其是在使用 Javascript 時(shí)，幾乎不可能確定哪些括號(hào)彼此匹配。使用對(duì) Bracket Pair Colorizer ?可以幫助您更容易地找到開始和結(jié)束。它們是彩色的這一事實(shí)使您的代碼更具可讀性。下載這個(gè)！

是的，不客氣！

Bracket Pair Colorizer 插件地址^[4]

4.ESLint/TSLint

這個(gè)擴(kuò)展的主要功能是自動(dòng)格式化代碼，以便在整個(gè)團(tuán)隊(duì)中保持一致的格式。ESLint 也可以配置為自動(dòng)格式化你的代碼，每當(dāng)你出現(xiàn)錯(cuò)誤，它都會(huì)向你發(fā)出一連串的警告。

它有數(shù)百萬的下載量是有原因的。

ESLint下載地址^[5]

5. 代碼拼寫檢查器

如果你像我一樣不是以英語為母語的人，英語不是你的第一語言，甚至可能不是你的第二語言，那么代碼拼寫檢查器是非常有用的，保持你的代碼免遭打字錯(cuò)誤和錯(cuò)誤。而且沒有人是完美的，不管你的英語是否流利，拼寫錯(cuò)誤是不可避免的ーー你不想花時(shí)間去尋找它們，特別是如果你有意大利面條式的代碼。

代碼拼寫檢查器^[6]

6. 同步 VSCode 設(shè)置

如果您像我一樣使用多臺(tái)機(jī)器，您會(huì)發(fā)現(xiàn)這個(gè)擴(kuò)展很有用。設(shè)置同步使您的所有計(jì)算機(jī) / 筆記本電腦都能保持一樣的 VSCode 設(shè)置。

如果你是一個(gè)同時(shí)在辦公室和家庭電腦上工作的開發(fā)人員，那么你基本上將在不同的工作站上工作。手動(dòng)更改設(shè)置是很費(fèi)時(shí)間的，因?yàn)檎f實(shí)話，我們需要根據(jù)我們正在做的項(xiàng)目不時(shí)地更改設(shè)置，所以為了減輕編程的壓力，我建議你使用這個(gè)擴(kuò)展，這樣你所做的所有更改都會(huì)自動(dòng)同步到你所有的機(jī)器和工作站上。

同步設(shè)置下載地址^[7]

7. Prettier

在前面，我列出了 ESLint，它可以幫助您自動(dòng)格式化一致的代碼，并顯示一些警告和錯(cuò)誤。

作為一個(gè) React / Native 開發(fā)人員，保持我的代碼干凈和適當(dāng)對(duì)齊是必須的ーー這是不可協(xié)商的。為了更好地閱讀代碼，將其適當(dāng)縮進(jìn)和分隔是一個(gè)優(yōu)先考慮的問題，尤其是在處理長時(shí)間編寫的代碼時(shí)ーー樣式、函數(shù)和處理程序的分隔非常關(guān)鍵，不僅對(duì)你而言如此，對(duì)你的同事而言也是如此。

這是超級(jí)容易設(shè)置，當(dāng)你保存時(shí)，它會(huì)自動(dòng)格式化代碼。

prettier / prettier-vscode下載地址^[8]

8. Material Icon Theme

這個(gè)擴(kuò)展為你的文件列表提供了漂亮可愛的圖標(biāo)。如果這個(gè)文件是一個(gè) JavaScript，那么它將在文件名旁邊包含一個(gè) JavaScript 圖標(biāo)。如果你更多的是一個(gè)看重審美的開發(fā)者，那么這個(gè)擴(kuò)展就是為你準(zhǔn)備的。它被成千上萬的用戶廣泛使用。

Material Icon Theme 下載地址^[9]

9. Path Intellisense

這個(gè)擴(kuò)展是我生活中不可或缺的。相信我，這會(huì)節(jié)省你很多時(shí)間。我很健忘，作為一個(gè)擁有大量組件、擴(kuò)展、包(特別是 React 格式)的前端開發(fā)人員，我需要一些東西來幫助我處理文件路徑。處理大型項(xiàng)目是瘋狂的，Path Intellisense 是你最好的朋友。當(dāng)您嘗試并在引用中鍵入路徑時(shí)，Intellisense 將自動(dòng)為您填寫或顯示建議。

Path Intellisense還可以幫助自動(dòng)完成所有的隱藏文件。

Path Intellisense下載地址^[10]

10. 瀏覽器預(yù)覽

這個(gè)擴(kuò)展對(duì)于前端開發(fā)人員來說是必須的。下載這個(gè)瀏覽器預(yù)覽插件，這樣你就可以在你的 VSCode 中完成所有的工作，而不是打開另一個(gè)窗口讓你的 Chrome 瀏覽器看到你在代碼中所做的改變。這會(huì)顯示你的代碼的瀏覽器預(yù)覽，所以不必再切換到你的瀏覽器去查看哪怕是很小的變化。它幫助你節(jié)省時(shí)間和空間。

瀏覽器預(yù)覽下載地址^[11]

11. Chrome 調(diào)試器

這是我最喜歡和最常用的 VSCode 擴(kuò)展。作為一個(gè)前端 web 和移動(dòng)開發(fā)者，Debugger for Chrome 幫助了我很多。特別是對(duì)于 JavaScript 開發(fā)人員來說，這樣可以節(jié)省大量的時(shí)間來做一些小的改變。它對(duì)調(diào)試非常有幫助ーー它可以幫助你很快地解決和捕捉錯(cuò)誤。

從發(fā)現(xiàn)錯(cuò)誤所在的行和函數(shù)開始，直到看到其數(shù)據(jù)處理，該控制臺(tái)都很強(qiáng)大。

Chrome 的調(diào)試器^[12]

12. Javascript (ES6)代碼片段

如果你是一個(gè) JavaScript 開發(fā)者，這將是你最好的朋友。不管你使用什么樣的 JavaScript 框架，這個(gè)擴(kuò)展都會(huì)對(duì)你有所幫助。如果你一遍又一遍地輸入同樣的通用代碼，我會(huì)說這不是很有效率。

這個(gè)方便的代碼片段是一個(gè)輕量級(jí)的庫擴(kuò)展，它可以綁定任何標(biāo)準(zhǔn)的 JavaScript 調(diào)用，因此只需鍵入快捷代碼，就可以看到自動(dòng)打印到編輯器的整個(gè)通用代碼。這個(gè)擴(kuò)展不僅支持 Javascript ES6，還支持Typescript、 Reactjs、 Vue 和 HTML。

Javascript (ES6)代碼片段下載地址^[13]

13. Live Server

在使用 Live Server 時(shí)，這個(gè) VSCode 擴(kuò)展將幫助您打開當(dāng)前項(xiàng)目的活動(dòng) Web 服務(wù)器。通常，當(dāng)使用像 Webpack 這樣的構(gòu)建器時(shí)，它通常會(huì)完成這項(xiàng)工作，但是這個(gè)擴(kuò)展已經(jīng)證明自己更加有用。您只需右鍵單擊并運(yùn)行打開與活動(dòng)服務(wù)器，它會(huì)做其它的。

Live Server下載地址^[14]

14. Quokka

對(duì)于 JavaScript 開發(fā)者來說，Quokka 被稱為現(xiàn)代的暫存器。它的構(gòu)建是為了幫助每個(gè)開發(fā)人員進(jìn)行代碼檢查。這是一個(gè)完美的解決方案。

與其他 VSCode 擴(kuò)展相比，它非常輕量級(jí)、高效和強(qiáng)大。它將提高你的工作流程，它是實(shí)時(shí)的，并將立即給你反饋。

它所做的是為每個(gè)結(jié)果使用固定的顏色類型，這樣開發(fā)人員就可以輕松地理解流的執(zhí)行。

Quokka.js下載地址^[15]

15. Live Share

Live 共享是 VSCode 文本編輯器中最高級(jí)的特性之一。與團(tuán)隊(duì)成員一起工作非常完美。其功能之一是允許每個(gè)開發(fā)人員實(shí)時(shí)地與其他開發(fā)人員共享代碼片段。

這是完美的，有助于團(tuán)隊(duì)協(xié)作變得更有效率和生產(chǎn)力。Live Share 允許即時(shí)分享當(dāng)前的項(xiàng)目，即使是在調(diào)試的時(shí)候ーー這是多么酷??！

協(xié)作者不需要安裝任何軟件倉庫、 sdk 或者任何東西來連接其他開發(fā)人員的當(dāng)前代碼。團(tuán)隊(duì)中的每個(gè)人都可以通過協(xié)作會(huì)議遠(yuǎn)程探索和修復(fù)問題。

Live Share下載地址^[16]

16. Github Extension

如果你的團(tuán)隊(duì)正在使用 Github，或者你正在使用 Github 作為你的項(xiàng)目存儲(chǔ)庫，或者你想使用其他開發(fā)者的源代碼存儲(chǔ)庫，那么這個(gè)擴(kuò)展就是為你準(zhǔn)備的。

順便說一下，Github 現(xiàn)在由微軟擁有并管理，為那些不知道的人服務(wù)，所以 Github 和 VSCode 現(xiàn)在是微軟產(chǎn)品的一部分。

通過使用 Github Extension，您現(xiàn)在可以輕松地連接其他開發(fā)人員的存儲(chǔ)庫、您喜歡的開發(fā)人員的存儲(chǔ)庫，甚至您自己的存儲(chǔ)庫。如果你經(jīng)常使用 Github 的話，你可以很容易的做到這一點(diǎn)。

Github擴(kuò)展下載地址^[17]

17. GitLens

Gitlens 是另一個(gè)偉大的擴(kuò)展。它增加了當(dāng)前的 VSCode Git 功能，能夠從以前的提交和更改中并行執(zhí)行代碼比較，還有其他很酷的功能。

GitLens — Git supercharged下載地址^[18]

18. NPM

每個(gè)現(xiàn)代開發(fā)人員都已經(jīng)知道 NPM 是什么以及為什么它很重要。Node Package Manager 是一個(gè)擴(kuò)展，可以幫助您管理 Package.json 文件。如果有依賴項(xiàng)需要但尚未安裝，它會(huì)給出警告，還有 NPM 包的版本控制。

我一直致力于解決的大多數(shù)錯(cuò)誤和錯(cuò)誤都來自于使用 NPM 包、函數(shù)和特性，由于它與其他包不兼容，這些都無法正常工作。

這個(gè) VSCode 擴(kuò)展是必須的:

n^[19]pm 下載地址^[20]

19. Beautify

Beautify是另一個(gè)很好的代碼格式化擴(kuò)展，幾乎和我前面提到的 Prettier 一樣。它現(xiàn)在已經(jīng)有了將近1200萬的下載量，所以這里沒有什么可以說服你為什么這個(gè)擴(kuò)展如此有用。

它對(duì)用 Javascript、 JSON、 Sass、 CSS 和 HTML 編寫的代碼進(jìn)行格式化。

Beautify下載地址^[21]

20. Live Sass Compiler

如果您喜歡 Sass 的樣式，或者只是因?yàn)樗琼?xiàng)目應(yīng)用程序需求的一部分而使用 Sass，那么這個(gè) VSCode 擴(kuò)展就是為您準(zhǔn)備的！

它將你的 sass / scss 文件實(shí)時(shí)編譯成 CSS 文件，并自動(dòng)為你提供應(yīng)用程序的實(shí)時(shí)預(yù)覽或?yàn)g覽器中的編譯樣式。

Live Sass Compiler下載地址^[22]

21. Emmet

自從我開始使用 VSCode 以來，我一直在使用 Emmet。它可以幫助每個(gè)開發(fā)人員提高編寫代碼的速度。使用這個(gè)擴(kuò)展，很快你就不能想象沒有它的代碼了。

真實(shí)故事:

Mithril Emmet的下載地址^[23]

這里有一個(gè)額外的好處: Emmet 文檔 Cheatsheet:

Cheat Sheet^[24]

22. VSCode Icons

這是為我們的前端開發(fā)者準(zhǔn)備的。這和我之前提到的material icons類似，只是設(shè)計(jì)不同。作為一個(gè)前端開發(fā)者，我們喜歡看到的東西是正確的嗎？所以這個(gè)圖標(biāo)可以幫助你看到你所擁有的文件類型，以及它們是否是 HTML，CSS，Javascript 等等。

vscode-icons下載地址^[25]

23. Color Picker

顏色選擇器擴(kuò)展可以幫助您輕松地在 CSS 文件中選擇顏色。它將立即反映或應(yīng)用于您當(dāng)前正在處理的屬性。如果你喜歡使用 RGBA 顏色，它也是可用的。

Color Picker 下載地址^[26]

24. ES7，React，Redux & GraphQL Snippets

這是為那些正在使用諸如 React 這樣的 JavaScript 框架的高級(jí)開發(fā)人員準(zhǔn)備的，同時(shí)還有其他與其產(chǎn)品和復(fù)雜應(yīng)用程序兼容的技術(shù)。

一遍又一遍地輸入標(biāo)準(zhǔn)代碼是低效的。有了這個(gè)代碼片段的幫助，你可以通過輸入快捷代碼輕松創(chuàng)建基于類的組件、函數(shù)組件、導(dǎo)入、生命周期方法等等，這是我使用 Reactjs 和 React Native 以來最常用的擴(kuò)展之一。

ES7 react / redux / graphql / React-Native snippets^[27]

25. REST Client

另一個(gè)高級(jí)工具 Rest Client 擴(kuò)展可以幫助您使用其他第三方工具和 API。如果您需要能夠輕松地發(fā)出 HTTP 請(qǐng)求，那么它非常有用。

這個(gè)擴(kuò)展允許您輕松地在代碼編輯器中直接調(diào)用和 API 端點(diǎn)。這樣可以節(jié)省時(shí)間ーー 你可以使用這個(gè)選項(xiàng)，而不必在瀏覽器或 Postman 那里來回地切換請(qǐng)求。

Rest Client下載地址^[28]

感謝大家的閱讀！

?

想要學(xué)習(xí)更多精彩的實(shí)戰(zhàn)技術(shù)教程？來圖雀社區(qū)^[29]逛逛吧。

?

Reference

最后

點(diǎn)個(gè)在看支持我吧，轉(zhuǎn)發(fā)就更好了