2024 最新最全 VS Code 插件推薦！

作者：CUGGZ 2024-06-26 10:16:21

開發(fā) 前端

用于在代碼塊周圍添加包裝代碼片段。該插件支持語言標(biāo)識(shí)符、多選區(qū)操作、完全可自定義、自定義包裝代碼片段，并為每個(gè)包裝代碼片段單獨(dú)分配快捷鍵。

Visual Studio Code 是由微軟開發(fā)的一款開源的代碼編輯器，它有了一個(gè)豐富的插件市場(chǎng)，提供了很多實(shí)用的插件。本文就來分享 2024 年開發(fā)必備的 VS Code 插件！

圖片

功能強(qiáng)化

駝峰翻譯助手

糾結(jié)怎么取變量? 中文一鍵翻譯轉(zhuǎn)換成常用大小駝峰等格式。

圖片

change-case

Change-case插件提供了一種簡(jiǎn)單的方法來將單詞或變量名更改為各種情況，包括駝峰命名（camelCase）、下劃線命名（snake_case）、標(biāo)題命名（TitleCase）等多種格式。

圖片

Codelf

變量命名神器，搜索 Github、Bitbucket、Google Code、Codeplex、Sourceforge、Fedora Project、GitLab 中的項(xiàng)目以查找實(shí)際使用的變量名稱。

圖片

Surround

圖片

Duplicate Action

一鍵復(fù)制并創(chuàng)建文件或文件夾，提高了開發(fā)過程中的文件操作效率。

圖片

CSS Peek

它允許開發(fā)者直接從HTML文檔中快速跳轉(zhuǎn)到匹配的CSS樣式定義，并提供預(yù)覽功能，從而大大提高CSS樣式的查找和編輯效率。

圖片

Regex Previewer

可以實(shí)時(shí)預(yù)覽正則表達(dá)式匹配結(jié)果，并適用于多種前端框架和語言，同時(shí)提供快捷鍵操作、全局和多行選項(xiàng)等便捷功能，以提升開發(fā)效率。

圖片

Code Spell Checker

Code Spell Checker 插件可以檢查單詞拼寫是否出現(xiàn)錯(cuò)誤，檢查的規(guī)則遵循 camelCase （駝峰拼寫法）。

圖片

Markdown Preview Enhanced

支持實(shí)時(shí)預(yù)覽 Markdown 文件效果，并具備導(dǎo)出 PDF、支持?jǐn)?shù)學(xué)公式、流程圖等多種高級(jí)功能，提供了豐富的定制選項(xiàng)和兼容性，極大地提升了 Markdown 文檔的編輯和預(yù)覽體驗(yàn)。

圖片

Markdown All in One

用于提供Markdown編輯的全方位支持，包括實(shí)時(shí)預(yù)覽、語法提示、目錄生成、表格生成等多種功能。

圖片

i18n-ally

主要用于國(guó)際化多語言開發(fā)，提供內(nèi)聯(lián)提示、快速修改key值對(duì)應(yīng)的語言文件、統(tǒng)一管理翻譯、自動(dòng)翻譯等功能。

圖片

GitHub Repositories

在 VS Code 中快速打開 Github 倉(cāng)庫(kù)，無需克隆到本地。

圖片

Turbo Console Log

一鍵生成有意義的 console.log 消息，支持多語言、多光標(biāo)操作，提供可定制的日志類型和輸出格式，提高調(diào)試效率。

圖片

indent-rainbow

一款代碼縮進(jìn)可視化插件，它通過為文本前面的縮進(jìn)著色，使縮進(jìn)更具可讀性。

圖片

Remote-SSH

允許開發(fā)者通過 SSH 協(xié)議連接到遠(yuǎn)程服務(wù)器或虛擬機(jī)，直接在本地 VS Code 編輯器中操作遠(yuǎn)程服務(wù)器上的代碼，實(shí)現(xiàn)無縫的遠(yuǎn)程開發(fā)體驗(yàn)。主要功能包括遠(yuǎn)程連接、無縫的代碼編輯和調(diào)試、擴(kuò)展兼容性、多種連接選項(xiàng)、優(yōu)化的性能以及支持多個(gè)遠(yuǎn)程服務(wù)器同時(shí)連接等。

圖片

前端框架

ES7+ React/Redux/React-Native snippets

提供了許多速記前綴來加速開發(fā)并幫助開發(fā)人員為 React、Redux、GraphQL 和 React Native 創(chuàng)建代碼片段和語法。

