Visual Studio Code是一個(gè)輕量級(jí)但功能強(qiáng)大的源代碼編輯器，輕量級(jí)指的是下載下來(lái)的Visual Studio Code其實(shí)就是一個(gè)簡(jiǎn)單的編輯器，強(qiáng)大指的是支持多種語(yǔ)言的環(huán)境插件拓展，也正是因?yàn)檫@種支持插件式安裝環(huán)境開(kāi)發(fā)讓Visual Studio Code成為了開(kāi)發(fā)語(yǔ)言工具中的霸主，讓其同時(shí)支持開(kāi)發(fā)多種語(yǔ)言成為了可能。

俗話說(shuō)的好：“工欲善其事，必先利其器”，安裝一些實(shí)用插件對(duì)自己日常的開(kāi)發(fā)和工作效率能夠大大的提升，避免996從選一款好的開(kāi)發(fā)插件開(kāi)始。

以下是我整理的一些比較實(shí)用的Visual Studio Code插件希望對(duì)大家有用，大家有更好的插件推薦可在文末留言。

Visual Studio Code相關(guān)鏈接地址

Visual Studio Code官網(wǎng)地址：https://code.visualstudio.com/

Visual Studio Code GitHub源碼地址：https://github.com/Microsoft/vscode

Visual Studio Code插件市場(chǎng)地址：https://marketplace.visualstudio.com/vscode

Visual Studio Code拓展插件安裝

快捷鍵：Ctrl+Shift+X進(jìn)入拓展面板，到應(yīng)用商店文本框中搜索拓展。

適用于Visual Studio Code的中文（簡(jiǎn)體）語(yǔ)言包

拓展名稱：Chinese (Simplified) Language Pack for Visual Studio Code

插件市場(chǎng)地址：https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hans

拓展描述：此中文（簡(jiǎn)體）語(yǔ)言包為 VS Code 提供本地化界面。

Visual Studio Code C#開(kāi)發(fā)工具包

(1) C# Dev Kit for Visual Studio Code

C# Dev Kit for Visual Studio Code（C# Dev Kit）是一個(gè)擴(kuò)展工具，它為您的C#開(kāi)發(fā)提供了一系列強(qiáng)大的功能和實(shí)用工具，以幫助您更高效地編寫、調(diào)試和維護(hù)代碼。它能夠在Windows、macOS、Linux甚至Codespace等各種開(kāi)發(fā)環(huán)境中使用，提升您的C#開(kāi)發(fā)體驗(yàn)。

打開(kāi)VS Code=>找到拓展(Ctrl+Shift+x)=>搜索C# Dev Kit=>點(diǎn)擊安裝

(2) C# for Visual Studio Code

C# for Visual Studio Code（C# for VS Code）是C# Dev Kit的一部分，為Visual Studio Code提供了功能豐富的C#語(yǔ)言支持。

打開(kāi)VS Code=>找到拓展(Ctrl+Shift+x)=>搜索C#=>點(diǎn)擊安裝

Visual Studio代碼的圖標(biāo)

拓展名稱：vscode-icons

插件市場(chǎng)地址：https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

拓展描述：vscode-icons不僅能夠給文件夾、文件添加上舒適的圖標(biāo)，而且可以自動(dòng)檢測(cè)項(xiàng)目，根據(jù)項(xiàng)目不同功能配上不同圖標(biāo)，例如，git、Markdown、配置項(xiàng)、工具類等。

TabNine代碼補(bǔ)全工具

拓展名稱：Tabnine AI Autocomplete for Javascript, Python, Typescript, PHP, Go, Java, Ruby & more

插件市場(chǎng)地址：https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode

拓展描述：Tabnine 是一款 AI 代碼補(bǔ)全插件，適用于 JavaScript、Python、Java、TypeScript 和其他所有編程語(yǔ)言。它通過(guò)自動(dòng)補(bǔ)全代碼來(lái)提高開(kāi)發(fā)人員的工作效率。TabNine開(kāi)箱即用。響應(yīng)速度快：通常會(huì)在不到10毫秒的時(shí)間內(nèi)生成建議列表。

Copilot AI輔助編程工具

拓展名稱：GitHub Copilot

插件市場(chǎng)地址：https://marketplace.visualstudio.com/items?itemName=GitHub.copilot

