目錄

1、Prettier - Code formatter

?2、ESLINT

3、Chinese (Simplified) (簡(jiǎn)體中文) Language Pack for Visual Studio Code

4、GitLens — Git supercharged

5、vscode-icons?編輯

6、Remote - SSH

7、Auto Rename Tag

8、Vetur

9、Path Intellisense

10、Auto Close Tag

11、ES7+ React/Redux/React-Native snippets

12、Code Spell Checker

13、npm Intellisens

14、Angular Language Service

15、 Better Comments

?16、Vue Language Features (Volar)

18、Todo Tree?

19、Simple React Snippets

20、JavaScript and TypeScript Nightly

21、Error Lens

22、Highlight Matching Tag

23、Image preview

24、Path Autocomplete

25、CodeSnap

26、Code Runner

27、CSS Peek

28、Duplicate action

29、git-commit-plugin

30、Git Blame

?31、Import Cost

32、VS Code Counter?

35、Vue Peek

36、SVG Viewer

37、Atom One Dark Theme

38、Eclipse Keymap

39、IntelliCode?

40、IntelliCode API Usage Examples

41、Power Mode

?42、Code GPT

1、Prettier - Code formatter

Prettier是一個(gè)代碼格式化插件。它通過(guò)解析代碼并使用自己的規(guī)則重新打印代碼來(lái)強(qiáng)制執(zhí)行一致的樣式，這些規(guī)則考慮了最大行長(zhǎng)度，并在必要時(shí)包裝代碼。

效果如下所示：

2、ESLINT

ESLint靜態(tài)分析代碼以快速發(fā)現(xiàn)問(wèn)題。它內(nèi)置于大多數(shù)文本編輯器中，您可以將ESLint作為持續(xù)集成管道的一部分運(yùn)行。

該擴(kuò)展使用安裝在打開(kāi)的工作區(qū)文件夾中的ESLint庫(kù)。如果文件夾沒(méi)有提供一個(gè)擴(kuò)展程序，則擴(kuò)展程序會(huì)查找全局安裝版本。如果您尚未在本地或全局安裝ESLint，請(qǐng)?jiān)诠ぷ鲄^(qū)文件夾中運(yùn)行npm install eslint進(jìn)行本地安裝，或運(yùn)行npm install -g eslint進(jìn)行全局安裝。

在新文件夾上，您可能還需要?jiǎng)?chuàng)建一個(gè).eslintrc配置文件。您可以使用VS Code命令Create ESLint configuration或在帶有eslint的終端中運(yùn)行npx eslint --init命令來(lái)完成此操作。

?具體配置，可以參考官方文檔：https://eslint.org/

3、Chinese (Simplified) (簡(jiǎn)體中文) Language Pack for Visual Studio Code

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

通過(guò)使用“Configure Display Language”命令顯式設(shè)置 VS Code 顯示語(yǔ)言，可以替代默認(rèn) UI 語(yǔ)言。 按下“Ctrl+Shift+P”組合鍵以顯示“命令面板”，然后鍵入“display”以篩選并顯示“Configure Display Language”命令。按“Enter”，然后會(huì)按區(qū)域設(shè)置顯示安裝的語(yǔ)言列表，并突出顯示當(dāng)前語(yǔ)言設(shè)置。選擇另一個(gè)“語(yǔ)言”以切換 UI 語(yǔ)言。

4、GitLens — Git supercharged

?GitLens在VS Code中增強(qiáng)Git，并在每個(gè)存儲(chǔ)庫(kù)中解鎖未開(kāi)發(fā)的知識(shí)。它可以幫助您通過(guò)Git責(zé)備注釋和CodeLens一目了然地可視化代碼作者身份，無(wú)縫導(dǎo)航和探索Git存儲(chǔ)庫(kù)，通過(guò)豐富的可視化和強(qiáng)大的比較命令獲得有價(jià)值的見(jiàn)解，等等。

可以看到git 的提交記錄：

當(dāng)前行最近提交的作者、日期和消息：

5、vscode-icons

?插件提供文件對(duì)應(yīng)的小圖標(biāo)，能夠更加清新分辨文件的類(lèi)型。

6、Remote - SSH

可以連接到服務(wù)器中，把服務(wù)器代碼拉取到vscode中進(jìn)行，對(duì)服務(wù)器代碼修改和調(diào)試會(huì)比較方便，就是在本地開(kāi)發(fā)一樣。

Remote - SSH擴(kuò)展允許您使用任何帶有SSH服務(wù)器的遠(yuǎn)程計(jì)算機(jī)作為開(kāi)發(fā)環(huán)境。這可以極大地簡(jiǎn)化各種情況下的開(kāi)發(fā)和故障排除。您可以：

