在編寫代碼時(shí)，一個(gè)富有成效的工作空間不僅僅是要找到合適的代碼編輯器。開箱即用的VS Code是為開發(fā)人員制作的。根據(jù)2021年StackOverflow的調(diào)查，71.06%的受訪者將Visual Studio Code作為首選的IDE。

使得VS Code如此受歡迎的是市場中可用的擴(kuò)展程序的數(shù)量。有超過30,000個(gè)擴(kuò)展在流通，選擇幾乎是無限的 - 同時(shí)也是壓倒性的。

根據(jù)程序員的時(shí)間跟蹤工具WakaTime，Visual Studio Code在2020年的開發(fā)工作中超過1800萬小時(shí)。此外，Visual Studio Code占開發(fā)人員使用的所有編輯器所追蹤的總時(shí)間的46%。

你應(yīng)該選擇哪些擴(kuò)展？哪些擴(kuò)展對(duì)生產(chǎn)力來說是最好的？代碼版本管理？美觀性？格式化和提示性？如果你想要的話，可能在市場的某個(gè)地方就有一個(gè)擴(kuò)展。

這里有40多個(gè)VS Code擴(kuò)展--經(jīng)過策劃、排序和分類，以幫助你提高生產(chǎn)力，使你作為一個(gè)開發(fā)者更加有效。

GraphQL

GraphQL在VS Code市場上有超過50萬次的下載，是一個(gè)值得關(guān)注的新興插件擴(kuò)展。GraphQL本身也在不斷普及和實(shí)施，這意味著如果你在下一個(gè)項(xiàng)目中遇到它，VS Code上的GraphQL擴(kuò)展是一個(gè)必須的選擇。

這個(gè)插件是由官方的GraphQL基金會(huì)維護(hù)的，這意味著它得到了積極的支持并始終保持著活躍的更新。

下載 GraphQL

Tabnine

Tabnine是你的多合一人工智能助手，可以幫助你更快地編碼。到目前為止，這個(gè)插件已經(jīng)有超過200萬的安裝量，它由機(jī)器學(xué)習(xí)驅(qū)動(dòng)，與你項(xiàng)目的現(xiàn)有模式一起工作。在其預(yù)測性的代碼自動(dòng)完成中，Tabnine采用了同樣下載和使用該插件的其他人的綜合知識(shí)。

Tabnine不僅僅是一個(gè)自動(dòng)完成器--它是一個(gè)獨(dú)特的由AI驅(qū)動(dòng)的預(yù)測性代碼完成器，你越是使用它，就越能提高你的生產(chǎn)力。

下載 Tabnine

YAML

YAML 的設(shè)置可能很棘手。一個(gè)雜亂的空格或不正確的制表符就會(huì)導(dǎo)致一個(gè)無效的YAML文件。YAML插件由紅帽公司維護(hù)，作為一個(gè)驗(yàn)證工具。

下載 YAML

Remote – SSH Remote SSH

在2019年發(fā)布的Remote SSH下載量高達(dá)500多萬次。這個(gè)擴(kuò)展可以讓你使用一個(gè)遠(yuǎn)程服務(wù)器作為你的開發(fā)環(huán)境。你的連接通過SSH保持，并且通過 Remote SSH，你可以在 VS Code 內(nèi)部編寫代碼。

使用此設(shè)置，您可以讓機(jī)器在云中運(yùn)行，將您的工作流程集中到單一來源，并且您正在使用的機(jī)器上不需要有源代碼。

下載 SSH Remote SSH

Settings Sync

在多個(gè)設(shè)備上工作？設(shè)置同步解決了您無法設(shè)置工作區(qū)的煩人問題。借助 Settings Sync，您可以在 GitHub Gists 的幫助下將片段、主題、文件圖標(biāo)、鍵綁定和擴(kuò)展帶到您需要的任何地方。

Settings Sync 最好的部分是它是完全免費(fèi)的、開源的，并且擁有超過 200 萬的安裝量。

下載 Settings Sync

Auto Rename Tag

由 TabNine 贊助的 Auto Rename Tag 于 2016 年首次在 Marketplace 上推出。此后，它的下載量已超過 600 萬次，并被開發(fā)人員廣泛用于幫助解決簡單但重復(fù)繁瑣的重命名配對(duì) HTML/XML 標(biāo)簽的任務(wù).

