?

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

為什么是 VSCode？

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

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

我相信抓住一個人心的最好方法之一就是幫助他們在知道自己需要什么之前就意識到自己需要什么。實際上，這是市場營銷中最強大的驅動力之一，而 VSCode 做得非常好。

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

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

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

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

1. 自動閉合 HTML 標簽

擁有這種擴展是必須的。編寫代碼已經足夠困難和瘋狂，而不必僅僅因為缺少一個關閉標記 div / div 而花大量時間查找錯誤

你可以以后再謝我！

它所做的是自動添加剛才添加的開始標記的結束括號，然后將鼠標光標定位在標記之間。很酷，對吧？

自動閉合 HTML 標簽插件地址^[2]

2. VSCode 集成終端

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

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

3. 代碼對著色器

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

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

是的，不客氣！

Bracket Pair Colorizer 插件地址^[4]

4.ESLint/TSLint

這個擴展的主要功能是自動格式化代碼，以便在整個團隊中保持一致的格式。ESLint 也可以配置為自動格式化你的代碼，每當你出現錯誤，它都會向你發(fā)出一連串的警告。

它有數百萬的下載量是有原因的。

ESLint下載地址^[5]

5. 代碼拼寫檢查器

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

代碼拼寫檢查器^[6]

6. 同步 VSCode 設置

如果您像我一樣使用多臺機器，您會發(fā)現這個擴展很有用。設置同步使您的所有計算機 / 筆記本電腦都能保持一樣的 VSCode 設置。

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

同步設置下載地址^[7]

7. Prettier

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

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

這是超級容易設置，當你保存時，它會自動格式化代碼。

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

8. Material Icon Theme

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

Material Icon Theme 下載地址^[9]

9. Path Intellisense

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

Path Intellisense還可以幫助自動完成所有的隱藏文件。

Path Intellisense下載地址^[10]

10. 瀏覽器預覽

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

瀏覽器預覽下載地址^[11]

11. Chrome 調試器

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

從發(fā)現錯誤所在的行和函數開始，直到看到其數據處理，該控制臺都很強大。

Chrome 的調試器^[12]

12. Javascript (ES6)代碼片段

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

這個方便的代碼片段是一個輕量級的庫擴展，它可以綁定任何標準的 JavaScript 調用，因此只需鍵入快捷代碼，就可以看到自動打印到編輯器的整個通用代碼。這個擴展不僅支持 Javascript ES6，還支持Typescript、 Reactjs、 Vue 和 HTML。

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

13. Live Server

在使用 Live Server 時，這個 VSCode 擴展將幫助您打開當前項目的活動 Web 服務器。通常，當使用像 Webpack 這樣的構建器時，它通常會完成這項工作，但是這個擴展已經證明自己更加有用。您只需右鍵單擊并運行打開與活動服務器，它會做其它的。

Live Server下載地址^[14]

14. Quokka

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

與其他 VSCode 擴展相比，它非常輕量級、高效和強大。它將提高你的工作流程，它是實時的，并將立即給你反饋。

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

Quokka.js下載地址^[15]

15. Live Share

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

這是完美的，有助于團隊協作變得更有效率和生產力。Live Share 允許即時分享當前的項目，即使是在調試的時候ーー這是多么酷?。?/p>

協作者不需要安裝任何軟件倉庫、 sdk 或者任何東西來連接其他開發(fā)人員的當前代碼。團隊中的每個人都可以通過協作會議遠程探索和修復問題。

Live Share下載地址^[16]

16. Github Extension

如果你的團隊正在使用 Github，或者你正在使用 Github 作為你的項目存儲庫，或者你想使用其他開發(fā)者的源代碼存儲庫，那么這個擴展就是為你準備的。

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

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

Github擴展下載地址^[17]

17. GitLens

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

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

18. NPM

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

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

這個 VSCode 擴展是必須的:

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

19. Beautify

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

它對用 Javascript、 JSON、 Sass、 CSS 和 HTML 編寫的代碼進行格式化。

Beautify下載地址^[21]

20. Live Sass Compiler

如果您喜歡 Sass 的樣式，或者只是因為它是項目應用程序需求的一部分而使用 Sass，那么這個 VSCode 擴展就是為您準備的！

它將你的 sass / scss 文件實時編譯成 CSS 文件，并自動為你提供應用程序的實時預覽或瀏覽器中的編譯樣式。

Live Sass Compiler下載地址^[22]

21. Emmet

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

真實故事:

Mithril Emmet的下載地址^[23]

這里有一個額外的好處: Emmet 文檔 Cheatsheet:

Cheat Sheet^[24]

22. VSCode Icons

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

vscode-icons下載地址^[25]

23. Color Picker

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

Color Picker 下載地址^[26]

24. ES7，React，Redux & GraphQL Snippets

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

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

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

25. REST Client

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

這個擴展允許您輕松地在代碼編輯器中直接調用和 API 端點。這樣可以節(jié)省時間ーー 你可以使用這個選項，而不必在瀏覽器或 Postman 那里來回地切換請求。

Rest Client下載地址^[28]

感謝大家的閱讀！

?

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

?

Reference