• 在您部署到的同一操作系統(tǒng)上進(jìn)行開(kāi)發(fā)，或者使用比本地計(jì)算機(jī)更大、更快或更專(zhuān)業(yè)的硬件。
• 在不同的遠(yuǎn)程開(kāi)發(fā)環(huán)境之間快速切換，并安全地進(jìn)行更新，而無(wú)需擔(dān)心影響本地計(jì)算機(jī)。
• 從多臺(tái)計(jì)算機(jī)或多個(gè)位置訪問(wèn)現(xiàn)有的開(kāi)發(fā)環(huán)境。
• 調(diào)試在其他地方（如客戶(hù)站點(diǎn)或云中）運(yùn)行的應(yīng)用程序。

不需要在本地機(jī)器上安裝源代碼就可以獲得這些好處，因?yàn)閿U(kuò)展可以直接在遠(yuǎn)程機(jī)器上運(yùn)行命令和其他擴(kuò)展。您可以打開(kāi)遠(yuǎn)程計(jì)算機(jī)上的任何文件夾并使用它，就像該文件夾在您自己的計(jì)算機(jī)上一樣。

7、Auto Rename Tag

自動(dòng)重命名成對(duì)的HTML/XML標(biāo)記，與Visual Studio IDE相同。

?例如，修改html標(biāo)簽，下面的閉合標(biāo)簽也會(huì)進(jìn)行同步修改。

8、Vetur

Vue開(kāi)發(fā)必備的插件，主要功能語(yǔ)法高亮顯示，語(yǔ)意突顯，片段，校驗(yàn)，錯(cuò)誤檢測(cè)，格式化，智能感知，調(diào)試，組件數(shù)據(jù)，流行Vue框架和自定義組件的自動(dòng)完成和懸停信息，實(shí)驗(yàn)插值特性，VTI:在CLI上顯示模板類(lèi)型檢查錯(cuò)誤，支持定義全局組件等功能。?

9、Path Intellisense

Visual Studio代碼插件，自動(dòng)完成文件引用。

10、Auto Close Tag

在寫(xiě)標(biāo)簽的時(shí)候，寫(xiě)完開(kāi)始標(biāo)簽，會(huì)自動(dòng)補(bǔ)齊結(jié)束標(biāo)簽。?

自動(dòng)添加HTML/XML關(guān)閉標(biāo)記，與Visual Studio IDE或Sublime Text相同。

特點(diǎn)：

• 在開(kāi)始標(biāo)記的結(jié)束括號(hào)中鍵入時(shí)自動(dòng)添加結(jié)束標(biāo)記
• 插入結(jié)束標(biāo)記后，光標(biāo)位于開(kāi)始標(biāo)記和結(jié)束標(biāo)記之間
• 設(shè)置不會(huì)自動(dòng)關(guān)閉的標(biāo)記列表
• 自動(dòng)關(guān)閉自關(guān)閉標(biāo)簽
• Sublime Text 3支持自動(dòng)關(guān)閉標(biāo)簽
• 使用鍵盤(pán)快捷鍵或命令調(diào)色板手動(dòng)添加關(guān)閉標(biāo)記

11、ES7+ React/Redux/React-Native snippets

ES 7+中的JavaScript和React/Redux片段，帶有VS Code的Babel插件功能。

12、Code Spell Checker

一個(gè)基本的拼寫(xiě)檢查器，可以很好地處理代碼和文檔。

這個(gè)拼寫(xiě)檢查器的目標(biāo)是幫助捕捉常見(jiàn)的拼寫(xiě)錯(cuò)誤，同時(shí)保持誤報(bào)的數(shù)量較低。

13、npm Intellisens

Visual Studio Code插件，在import語(yǔ)句中自動(dòng)完成npm模塊。

使用 cttrl + shiftt + p 輸入npm，選中?npm Intellisens ，然后輸入模塊名就自動(dòng)導(dǎo)入到頁(yè)面光標(biāo)位置了。

14、Angular Language Service

?此擴(kuò)展為Angular模板提供了豐富的編輯體驗(yàn)，包括內(nèi)聯(lián) 和外部模板，包括：

• 完成列表
• AOT診斷消息
• 快速信息
• 轉(zhuǎn)到定義

15、 Better Comments

?Better Comments擴(kuò)展將幫助您在代碼中創(chuàng)建更人性化的注釋。
使用此擴(kuò)展，您將能夠?qū)⒆⑨尫诸?lèi)為：

• 警報(bào)
• 查詢(xún)
• TODO
• 亮點(diǎn)
• 注釋掉的代碼也可以進(jìn)行樣式化，以明確代碼不應(yīng)該出現(xiàn)在那里
• 您可以在設(shè)置中指定任何其他注釋樣式

16、Vue Language Features (Volar)