我們都經(jīng)歷過這樣的情況--試圖尋找標(biāo)簽對(duì)，尤其是在有嵌套、{{double curlies}}和邏輯條件的情況下--只是因?yàn)樘^手動(dòng)而沮喪地舉起手，Auto Rename Tag 可以為您節(jié)省這部分時(shí)間。

下載 Auto Rename Tag

CSS Peek

如果你在前臺(tái)工作，CSS是工作流程中不可避免的一部分。隨著項(xiàng)目的發(fā)展，你的造型設(shè)計(jì)也要配合要求。CSS在本質(zhì)上是線性的，這可能會(huì)讓人感到沮喪，尤其是當(dāng)你想檢查造型時(shí)，不需要滾動(dòng)和穿越所有不同的文件來找到你想要的東西。

CSS Peek是VS Code的一個(gè)擴(kuò)展，讓你只需簡單地點(diǎn)擊幾下就能進(jìn)入工作區(qū)的CSS定義和符號(hào)。

下載 CSS Peek

Code Runner

有時(shí)，你不需要運(yùn)行你的整個(gè)項(xiàng)目，只需要其中的一小段。這就是Code Runner的用武之地。這個(gè)VS Code插件支持多種語言，可以通過預(yù)定義的鍵盤快捷鍵或在鼠標(biāo)的幫助下運(yùn)行高亮代碼。

由TabNine贊助，這個(gè)節(jié)省時(shí)間的擴(kuò)展被開發(fā)者所喜愛，已經(jīng)被安裝了超過900萬次。

它內(nèi)置了Kubernetes語法支持，并有五個(gè)核心功能--驗(yàn)證、文檔概述、自動(dòng)完成、如果模式提供，則支持顯示描述的過度，以及格式化。

下載 Code Runner

Material Icon Theme

當(dāng)你只有文件和文件夾的時(shí)候，所有的東西都開始看起來是一樣的。隨著項(xiàng)目的增長，你很快就會(huì)失去從視覺上掃描你的文件結(jié)構(gòu)的能力。Material Icon Theme 通過安裝視覺上吸引人的圖標(biāo)，把這種能力還給你，其靈感來自Google's material design。

有了這個(gè)插件，你可以確保你所有的編碼需求都有視覺上的分類，使你很容易及時(shí)訪問你需要的文件。

下載 Material Icon Theme

Bracket Pair Colorizer

說實(shí)話，我們都曾在某個(gè)時(shí)候丟失過大括號(hào)和小括號(hào)。當(dāng)你處理嵌套和邏輯條件時(shí)，情況會(huì)變得更糟。大括號(hào)對(duì)著色器通過給每個(gè)大括號(hào)對(duì)附加不同的顏色，解決了代碼中大括號(hào)對(duì)獵取的問題。

這意味著，如果你有多個(gè)大括號(hào)，為了我們的方便和代碼效率，它很容易被配上顏色。

下載 Bracket Pair Colorizer

Peacock

有時(shí)，您需要打開多個(gè) VS Code 實(shí)例?？赡苁悄瑫r(shí)處理多個(gè)代碼庫，或者需要在項(xiàng)目之間快速切換而無需打開和關(guān)閉它們。

通過顏色，Peacock 可以輕松識(shí)別工作空間。您所要做的就是打開一個(gè) VS Code 工作區(qū)，按 F1 打開命令面板，輸入 Peacock，然后從編輯器的預(yù)定義顏色中進(jìn)行選擇。

下載 Peacock

Colorize

Colorize 是一種強(qiáng)大的生產(chǎn)力工具。當(dāng)合并到您的代碼中時(shí)，它可以加快您的工作流程。Colorize 在創(chuàng)建時(shí)考慮了 CSS，可幫助您通過 CSS 變量、預(yù)處理器變量、hsl/hsla 顏色、跨瀏覽器顏色、exa、rgb、rgba 和 argb 的彩色背景立即可視化 CSS 顏色。

它支持的標(biāo)準(zhǔn) CSS、SASS、LESS、post CSS、stylus 和 XML。

下載 Colorize

vscode-icons

如果你喜歡 material design-inspired icons，那么 vscode-icons 也是一個(gè)不錯(cuò)的選擇。安裝量超過 900 萬次，vscode-icons 支持全球化，并能夠使用您的圖標(biāo)包進(jìn)行自定義，自動(dòng)檢測您的項(xiàng)目，并允許自定義配置。

下載 vscode-icons

Icon Fonts

