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

圖片

功能強化

駝峰翻譯助手

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

圖片

change-case

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

圖片

Codelf

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

圖片

Surround

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

圖片

Duplicate Action

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

圖片

CSS Peek

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

圖片

Regex Previewer

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

圖片

Code Spell Checker

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

圖片

Markdown Preview Enhanced

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

圖片

Markdown All in One

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

圖片

i18n-ally

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

圖片

GitHub Repositories

在 VS Code 中快速打開 Github 倉庫，無需克隆到本地。

圖片

Turbo Console Log

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

圖片

indent-rainbow

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

圖片

Remote-SSH

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

圖片

前端框架

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 組件的兩個片段。

• 默認導出 React：

圖片

• 導出 React 組件：

圖片

Vue - Official

Vue 官方擴展。

圖片

Vue 3 Snippets

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

圖片

Vue VSCode Snippets

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

圖片

React Native Tools

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

圖片

JavaScript (ES6) code snippets

通過此插件可以使用預定義的 ES6 語法片段速記，從而提高開發(fā)效率。這個 VS Code 插件可以自定義，因為它不特定于任何框架。

圖片

Tailwind CSS IntelliSense

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

圖片

Git 集成

GitLens

該插件增強了 VS Code 中的 Git，并從每個存儲庫中釋放隱藏數(shù)據(jù)?？梢钥焖俨榭创a的編寫者、輕松導航和探索 Git 存儲庫、通過豐富的可視化效果和強大的比較命令獲取有效信息，以及執(zhí)行更多操作，幫助我們更好地理解代碼。

圖片

Git History

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

圖片

Git Graph

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

圖片

統(tǒng)計分析

Import Cost

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

圖片

Time Master

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

圖片

VS Code Counter

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

圖片

AI 編程輔助

GitHub Copilot

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

圖片

Tabnine

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

圖片

Codeium

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

圖片

TONGYI Lingma

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

圖片

CodeGeeX

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

圖片

代碼美化

Highlight Matching Tag

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

圖片

TODO Highlight

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

圖片

Todo Tree

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

圖片

Better comments

該插件對不同類型的注釋會附加了不同的顏色，更加方便區(qū)分，幫助我們在代碼中創(chuàng)建更人性化的注釋。

圖片

Colorize

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

圖片

Image preview

通過此插件，當鼠標懸浮在圖片的鏈接上時，可以實時預覽該圖片，除此之外，還可以看到圖片的大小和分辨率。

圖片

CodeSnap

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

圖片

Error Lens

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

圖片

Pretty TypeScript Errors

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

圖片

編輯器美化

Power Mode

Power Mode 旨在通過添加視覺特效來增強編程體驗，通過了諸如粒子效果、煙火、火焰、魔法效果等特效，讓編程過程更加生動有趣。

圖片

One Dark Pro

一款編輯器主題。

圖片

Dracula Official

一款編輯器主題。

圖片

GitHub Theme

一款編輯器主題。

圖片

Winter Is Coming Theme

一款編輯器主題。

圖片

Ayu

一款編輯器主題。

圖片

vscode-icons

VSCode 官方出品的圖標庫。

圖片

Material Icon Theme

該插件根據(jù)最新的 Material Design 主題為文件和文件夾提供圖標。它可以幫助我們識別文件并為編輯器添加自定義的外觀。

圖片

Peacock

允許開發(fā)者為 Visual Studio Code 的工作區(qū)界面（如側(cè)邊欄、底欄和標題欄）自定義顏色，以區(qū)分不同的項目或編碼環(huán)境。

圖片

你平時還會使用哪些好用的 VS Code 插件？