Vue Language Features是為Vue、Vitepress和petite-vue構(gòu)建的語(yǔ)言支持?jǐn)U展。這是基于@vue/reactivity來(lái)按需計(jì)算一切，以實(shí)現(xiàn)原生TypeScript語(yǔ)言的服務(wù)級(jí)性能。

?17、Vue 3 Snippets

這個(gè)插件基于最新的 Vue 2 及 Vue 3 的 API 添加了 Code Snippets。

這個(gè)插件包含了所有的 Vue.js 2 和 Vue.js 3 的 api 對(duì)應(yīng)的代碼片段。插件的代碼片段如下表格所示，你不需要記住什么snippets，就像往常一樣在 vscode 里寫(xiě)代碼就好了。比如你可以鍵入?vcom?然后按上下鍵選中?VueConfigOptionMergeStrategies?再按Enter鍵，就輸入了Vue.config.optionMergeStrategies了。

?

18、Todo Tree?

這個(gè)擴(kuò)展可以快速搜索（使用ripgrep）您的工作區(qū)，查找TODO和FIXME等注釋標(biāo)記，并在活動(dòng)欄的樹(shù)視圖中顯示它們。可以將視圖從活動(dòng)欄中拖到資源管理器窗格中（或您希望它位于的任何其他位置）。

單擊樹(shù)中的TODO將打開(kāi)文件，并將光標(biāo)放在包含TODO的行上。

找到的TODO也可以在打開(kāi)的文件中突出顯示。

例如，在項(xiàng)目中有很多TODO標(biāo)記，在vscode 可以找出高亮顯示所有標(biāo)記。

19???????、Simple React Snippets

?React代碼段和命令的基本集合。

20、JavaScript and TypeScript Nightly

微軟提供的VS Code擴(kuò)展，使TypeScript（typescript@next）的夜間構(gòu)建成為VS Code的內(nèi)置TypeScript版本，用于支持JavaScript和TypeScript IntelliSense。?

?

21、Error Lens

ErrorLens增強(qiáng)了語(yǔ)言診斷功能，使診斷更加突出，突出了 在由語(yǔ)言生成診斷的整個(gè)行中，并且還內(nèi)聯(lián)地打印消息。

22、Highlight Matching Tag

此擴(kuò)展突出顯示匹配的開(kāi)始和/或結(jié)束標(biāo)記。它還可以選擇在狀態(tài)欄中顯示標(biāo)記的路徑。 盡管VSCode有一些基本的標(biāo)記匹配，但它只是基本的。此擴(kuò)展將嘗試匹配任何位置的標(biāo)簽：從標(biāo)簽屬性，字符串，任何文件，同時(shí)還提供了廣泛的樣式選項(xiàng)，以自定義如何標(biāo)記突出顯示。

官方支持的標(biāo)記：HTML和JSX其他風(fēng)格（XML，Vue，Angular，PHP）應(yīng)該可以工作。

?選中標(biāo)簽，會(huì)進(jìn)行高亮顯示。

23、Image preview

?在標(biāo)簽引入圖片的時(shí)候，鼠標(biāo)放上去可以進(jìn)行圖片的預(yù)覽。

24、Path Autocomplete

?在導(dǎo)入資源的時(shí)候，可自動(dòng)關(guān)聯(lián)出可選的資源。

25、CodeSnap

在VS Code中為您的代碼拍攝漂亮的屏幕截圖！?

?使用說(shuō)明：

1. 打開(kāi)命令面板（Windows和Linux上為Ctrl+Shift+P，OS X上為Cmd+Shift+P），然后搜索CodeSnap。
2. 選擇您要截圖的代碼。
3. 如果需要，調(diào)整屏幕截圖的寬度。
4. 選中，右鍵可以進(jìn)行復(fù)制、剪切，粘貼。

26、Code Runner

運(yùn)行多種語(yǔ)言的代碼段或代碼文件：C，C++，Java，JavaScript，PHP，Python，Perl，Perl，Perl 6，Ruby，Go，Lua，Groovy，PowerShell，BAT/CMD，BASH/SH，F(xiàn)# Script，F(xiàn)#（. 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，科特林，Dart，F(xiàn)ree Pascal，Haskell，Nim，D，Lisp，Kit，V，SCSS，Sass，CUDA，Less，F(xiàn)ortran，Ring，Standard ML，Zig，and custom command。

用法如下所示：

27、CSS Peek

?擴(kuò)展擴(kuò)展了HTML和ejs代碼編輯，支持源代碼中字符串中的css/scss/less（類(lèi)和ID）。

這在很大程度上受到了Brackets中一個(gè)名為CSS內(nèi)聯(lián)編輯器的類(lèi)似功能的啟發(fā)。

?

28、Duplicate action