你在你的項(xiàng)目中是Font Awesome的用戶嗎？或者你使用Android圖標(biāo)？你想在不需要一直快速參考文檔的情況下進(jìn)行原型設(shè)計(jì)嗎？Icon Fonts是一個(gè)生產(chǎn)力工作工具，它結(jié)合了自動(dòng)完成和IntelliSense，用于將各種圖標(biāo)字體納入你的前端的HTML。

支持主要的圖標(biāo)字體，如Creative Commons Icon Fonts、Font Logos和Bootstrap Glyphicons，Icon Font插件是一個(gè)生產(chǎn)力必備工具。

下載 Icon Fonts

Live SASS Compiler

SASS是保持你的CSS集中化和組織化的絕佳方式。然而，當(dāng)你沒有實(shí)時(shí)重載時(shí)，它也可能是一個(gè)痛苦的處理方式。Live SASS Compiler 使你很容易看到你的變化如何影響你的視覺輸出。

這個(gè)VS Code擴(kuò)展可以實(shí)時(shí)編譯/轉(zhuǎn)寫你的SASS和SCSS文件到CSS文件，并自動(dòng)實(shí)時(shí)重載，不需要做任何額外的事情。

下載 Live SASS Compiler

代碼、版本控制和協(xié)作

Live Server

Live Server 是市場上安裝最多的 VS Code 擴(kuò)展之一，安裝量超過 1500 萬。為什么？因?yàn)樗梢宰屇惆涯愕?VS Code 編輯器變成一個(gè)功能齊全的 IDE。

功能包括通過實(shí)時(shí)重新加載啟動(dòng)本地開發(fā)服務(wù)器、合并用于啟動(dòng)和停止服務(wù)器的快捷方式、熱鍵控制、遠(yuǎn)程連接和 Chrome 調(diào)試。

下載 Live Server

GitLens

GitLens 在 Live Server 之后很受歡迎，安裝量超過 1100 萬次，獲得近乎完美的 5 星評(píng)級(jí)。創(chuàng)建 GitLens 是為了幫助開發(fā)人員快速導(dǎo)航和了解他們的代碼是如何更改、編輯、更改和導(dǎo)致沖突的。

有時(shí)，在控制臺(tái)中處理 git 的過程可能會(huì)讓人不知所措。GitLens 通過將它們移動(dòng)到我們的工作區(qū)來減少在控制臺(tái)中瀏覽 git 文件的心理負(fù)擔(dān)。

下載 GitLens

Git History

Git History 是一個(gè) VS Code 插件擴(kuò)展，可讓您輕松查看歷史記錄并搜索提交、消息、分支、文件和作者。除此之外，它還允許您通過幾個(gè)簡單的點(diǎn)擊和命令來挑選提交、比較文件、軟重置和硬重置、還原、合并和變基。

下載 Git History

Code Time

你有沒有想過你花了多長時(shí)間編碼？盡管轉(zhuǎn)向遠(yuǎn)程工作，我們?nèi)匀缓苋菀妆簧钪械氖虑榉中?，比如孩子、包裹遞送，甚至是狗——就像我們坐在辦公室里通過同事和臨時(shí)會(huì)議一樣。Code Time 通過跟蹤您的時(shí)間來讓您對(duì)自己的工作效率負(fù)責(zé)，并且可以幫助您劃分您最常從事的項(xiàng)目。

“進(jìn)入流程模式”等功能可以幫助您保護(hù)時(shí)間并跟蹤開發(fā)指標(biāo)，以將您的編碼指標(biāo)視為統(tǒng)計(jì)趨勢。

下載 Code Time

Polacode

想要分享代碼片段？想讓它看起來很專業(yè)嗎？Polacode 是一個(gè)很酷的小插件，它可以讓你對(duì)你的代碼進(jìn)行“polaroids”，而不必破壞截圖工具。您突出顯示您想要的代碼，它會(huì)自動(dòng)創(chuàng)建一個(gè)格式化的代碼文件。

下載 Polaroids

Docker Explorer

Docker 是一個(gè)絕妙的主意，但掌握所有鏡像、集線器和注冊(cè)表可能會(huì)很復(fù)雜。Docker Explorer 使其更容易直接連接到 Azure 容器注冊(cè)表以進(jìn)行實(shí)時(shí)管理。

下載 Docker Explorer

Remote Development

所以你已經(jīng)有了一些代碼?；蛘吣阋呀?jīng)有了一個(gè)容器。遠(yuǎn)程開發(fā)可以讓你連接、開發(fā)和部署環(huán)境。這個(gè)插件由微軟開發(fā)和發(fā)布，處于積極的開發(fā)階段，支持WSL、SSH和容器連接，用于遠(yuǎn)程應(yīng)用開發(fā)。

