2023 年最新最全 VSCode 插件推薦！
Visual Studio Code 是由微軟開發的一款免費的、針對於編寫現代 Web 和雲應用的跨平臺源代碼編輯器。它包含了一個豐富的插件市場，提供了很多實用的插件。下面就來分享 2023 年前端必備的 VS Code 插件！
前端框架
ES7+ React/Redux/React-Native snippets
該插件提供了許多速記前綴來加速開發並幫助開發人員爲 React、Redux、GraphQL 和 React Native 創建代碼片段和語法。
VSCode React Refactor
這是一個專門爲 React 開發人員設計的 VS Code 擴展。在處理大型項目時，重構可能很有挑戰性。可以使用 VSCode React Refactor 快速重構代碼，它會將 JSX 代碼片段提取到新的類、組件中。此外，它還支持 TypeScript、TSX、常規函數、類和箭頭函數。
Simple React Snippets
該插件提供了一組精心挑選的 React 代碼片段，可以通過輸入幾個字母輕鬆地將其添加到代碼中。例如，輸入 imr 會將 React 導入到組件中。
Typescript React Code Snippets
此插件包含了使用 Typescript 的 React 代碼片段，它支持 Typescript(.ts) 或 TypeScript React (.tsx) 等語言。以下是使用 TypeScript 創建 React 組件的兩個片段。
- 默認導出 React：
- 導出 React 組件：
Vue Language Features (Volar)
默認情況下，我們的 Vue 組件看起來像這樣：
隨着 Vue 3 + TypeScript 越來越流行，Vetur（Vue 的官方 VS Code 擴展）開始出現問題，例如，將 Vue 與 TypeScript 一起使用時 CPU 使用率過高，或者不支持 Vue 3 的新 <script setup> 語法。而 Volar 就解決了 Vetur 的問題，併爲 Vue 3 + TypeScript 用戶提供了最佳的開發體驗。它爲 Vue 3 提供完整的語言支持，包括標準的單文件組件 (SFC) 語法及其最新添加的 <script setup>。
Vue 3 Snippets
這個插件包含了所有的 Vue.js 2 和 Vue.js 3 的 api 對應的代碼片段。
Vue VSCode Snippets
此插件將 Vue 2 Snippets 和 Vue 3 Snippets 添加到 Visual Studio Code 中。
React Native Tools
React Native Tools 擴展由 Microsoft 團隊構建，它爲 React Native 項目提供了一個開發環境。該插件允許在不同的模擬器或仿真器上輕鬆運行和調試代碼，從命令面板快速運行 react-native 命令，而無需在終端中手動運行命令，並使用 IntelliSense 瀏覽 React Native 的函數、對象和參數等。
JavaScript (ES6) code snippets
通過此插件可以使用預定義的 ES6 語法片段速記，從而提高開發效率。這個 VS Code 插件可以自定義，因爲它不特定於任何框架。
Git 集成
GitLens
該插件增強了 VS Code 中的 Git，並從每個存儲庫中釋放隱藏數據。可以快速查看代碼的編寫者、輕鬆導航和探索 Git 存儲庫、通過豐富的可視化效果和強大的比較命令獲取有效信息，以及執行更多操作，幫助我們更好地理解代碼。
Git History
該插件用於查看 Git 日誌和文件歷史記錄並比較分支或提交。
Git Graph
Git Graph 插件用於可視化查看存儲庫的 Git 操作，並從圖形中輕鬆執行 Git 操作。
數據分析
Import Cost
在項目中導入多個包時可能會出現性能問題，Import Cost 就用於查看將特定庫導入項目的成本。該插件會顯示導入庫的大小，如果大小爲綠色，則表示庫很小，而紅色表示庫很大。
Time Master
從編程活動中自動生成的指標、見解和時間跟蹤。它是一個開源項目，獨立於網絡環境，安全輕量。
VS Code Counter
VS Code Counter 插件用於統計項目代碼的行數，安裝插件之後，右鍵點擊需要統計代碼的文件夾，選擇 “Count lines in directory”，這時就會在項目根目錄出現一個名爲 .VSCodeCounter 的文件夾，包含了不同格式的結果，編輯器會打開其中的的 .md 格式。結果中會顯示代碼總行數，不同格式文件行數，不同路徑文件函數等。代碼行數中有純代碼行數、空白行數、註釋行數。
功能強化
Duplicate Action
開發時我們可以能會遇到需要複製文件（組件）的情況，默認情況下，必須右鍵單擊該文件，然後單擊複製。右鍵單擊要將文件複製到的文件夾，然後單擊粘貼。再次右鍵單擊該文件並重命名。
使用該插件，當右鍵單擊文件時，將看到一個新的 “Duplicate file or directory” 選項。單擊它，輸入文件的新名稱，然後按回車鍵即可。
npm Intellisense
該插件爲 import 語句中的 npm 模塊提供了自動完成功能。npm 模塊的所有導入都會使用此擴展自動處理。
Path intellisense
該插件用於自動補全文件名。當 import 其它文件時，能夠對文件進行提示，快速補全要引入的文件名。
Auto Rename Tag
使用該插件，可以在重命名一個 HTML 標籤時，自動重命名 HTML 標籤的開始和結束標籤。避免只修改了開始標籤，而忘記修改結束標籤。該擴展適用於 HTML、XML、PHP 和 JavaScript。
Auto Close Tag
通常想要使用一個特定的 HTML 元素時，需要輸入開始標籤和結束標籤。使用該插件後，只需要輸入開始標籤，它就會自動添加結束標籤。對於 Vue 開發人員來說，它還支持自定義類型名稱。當輸入自定義組件的開始標籤時，它會自動添加結束標籤。
CSS Peek
使用該插件，可以直接從 HTML 和 JavaScript 文件快速導航和編輯外部樣式表中定義的 CSS 樣式。它提供了一個 “Peek” 功能，在 HTML 中選擇某個 class 或者 id 名稱按住 Ctrl 鍵 + 鼠標左鍵可以直接定位到該名稱的 CSS 的位置。
該插件有利於處理大型或複雜的 CSS 樣式表，因爲它可以快速查找和編輯應用於特定元素的樣式，而無需瀏覽多個文件或搜索大量代碼。
Regex Previewer
Regex Previewer 用於測試正則表達式。在編寫正則表達式時，可以直接使用快捷鍵 Ctrl+Alt+M （windows）或者 ⌥+⌘+M（Mac）在編輯器右側啓動一個標籤頁，可以在這個標籤頁寫一些正則表達式測試用例，寫完之後，點擊正則表達式上方的 Test Regex...，這時右側標籤頁匹配到字符就會高亮顯示：
Code Spell Checker
Code Spell Checker 插件可以檢查單詞拼寫是否出現錯誤，檢查的規則遵循 camelCase （駝峯拼寫法）。
編程美化
Highlight Matching Tag
當有很多 HTML 標籤時，有時很難將結束標籤定位到對應的開始標籤，反之亦然。使用該插件，單擊開始標籤時，會看到結束標籤帶有下劃線。此外，它還會突出顯示代碼樹中的開始和結束標籤。如果需要，可以自定義樣式以使下劃線更加突出。
除此之外，該插件還有一些方便的命令，因此當單擊標籤時，可以使用ctrl + shift + P打開命令面板並搜索 “Highlight Matching Tag”，會看到兩個可以在項目中使用的命令。
TODO Highlight
如果想在將代碼發佈到生產環境之前提醒自己注意事項或代碼中未完成的事情，TODO Highlight VS Code 插件會非常有用。該插件會在代碼註釋中突出顯示某些關鍵字，如 FIXME: 和 TODO: 以提醒注意事項或尚未完成的事情。
除此之外，使用快捷鍵 ctrl + shift + P 打開命令面板並搜索 Todo Highlight 選擇 List the Highlighted annotations，然後選擇 All 以列出在所有文件中留下的所有突出顯示的註釋。
Better comments
該插件對不同類型的註釋會附加了不同的顏色，更加方便區分，幫助我們在代碼中創建更人性化的註釋。
Colorize
Colorize 會給顏色代碼增加一個當前匹配代碼顏色的背景。它通過 CSS 變量、預處理器變量、hsl/hsla 顏色、跨瀏覽器顏色、exa、rgb、rgba 和 argb 的彩色背景將 CSS 顏色可視化，幫助開發者快速區分顏色。
Image preview
通過此插件，當鼠標懸浮在圖片的鏈接上時，可以實時預覽該圖片，除此之外，還可以看到圖片的大小和分辨率。
CodeSnap
CodeSnap 用於對代碼的進行截圖和共享。屏幕截圖可以用文本或形狀進行註釋，並通過鏈接共享或包含在網站或文檔中。只需使用 ctrl + shift + P 並輸入 CodeSnap，然後按回車鍵，CodeSnap 窗口就會打開。
Error Lens
Error Lens 是一款把代碼檢查 (錯誤、警告、語法問題) 進行突出顯示的插件。Error Lens 通過使診斷更加突出，增強了語言的診斷功能，突出顯示了由該語言生成的診斷所在的整行，並在代碼行的位置以行方式在線打印了診斷消息。
主題圖標
One Dark Pro
Dracula Official
GitHub Theme
Winter Is Coming Theme
Night Owl
Monokai Pro
One Monokai
Shades of Purple
Ayu
vscode-icons
VSCode 官方出品的圖標庫。
Material Icon Theme
該插件根據最新的 Material Design 主題爲文件和文件夾提供圖標。它可以幫助我們識別文件併爲編輯器添加自定義的外觀。
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/3XT3Wv5stDAd27lmw_uvXg