拓展描述：是一個(gè)提供 AI 輔助編程的工具，它在您編碼時(shí)會(huì)提供類似自動(dòng)補(bǔ)全的建議。您可以通過(guò)開(kāi)始編寫您想要使用的代碼，或者編寫自然語(yǔ)言評(píng)論描述您希望代碼完成的功能，來(lái)獲取 GitHub Copilot 的建議。

CodeGeeX：AI 代碼自動(dòng)完成、聊天、自動(dòng)注釋

拓展名稱：CodeGeeX

插件市場(chǎng)地址：https://marketplace.visualstudio.com/items?itemName=aminer.codegeex

拓展描述：CodeGeeX 是一款功能強(qiáng)大的基于 LLM 的智能編程助手。它提供代碼生成/完成、注釋生成、代碼翻譯和基于人工智能的聊天等功能，幫助開(kāi)發(fā)人員顯著提高工作效率。CodeGeeX 支持多種編程語(yǔ)言。

Docker for Visual Studio Code

拓展名稱：Docker for Visual Studio Code

插件市場(chǎng)地址：https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker

拓展描述：通過(guò) Docker 擴(kuò)展，可以輕松地從 Visual Studio Code 構(gòu)建、管理和部署容器化應(yīng)用程序。它還能在容器內(nèi)一鍵調(diào)試 Node.js、Python 和 .NET。

自動(dòng)添加關(guān)閉標(biāo)簽

拓展名稱：Auto Close Tag

插件市場(chǎng)地址：https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

拓展描述：自動(dòng)添加HTML / XML關(guān)閉標(biāo)記，與Visual Studio IDE或Sublime Text相同（對(duì)前端開(kāi)發(fā)的小伙伴非常有用）。

Vs Code 最好的代碼注釋擴(kuò)展插

拓展名稱：Better Comments

插件市場(chǎng)地址：hhttps://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

拓展描述：更好的注釋擴(kuò)展將幫助您在代碼中創(chuàng)建更人性化的注釋。使用此擴(kuò)展，您將能夠?qū)⒆⑨尫诸悶椋壕瘓?bào)、查詢、待辦事項(xiàng)、強(qiáng)調(diào)、注釋掉的代碼也可以設(shè)置樣式，以使代碼不應(yīng)該存在、您可以在設(shè)置中指定任何其他注釋樣式。

查找并修復(fù)JavaScript代碼中的問(wèn)題

拓展名稱：ESLint

插件市場(chǎng)地址：https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

拓展描述：ESLint 是一個(gè)代碼規(guī)范和錯(cuò)誤檢查工具，有以下幾個(gè)特性

• 所有東西都是可以插拔的。你可以調(diào)用任意的rule api或者formatter api 去打包或者定義rule or formatter。
• 任意的rule 都是獨(dú)立的。
• 沒(méi)有特定的coding style，你可以自己配置。

Vs Code中好用的Git源代碼管理插件GitLens

拓展名稱：GitLens

插件市場(chǎng)地址：https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

拓展描述：GitLens內(nèi)置到Visual Studio代碼Git的能力。它可以幫助您通過(guò)Git責(zé)任注釋和代碼鏡頭一目了然地看到代碼作者的身份，無(wú)縫地導(dǎo)航和瀏覽 Git存儲(chǔ)庫(kù)，通過(guò)功能強(qiáng)大的比較命令獲得有價(jià)值的見(jiàn)解，等等。

Vs Code 源代碼管理插件GitLens使用指南：https://www.jianshu.com/p/95a1a06ac0fb

Git歷史記錄查看

拓展名稱：Git History

插件市場(chǎng)地址：https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

拓展描述：Git歷史記錄，搜索和更多內(nèi)容（包括git log）。

流程圖神器-Drawio

拓展名稱：Drawio Preview

插件市場(chǎng)地址：https://marketplace.visualstudio.com/items?itemName=purocean.drawio-preview

拓展描述：在Vs Code中預(yù)覽繪圖圖文件。

Vs Code中使用Drawio：https://blog.csdn.net/huanglin6/article/details/106239570

Import、Require模塊路徑自動(dòng)補(bǔ)全

拓展名稱：Path Intellisense

插件市場(chǎng)地址：https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

拓展描述：在編輯器中輸入對(duì)應(yīng)文件的路徑，會(huì)自動(dòng)補(bǔ)全（在Import、Require導(dǎo)入/引入模塊時(shí)非常便捷好用）。

