該插件提供了許多速記前綴來加速開發(fā)并幫助開發(fā)人員為 React、Redux、GraphQL 和 React Native 創(chuàng)建代碼片段和語法。
這是一個專門為 React 開發(fā)人員設(shè)計的 VS Code 擴展。在處理大型項目時，重構(gòu)可能很有挑戰(zhàn)性。可以使用 VSCode React Refactor 快速重構(gòu)代碼，它會將 JSX 代碼片段提取到新的類、組件中。此外，它還支持 TypeScript、TSX、常規(guī)函數(shù)、類和箭頭函數(shù)。
該插件提供了一組精心挑選的 React 代碼片段，可以通過輸入幾個字母輕松地將其添加到代碼中。例如，輸入 imr 會將 React 導(dǎo)入到組件中。
此插件包含了使用 Typescript 的 React 代碼片段，它支持 Typescript(.ts) 或 TypeScript React (.tsx) 等語言。以下是使用 TypeScript 創(chuàng)建 React 組件的兩個片段。
默認情況下，我們的 Vue 組件看起來像這樣：
隨著 Vue 3 + TypeScript 越來越流行，Vetur（Vue 的官方 VS Code 擴展）開始出現(xiàn)問題，例如，將 Vue 與 TypeScript 一起使用時 CPU 使用率過高，或者不支持 Vue 3 的新 <script setup> 語法。而 Volar 就解決了 Vetur 的問題，并為 Vue 3 + TypeScript 用戶提供了最佳的開發(fā)體驗。它為 Vue 3 提供完整的語言支持，包括標準的單文件組件 (SFC) 語法及其最新添加的 <script setup>。
這個插件包含了所有的 Vue.js 2 和 Vue.js 3 的 api 對應(yīng)的代碼片段。
此插件將 Vue 2 Snippets 和 Vue 3 Snippets 添加到 Visual Studio Code 中。
React Native Tools 擴展由 Microsoft 團隊構(gòu)建，它為 React Native 項目提供了一個開發(fā)環(huán)境。該插件允許在不同的模擬器或仿真器上輕松運行和調(diào)試代碼，從命令面板快速運行 react-native 命令，而無需在終端中手動運行命令，并使用 IntelliSense 瀏覽 React Native 的函數(shù)、對象和參數(shù)等。
通過此插件可以使用預(yù)定義的 ES6 語法片段速記，從而提高開發(fā)效率。這個 VS Code 插件可以自定義，因為它不特定于任何框架。
該插件增強了 VS Code 中的 Git，并從每個存儲庫中釋放隱藏數(shù)據(jù)?？梢钥焖俨榭创a的編寫者、輕松導(dǎo)航和探索 Git 存儲庫、通過豐富的可視化效果和強大的比較命令獲取有效信息，以及執(zhí)行更多操作，幫助我們更好地理解代碼。
該插件用于查看 Git 日志和文件歷史記錄并比較分支或提交。
Git Graph 插件用于可視化查看存儲庫的 Git 操作，并從圖形中輕松執(zhí)行Git操作。
在項目中導(dǎo)入多個包時可能會出現(xiàn)性能問題，Import Cost 就用于查看將特定庫導(dǎo)入項目的成本。該插件會顯示導(dǎo)入庫的大小，如果大小為綠色，則表示庫很小，而紅色表示庫很大。
從編程活動中自動生成的指標、見解和時間跟蹤。它是一個開源項目，獨立于網(wǎng)絡(luò)環(huán)境，安全輕量。
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ù)。
開發(fā)時我們可以能會遇到需要復(fù)制文件（組件）的情況，默認情況下，必須右鍵單擊該文件，然后單擊復(fù)制。右鍵單擊要將文件復(fù)制到的文件夾，然后單擊粘貼。再次右鍵單擊該文件并重命名。
使用該插件，當右鍵單擊文件時，將看到一個新的“Duplicate file or directory”選項。單擊它，輸入文件的新名稱，然后按回車鍵即可。
該插件為 import 語句中的 npm 模塊提供了自動完成功能。npm 模塊的所有導(dǎo)入都會使用此擴展自動處理。
該插件用于自動補全文件名。當 import 其它文件時，能夠?qū)ξ募M行提示，快速補全要引入的文件名。
使用該插件，可以在重命名一個 HTML 標簽時，自動重命名 HTML 標簽的開始和結(jié)束標簽。避免只修改了開始標簽，而忘記修改結(jié)束標簽。該擴展適用于 HTML、XML、PHP 和 JavaScript。
通常想要使用一個特定的 HTML 元素時，需要輸入開始標簽和結(jié)束標簽。使用該插件后，只需要輸入開始標簽，它就會自動添加結(jié)束標簽。對于 Vue 開發(fā)人員來說，它還支持自定義類型名稱。當輸入自定義組件的開始標簽時，它會自動添加結(jié)束標簽。
使用該插件，可以直接從 HTML 和 JavaScript 文件快速導(dǎo)航和編輯外部樣式表中定義的 CSS 樣式。它提供了一個“Peek”功能，在 HTML 中選擇某個 class 或者 id 名稱按住Ctrl鍵+鼠標左鍵可以直接定位到該名稱的CSS的位置。
該插件有利于處理大型或復(fù)雜的 CSS 樣式表，因為它可以快速查找和編輯應(yīng)用于特定元素的樣式，而無需瀏覽多個文件或搜索大量代碼。
Regex Previewer 用于測試正則表達式。在編寫正則表達式時，可以直接使用快捷鍵 Ctrl+Alt+M （windows）或者 ?+?+M（Mac）在編輯器右側(cè)啟動一個標簽頁，可以在這個標簽頁寫一些正則表達式測試用例，寫完之后，點擊正則表達式上方的 Test Regex...，這時右側(cè)標簽頁匹配到字符就會高亮顯示：
Code Spell Checker 插件可以檢查單詞拼寫是否出現(xiàn)錯誤，檢查的規(guī)則遵循 camelCase （駝峰拼寫法）。
當有很多 HTML 標簽時，有時很難將結(jié)束標簽定位到對應(yīng)的開始標簽，反之亦然。使用該插件，單擊開始標簽時，會看到結(jié)束標簽帶有下劃線。此外，它還會突出顯示代碼樹中的開始和結(jié)束標簽。如果需要，可以自定義樣式以使下劃線更加突出。
除此之外，該插件還有一些方便的命令，因此當單擊標簽時，可以使用ctrl + shift + P打開命令面板并搜索“Highlight Matching Tag”，會看到兩個可以在項目中使用的命令。
如果想在將代碼發(fā)布到生產(chǎn)環(huán)境之前提醒自己注意事項或代碼中未完成的事情，TODO Highlight VS Code 插件會非常有用。該插件會在代碼注釋中突出顯示某些關(guān)鍵字，如 FIXME: 和 TODO: 以提醒注意事項或尚未完成的事情。
除此之外，使用快捷鍵 ctrl + shift + P 打開命令面板并搜索 Todo Highlight 選擇 List the Highlighted annotations，然后選擇 All 以列出在所有文件中留下的所有突出顯示的注釋。
該插件對不同類型的注釋會附加了不同的顏色，更加方便區(qū)分，幫助我們在代碼中創(chuàng)建更人性化的注釋。
Colorize 會給顏色代碼增加一個當前匹配代碼顏色的背景。它通過 CSS 變量、預(yù)處理器變量、hsl/hsla 顏色、跨瀏覽器顏色、exa、rgb、rgba和argb的彩色背景將 CSS 顏色可視化，幫助開發(fā)者快速區(qū)分顏色。
通過此插件，當鼠標懸浮在圖片的鏈接上時，可以實時預(yù)覽該圖片，除此之外，還可以看到圖片的大小和分辨率。
CodeSnap 用于對代碼的進行截圖和共享。屏幕截圖可以用文本或形狀進行注釋，并通過鏈接共享或包含在網(wǎng)站或文檔中。只需使用 ctrl + shift + P 并輸入 CodeSnap，然后按回車鍵，CodeSnap 窗口就會打開。
Error Lens 是一款把代碼檢查(錯誤、警告、語法問題)進行突出顯示的插件。Error Lens 通過使診斷更加突出，增強了語言的診斷功能，突出顯示了由該語言生成的診斷所在的整行，并在代碼行的位置以行方式在線打印了診斷消息。
VSCode 官方出品的圖標庫。
該插件根據(jù)最新的 Material Design 主題為文件和文件夾提供圖標。它可以幫助我們識別文件并為編輯器添加自定義的外觀。
最后，歡迎學(xué)編程的朋友們加入魚皮的 編程知識星球 ，魚皮會 1 對 1 解決你的問題，直播帶你做出項目、為你定制學(xué)習(xí)計劃和求職指導(dǎo)，還能獲取海量編程學(xué)習(xí)資源，和上萬名學(xué)編程的同學(xué)共享知識、交流進步。
聯(lián)系客服