下載 Remote Development

格式化和整理

Prettier

誰不喜歡漂亮的代碼？Prettier 是您最受歡迎的格式化和 linting 工具，可根據(jù)行業(yè)慣例標(biāo)準(zhǔn)化您的代碼。它還確保您的團(tuán)隊(duì)在外觀上創(chuàng)建視覺上無縫的代碼 - 因此無需再爭論您應(yīng)該使用多少個(gè)制表符或空格或括號(hào)應(yīng)該放在哪里。

下載 Prettier

Beautify

Beautify 是類似于 Prettier 的替代品。擁有超過700萬的安裝量，Beautify 是另一個(gè)可靠的代碼 "美化器"，以最小的干預(yù)來襯托和格式化你的代碼。

下載 Beautify

TODO Highlight

我們都有一個(gè)工作清單，在代碼中要做的事情。我們也經(jīng)常以注釋的形式為自己和他人留下筆記。然而，注釋往往會(huì)淡化和消失在背景中。TODO Highlight是一個(gè)VS Code插件，它允許我們利用代碼中的注釋來提高生產(chǎn)力。它的工作原理是突出顯示代碼注釋，并將其與原始待辦事項(xiàng)列表進(jìn)行顏色配對(duì)。

下載 TODO Highlight

Better Comments

需要比 TODO Highlight 更強(qiáng)大的功能嗎？Better Comments 允許您根據(jù)不同類型的注釋突出顯示您的注釋，從而將其提升到一個(gè)新的水平。

支持的類型是警報(bào)、查詢、TODO 和突出顯示。它也可以通過您可能需要的其他內(nèi)容的注釋樣式進(jìn)行擴(kuò)展。

下載 Better Comments

Excel Viewer

如果你在處理數(shù)據(jù)，很有可能你也會(huì)遇到某種形式的excel電子表格。Excel Viewer通過將長字符串和逗號(hào)分隔的字符串格式化為表格格式，使你在VS Code編輯器中處理excel數(shù)據(jù)變得容易。這對(duì)你的.csv、.tsv和.tab擴(kuò)展名有奇效。

下載 Excel Viewer

Markdownlint

在某種程度上，markdown是新的HTML。然而，當(dāng)你的markdown在某處漏掉了*、#或空格時(shí)，處理起來可能會(huì)很麻煩。 markdownlint可以處理寫markdown時(shí)出現(xiàn)的格式不一致問題。它還通過提醒你是否違反了markdown規(guī)則來幫助你學(xué)習(xí)正確的markdown。

下載 Markdownlint

ESLint

ESLint是一個(gè)JavaScript代碼inter，可以發(fā)現(xiàn)并修復(fù)你的JavaScript代碼中的問題。它可以很好地檢測出你的代碼中可能存在的問題模式，并幫助你修復(fù)它們，以避免不一致和避免bug。

下載 ESLint

調(diào)試

Code Spell Checker

我們都有過這樣的經(jīng)歷--我們都曾在某個(gè)地方出現(xiàn)過錯(cuò)別字，并花了寶貴的時(shí)間去尋找它們。代碼拼寫檢查器是一個(gè)方便且廣泛使用的拼寫檢查工具，它也適用于camelCase代碼。

這個(gè)VS Code插件已經(jīng)幫助超過300萬安裝用戶在編碼工作流程中出現(xiàn)問題之前抓住拼寫錯(cuò)誤。

下載 Code Spell Checker

JavaScript Debugger

Visual Studio Marketplace 中有幾個(gè) JavaScript 調(diào)試器。一個(gè)可靠的插件擴(kuò)展是 JavaScript Debugger。這個(gè)基于 DAP 的 JavaScript 調(diào)試器可以使用終端中顯示的進(jìn)程來調(diào)試 Node.js。

下載 JavaScript Debugger

Turbo Console Log

Turbo Console Log 是 VS Code 的一個(gè)活動(dòng)插件，可讓您選擇調(diào)試主題的變量并自動(dòng)將日志消息添加到最近的相對(duì)行。這使您無需編寫任何 console.log 代碼即可快速調(diào)試。

下載 Turbo Console Log

Regex Previewer

Regex有時(shí)會(huì)讓人困惑。這就是為什么Regex Previewer對(duì)于你的VS Code設(shè)置來說是一個(gè)非常方便的擴(kuò)展插件工具。它以一個(gè)并排的窗口顯示正則表達(dá)式的匹配情況，并根據(jù)你的正則表達(dá)式進(jìn)行實(shí)時(shí)的更新。