Vue開(kāi)發(fā)必備-Vetur（VS Code的Vue工具）

拓展名稱：Vetur

插件市場(chǎng)地址：https://marketplace.visualstudio.com/items?itemName=octref.vetur

拓展描述：Vue多功能集成插件，包括：語(yǔ)法高亮，智能提示，emmet，錯(cuò)誤提示，格式化，自動(dòng)補(bǔ)全，debugger。vscode官方欽定Vue插件，Vue開(kāi)發(fā)者必備。

幫助Vue開(kāi)發(fā)者編寫更高效的Element-UI代碼

拓展名稱：vscode-element-helper

插件市場(chǎng)地址：https://marketplace.visualstudio.com/items?itemName=ElemeFE.vscode-element-helper

拓展描述：VSCode-Element-Helper是Element-UI的VS Code擴(kuò)展，Element-UI是一個(gè)很棒的庫(kù)。越來(lái)越多的項(xiàng)目使用它。因此，為了幫助開(kāi)發(fā)人員通過(guò)Element-UI編寫更高效的代碼。

Vue VSCode片段

拓展名稱：Vue VSCode Snippets

插件市場(chǎng)地址：https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets

拓展描述：Vue 語(yǔ)法片段擴(kuò)展。

Angular開(kāi)發(fā)必備VS Code拓展

拓展名稱：Angular Language Service

插件市場(chǎng)地址：https://marketplace.visualstudio.com/items?itemName=Angular.ng-template

拓展描述：Visual Studio Code 的 Angular Language Service 擴(kuò)展提供了與 Angular 項(xiàng)目相關(guān)的語(yǔ)言支持和功能，以提高開(kāi)發(fā)人員在 VS Code 中的 Angular 開(kāi)發(fā)體驗(yàn)。

以下是這個(gè)擴(kuò)展的主要作用：

• 自動(dòng)完成（Autocomplete）
• 快速信息查看（Quick Info）
• 導(dǎo)航至定義（Go to Definition）
• AOT（Ahead of Time）診斷信息

Vs Code代碼運(yùn)行器

拓展名稱：Code Runner

插件市場(chǎng)地址：https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

拓展描述：運(yùn)行多種語(yǔ)言的代碼段或代碼文件C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, Lisp, Kit, V, SCSS, Sass, CUDA,和自定義命令。

Visual Studio代碼的圖標(biāo)字體

拓展名稱：Icon Fonts

插件市場(chǎng)地址：https://marketplace.visualstudio.com/items?itemName=idleberg.icon-fonts

拓展描述：icon fonts是一款提供VS Code圖標(biāo)、字體縮寫的的插件。雖然看上去很不起眼，但是對(duì)于前端開(kāi)發(fā)，這款工具可以說(shuō)能夠極大的提高開(kāi)發(fā)效率。通過(guò)一些縮寫，能夠快速補(bǔ)全icon fonts相關(guān)的代碼片段，這樣能夠減少80%以上的手動(dòng)輸入內(nèi)容。icon fonts支持html、css、less、sass、scss、stylus、jsx、blade、vue。

Gitlink是一款輔助和增強(qiáng)VS Code GitHub使用的插件

拓展名稱：Gitlink

插件市場(chǎng)地址：https://marketplace.visualstudio.com/items?itemName=qezhu.gitlink

拓展描述：gitlink是一款輔助和增強(qiáng)VS Code GitHub使用的插件。

它具有如下2個(gè)特性：

• 轉(zhuǎn)到當(dāng)前文件的在線鏈接。
• 復(fù)制當(dāng)前文件的在線鏈接到剪切板。

GraphQL拓展

拓展名稱：GraphQL

插件市場(chǎng)地址：https://marketplace.visualstudio.com/items?itemName=mquandalle.graphql

拓展描述：GraphQL擴(kuò)展包括自動(dòng)完成功能它會(huì)在您鍵入時(shí)建議在查詢中使用的字段和參數(shù)，從而更容易編寫有效的 GraphQL 代碼。此功能可為您節(jié)省時(shí)間并降低出現(xiàn)語(yǔ)法錯(cuò)誤的可能性。它安裝了一個(gè)內(nèi)置的 linter，可以檢查您的代碼是否有錯(cuò)誤并提出修復(fù)建議。使用此擴(kuò)展可防止 GraphQL 錯(cuò)誤并提高效率。