圖片

Typescript React Code Snippets

此插件包含了使用 Typescript 的 React 代碼片段，它支持 Typescript(.ts) 或 TypeScript React (.tsx) 等語言。以下是使用 TypeScript 創(chuàng)建 React 組件的兩個(gè)片段。

默認(rèn)導(dǎo)出 React：

圖片

導(dǎo)出 React 組件：

圖片

Vue - Official

Vue 官方擴(kuò)展。

圖片

Vue 3 Snippets

這個(gè)插件包含了所有的 Vue.js 2 和 Vue.js 3 的 api 對(duì)應(yīng)的代碼片段。

圖片

Vue VSCode Snippets

此插件將 Vue 2 Snippets 和 Vue 3 Snippets 添加到 Visual Studio Code 中。

圖片

React Native Tools

允許在不同的模擬器或仿真器上輕松運(yùn)行和調(diào)試代碼，從命令面板快速運(yùn)行 react-native 命令，而無需在終端中手動(dòng)運(yùn)行命令，并使用 IntelliSense 瀏覽 React Native 的函數(shù)、對(duì)象和參數(shù)等。

圖片

JavaScript (ES6) code snippets

通過此插件可以使用預(yù)定義的 ES6 語法片段速記，從而提高開發(fā)效率。這個(gè) VS Code 插件可以自定義，因?yàn)樗惶囟ㄓ谌魏慰蚣堋?/p>

圖片

Tailwind CSS IntelliSense

專為使用 Tailwind CSS 的開發(fā)者設(shè)計(jì)，提供實(shí)時(shí)的類名建議、自動(dòng)完成、文檔預(yù)覽等功能，以提升 Tailwind CSS 的開發(fā)效率和代碼質(zhì)量。

圖片

Git 集成

GitLens

該插件增強(qiáng)了 VS Code 中的 Git，并從每個(gè)存儲(chǔ)庫(kù)中釋放隱藏?cái)?shù)據(jù)。可以快速查看代碼的編寫者、輕松導(dǎo)航和探索 Git 存儲(chǔ)庫(kù)、通過豐富的可視化效果和強(qiáng)大的比較命令獲取有效信息，以及執(zhí)行更多操作，幫助我們更好地理解代碼。

圖片

Git History

該插件用于查看 Git 日志和文件歷史記錄并比較分支或提交。

圖片

Git Graph

Git Graph 插件用于可視化查看存儲(chǔ)庫(kù)的 Git 操作，并從圖形中輕松執(zhí)行Git操作。

圖片

統(tǒng)計(jì)分析

Import Cost

在項(xiàng)目中導(dǎo)入多個(gè)包時(shí)可能會(huì)出現(xiàn)性能問題，Import Cost 就用于查看將特定庫(kù)導(dǎo)入項(xiàng)目的成本。該插件會(huì)顯示導(dǎo)入庫(kù)的大小，如果大小為綠色，則表示庫(kù)很小，而紅色表示庫(kù)很大。

圖片

Time Master

從編程活動(dòng)中自動(dòng)生成的指標(biāo)、見解和時(shí)間跟蹤。它是一個(gè)開源項(xiàng)目，獨(dú)立于網(wǎng)絡(luò)環(huán)境，安全輕量。

圖片

VS Code Counter

VS Code Counter 插件用于統(tǒng)計(jì)項(xiàng)目代碼的行數(shù)，安裝插件之后，右鍵點(diǎn)擊需要統(tǒng)計(jì)代碼的文件夾，選擇“Count lines in directory”，這時(shí)就會(huì)在項(xiàng)目根目錄出現(xiàn)一個(gè)名為 .VSCodeCounter 的文件夾，包含了不同格式的結(jié)果，編輯器會(huì)打開其中的的 .md 格式。結(jié)果中會(huì)顯示代碼總行數(shù)，不同格式文件行數(shù)，不同路徑文件函數(shù)等。代碼行數(shù)中有純代碼行數(shù)、空白行數(shù)、注釋行數(shù)。

圖片

AI 編程輔助

GitHub Copilot

GitHub Copilot 是 Github 推出的一款 AI 結(jié)對(duì)編程工具，可以幫助開發(fā)者更快、更智能地編寫代碼，不過該插件并不是免費(fèi)的。

圖片

Tabnine

Tabnine 是一款 AI 代碼助手，可加速和簡(jiǎn)化軟件開發(fā)，同時(shí)保證代碼的私密性、安全性和合規(guī)性。