下載 Regex Previewer

Import Cost

導(dǎo)入模塊的成本可能很高。Import Cost 可讓您查看導(dǎo)入包的大小——通常是隱藏的。這可以避免您開發(fā)運(yùn)行成本高昂的代碼，從而在現(xiàn)在和將來節(jié)省您的時(shí)間。

下載 Import Cost

Task Explorer

npm、grunt、sass、yarn、docker，以及其他你需要運(yùn)行的東西，都可以通過任務(wù)管理器有效地完成。這個(gè)VS Code插件擴(kuò)展了你的側(cè)邊欄和/或資源管理器的運(yùn)行任務(wù)的能力。因此，現(xiàn)在不需要離開你的VS Code工作區(qū)來完成工作。

下載 Task Explorer

Test Explorer UI

測試可以是一個(gè)手動(dòng)的過程，如果不是一個(gè)復(fù)雜的過程。TEST Explorer UI是一個(gè)擴(kuò)展，它為開發(fā)者提供了一個(gè)在Visual Studio Code中運(yùn)行其測試的用戶界面。這個(gè)插件擴(kuò)展支持無數(shù)種語言，包括JavaScript、ABAP、C、C++、Exlir、Elm、Go、Haxe、Java、Python、Ruby、REST/GraphQL以及其他流行語言和實(shí)現(xiàn)。

下載 Test Explorer UI

特定語言

Python

VS Code 的 Python 插件提供了豐富的支持，包括 Pylance IntelliSense、linting、調(diào)試、代碼導(dǎo)航、代碼格式化、重構(gòu)和變量瀏覽器。

這個(gè)特殊的 Python 插件擴(kuò)展還支持帶有快速啟動(dòng)選項(xiàng)的 Jupyter Notebook，使您的流程易于訪問。

下載 Python 插件

JavaScript Code Snippets

除了支持JavaScript之外，JavaScript代碼片段還支持TypeScript、TypeScript React、Html和Vue代碼片段。所有的代碼片段都帶有最后的;分號(hào)，這里有一個(gè)非分號(hào)的分叉。

JavaScript Code Snippets 包括類的助手，方法和控制臺(tái)方法，以加快編碼。

下載 JavaScript Code Snippets

Quokka.js

Quokka.js是一個(gè)有趣的生產(chǎn)力工具，它讓你在運(yùn)行時(shí)值的幫助下快速創(chuàng)建JavaScript/TypeScript原型。那么Quokka到底是做什么的呢？它告訴你在編碼時(shí)你是如何出錯(cuò)的。它很適合通過現(xiàn)場執(zhí)行和結(jié)果來學(xué)習(xí)和測試。

下載 Quokka.js

Docker

擁有超過 1100 萬的安裝量，Docker 是 Visual Studio Code 上任何與 Docker 相關(guān)的首選插件擴(kuò)展。此擴(kuò)展可讓您輕松構(gòu)建、管理和部署容器化應(yīng)用程序，并提供單擊調(diào)試。您可以使用 Docker 輕松編輯和生成 docker 文件。

下載 Docker 插件

VS Code ES7+ React/Redux/React-Native/JS snippets

JavaScript無處不在，ES7、React、Redux & GraphQL Snippets幾乎涵蓋了你有效地開始現(xiàn)代應(yīng)用開發(fā)所需的一切。這個(gè)插件擴(kuò)展是你可能已經(jīng)在使用的任何其他基于JavaScript的代碼片段的一個(gè)絕佳的替代品。

下載

Reactjs Code Snippets

如果您正在處理 React 項(xiàng)目，Reactjs Code Snippets 可以通過提供整齊打包和預(yù)先編寫的模板供您使用來幫助改善您的工作流程和代碼速度。您所要做的就是開始輸入觸發(fā)命令，您將獲得有用的片段。

下載 Reactjs Code Snippets

HTML CSS Support

HTML CSS Support 是在VS Code中對(duì)HTML和CSS的終極智能感應(yīng)。其功能包括id和class屬性的完成，鏈接和嵌入樣式表，繼承和CSS選擇器的驗(yàn)證。

下載 HTML CSS Support

你不必下載所有的插件來擁有一個(gè)高效的工作空間。你所需要的只是上述每個(gè)類別中的幾個(gè)，就可以開始了，并通過減少你手動(dòng)輸入的代碼量來減少你的編碼時(shí)間。