?在VS Code中復(fù)制文件和目錄的能力。

用法：

第一種選擇：

1. 將鼠標(biāo)懸停在資源管理器中的文件或目錄名上。
2. 右鍵單擊并選擇Duplicate file。
3. 輸入副本的新路徑。

第二個(gè)選擇：

1. 打開(kāi)文件。
2. 按下F1并選擇Duplicate file。
3. 輸入副本的新路徑。

29、git-commit-plugin

自動(dòng)生成git提交消息的插件。

?此擴(kuò)展遵循Angular Team Commit規(guī)范，如下所示：

30、Git Blame

?Git blame將git blame信息添加到vscode兼容視圖中。查看有關(guān)上次修改行的提交以及時(shí)間的信息。單擊消息可查看有關(guān)提交的詳細(xì)信息。可以在設(shè)置中編輯這兩種信息消息。有多個(gè)可用的令牌。下文對(duì)此進(jìn)行了說(shuō)明。

Git Blame在WSL上運(yùn)行得很好，但不能與基于Web瀏覽器的vscode兼容編輯器一起工作。

31、Import Cost

此擴(kuò)展將在編輯器中內(nèi)聯(lián)顯示導(dǎo)入包的大小。 該擴(kuò)展使用webpack來(lái)檢測(cè)導(dǎo)入的大小。?

?

32、VS Code Counter?

• 統(tǒng)計(jì)工作區(qū)或目錄中源代碼的代碼行。
• 真實(shí)的統(tǒng)計(jì)當(dāng)前文件的代碼行。

選中要統(tǒng)計(jì)的目錄，右鍵選中“count lines in directory”，結(jié)果如下所示：

35、Vue Peek

此擴(kuò)展擴(kuò)展了Vue代碼編輯，支持Go To Definition和Peek Definition，支持單文件組件中的組件和文件名，擴(kuò)展名為.vue。 它允許快速跳轉(zhuǎn)到或窺視作為組件（從模板）或模塊導(dǎo)入（從腳本）引用的文件。?

36、SVG Viewer

svg格式文件，可以進(jìn)行預(yù)覽的插件。?

?

37、Atom One Dark Theme

?VSCode主題基于Atom的One Dark主題。市場(chǎng)上評(píng)價(jià)最高的One Dark主題端口，具有完整的Workbench主題。

38、Eclipse Keymap

這個(gè)擴(kuò)展將流行的Eclipse鍵盤(pán)快捷鍵移植到Visual Studio Code。 Eclipse鍵綁定為Windows、Linux和macOS提供。

如果以前習(xí)慣了eclipse工具開(kāi)發(fā)，想用其操作的快捷鍵，這個(gè)插件可以使用eclpse工具的快捷鍵方式在vscode中寫(xiě)代碼了，還是非常爽的。

39、IntelliCode?

Visual?Studio IntelliCode擴(kuò)展為Visual Studio Code中的Python，TypeScript/JavaScript和Java開(kāi)發(fā)人員提供AI輔助開(kāi)發(fā)功能，并基于對(duì)代碼上下文的理解與機(jī)器學(xué)習(xí)相結(jié)合。

?您需要Visual Studio Code 2018年10月版本1.29.1或更高版本才能使用此擴(kuò)展。對(duì)于每種支持的語(yǔ)言，請(qǐng)參閱下面的“入門(mén)”部分，以了解您需要安裝和配置以獲得IntelliCode完成的任何其他先決條件。

40、IntelliCode API Usage Examples

?你是否希望可以輕松地訪問(wèn)你使用的API的代碼示例？IntelliCode API使用示例使其成為現(xiàn)實(shí)?，F(xiàn)在，只需單擊一下，您就可以訪問(wèn)超過(guò)10萬(wàn)個(gè)不同API的示例！

IntelliCode API用法示例是一項(xiàng)功能，可讓您查看其他開(kāi)發(fā)人員如何使用給定函數(shù)的真實(shí)示例。顯示的示例來(lái)自GitHub上的公共開(kāi)源存儲(chǔ)庫(kù)。

此功能目前支持Python、JavaScript和TypeScript（包括JSX和TSX文件）。

41、Power Mode

這是在vscode寫(xiě)代碼的時(shí)候，伴隨著特效效果，如下所示：

粒子效果（默認(rèn)）

火焰效果

42、Code GPT

這是一款在vscode中使用chatgpt的插件，使用官方OpenAI API或其他AI提供商在文本編輯器中實(shí)時(shí)獲取代碼建議。如需了解更多信息，請(qǐng)?jiān)L問(wèn)codegpt.co??? 并閱讀安裝說(shuō)明。

?

?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-483611.html

到了這里，關(guān)于Visual Studio Code 珍藏好久的插件推薦的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！