圖片

Codeium

一個(gè)基于 AI 技術(shù)的免費(fèi)代碼加速工具包，為VSCode提供70多種語言的快速自動(dòng)補(bǔ)全、聊天和搜索功能，支持IDE內(nèi)聊天和多種編程語言的建議。

圖片

TONGYI Lingma

通義靈碼是阿里云推出的一款基于通義大模型的智能編碼輔助工具，提供實(shí)時(shí)續(xù)寫、自然語言生成代碼、單元測(cè)試生成、代碼注釋生成、代碼解釋、研發(fā)智能問答、異常報(bào)錯(cuò)排查等能力。

圖片

CodeGeeX

CodeGeeX 是一款基于大模型的智能編程助手，它完善了代碼的生成與補(bǔ)全，自動(dòng)為代碼添加注釋，此外，它還針對(duì)代碼問題的智能問答，當(dāng)然還包括代碼解釋，實(shí)現(xiàn)代碼，修復(fù)代碼bug等非常豐富的功能。

圖片

代碼美化

Highlight Matching Tag

用于實(shí)時(shí)高亮顯示匹配的標(biāo)簽對(duì)，方便用戶在 HTML 或 XML 代碼中快速找到配對(duì)的標(biāo)簽。它可以在點(diǎn)擊一個(gè)標(biāo)簽時(shí)，自動(dòng)顯示配對(duì)的標(biāo)簽，并通過下劃線或其他樣式來指示它們之間的對(duì)應(yīng)關(guān)系。

圖片

TODO Highlight

實(shí)時(shí)高亮顯示代碼中的TODO、FIXME等標(biāo)記，支持自定義關(guān)鍵字和正則表達(dá)式匹配，方便開發(fā)者快速識(shí)別、管理和追蹤待辦事項(xiàng)。

圖片

Todo Tree

用于在Visual Studio Code中搜索、管理和高亮代碼中的待辦事項(xiàng)標(biāo)記（如TODO、FIXME等）。它支持自定義標(biāo)簽、顏色編碼、實(shí)時(shí)更新、過濾與排序等功能，并以可視化的樹形結(jié)構(gòu)展示待辦事項(xiàng)列表，方便開發(fā)者快速定位、編輯和跟蹤代碼中的待辦事項(xiàng)。

圖片

Better comments

該插件對(duì)不同類型的注釋會(huì)附加了不同的顏色，更加方便區(qū)分，幫助我們?cè)诖a中創(chuàng)建更人性化的注釋。

圖片

Colorize

Colorize 會(huì)給顏色代碼增加一個(gè)當(dāng)前匹配代碼顏色的背景。它通過 CSS 變量、預(yù)處理器變量、hsl/hsla 顏色、跨瀏覽器顏色、exa、rgb、rgba和argb的彩色背景將 CSS 顏色可視化，幫助開發(fā)者快速區(qū)分顏色。

圖片

Image preview

通過此插件，當(dāng)鼠標(biāo)懸浮在圖片的鏈接上時(shí)，可以實(shí)時(shí)預(yù)覽該圖片，除此之外，還可以看到圖片的大小和分辨率。

圖片

CodeSnap

CodeSnap 用于對(duì)代碼的進(jìn)行截圖和共享。屏幕截圖可以用文本或形狀進(jìn)行注釋，并通過鏈接共享或包含在網(wǎng)站或文檔中。只需使用 ctrl + shift + P 并輸入 CodeSnap，然后按回車鍵，CodeSnap 窗口就會(huì)打開。

圖片

Error Lens

Error Lens 是一款把代碼檢查(錯(cuò)誤、警告、語法問題)進(jìn)行突出顯示的插件。Error Lens 通過使診斷更加突出，增強(qiáng)了語言的診斷功能，突出顯示了由該語言生成的診斷所在的整行，并在代碼行的位置以行方式在線打印了診斷消息。

圖片

Pretty TypeScript Errors

Pretty TypeScript Errors 旨在使 TypeScript 的錯(cuò)誤信息更易讀、更人性化。隨著 TypeScript 類型復(fù)雜性的增加，錯(cuò)誤消息可能會(huì)變得混亂不堪，充滿了難以理解的括號(hào)和“...”。這個(gè)擴(kuò)展通過重新格式化或解釋 TypeScript 編譯器產(chǎn)生的原始錯(cuò)誤信息，來幫助開發(fā)者更容易地理解發(fā)生了什么。

圖片