本篇文章給大家推薦10個值得收藏的VSCode插件。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。

image

【推薦學習：《vscode教程》】

1 Import Cost

在開發過程中，你可能經常會發現自己要在項目中添加依賴項。盡管模塊化開發已成為現今軟件開發的關鍵部分，但最好還是確認對自己的輸入保持一定的細心。JavaScript 和 TypeScript 的 Import Cost 插件讓你可以實時地警惕所有的依賴項。

image

當你將依賴關系內聯添加到代碼中時，它會顯示對應的大小。它是一個輕巧的插件，可提供預見性并有助于有效的依賴關系管理。插件文檔里也列出了各種導入語法，讓該插件為我們顯示依賴項的大小。

這里有一篇文章詳細地介紹了原作者開發該插件的動機。

2 File Utils

盡管 Visual Studio Code 的核心功能在對文件進行編碼時效果很好，但是你可能會覺得有必要增強 Visual Studio Code 的管理項目以及依賴項中的多個文件的能力。File Utils 擴展讓你可以通過命令面板執行文件操作。

[圖片上傳失敗...(image-f4f0b1-1619400873082)]

你可以調出命令面板并選擇一個文件對它執行簡單的文件操作。 除了與文件夾相關的基本操作外，你還可以復制、移動、刪除和重命名文件。它是一個很實用的插件，可以讓你在不脫離 Visual Studio Code 范圍的情況下管理項目的文件。

3 Project Manager

使用 File Utils 擴展可以讓你執行簡單的文件操作，而 Project Manager 插件讓你可以進一步管理多個項目。首先，它添加了一個新的側邊欄用來支持處理多個項目。其次，該擴展還可以幫助你管理 Git、SVN 或 Mercurial 存儲庫。它讓我們可以進一步地管理遠程存儲庫。

image

除了基于 GUI 的功能外，此擴展還添加了與項目一起使用的命令。你可以調整設置，根據自己的喜好進一步地自定義它的功能。

4.png

借助遠程存儲庫管理和交互式命令等高級功能，Project Manager 擴展在你的工具中提供了一些的工具庫，這可以延長你的開發周期。

4 SVG Viewer

SVG 指的是可縮放的矢量圖形，并且 SVG 文件是存儲網絡矢量圖像的文本文件。如果在文本編輯器中打開 SVG 文件，則通常會顯示這些文件的文本內容。如果你正在直接編輯這些文件，則可能希望查看 Visual Studio Code 是如何呈現這些文件。

5.gif

SVG Viewer 插件讓你可以可視化 SVG 文件，從而節省了你使用其他應用程序查看工作的時間。從本質上講，它可以節省你對 SVG 文件進行快速編輯時的時間。

5 Code Spell Checker

開發人員遇到的大量異常通常可以通過更正變量、函數和程序包名稱中的拼寫錯誤來解決。另外，你在寫評論，說明或文檔時也可能會出現拼寫錯誤。這個軟件包有助于突出顯示文件中的錯誤，它可幫助你檢查各種流行的編程語言的拼寫。你還可以調整設置，讓 code spell checker 與特定文件類型一起使用。

image

雖然它在安裝時支持英語，但是附加的字典可用于八種語言和醫學術語。總而言之，它為你優秀的 Visual Studio Code 擴展庫中添加了一個小巧而強大的功能。

6 Remote — SSH

由于開發的分布式的性質，你可能需要登錄到遠程服務器去更新和測你的代碼。雖然可以通過第三方 SSH 客戶端輕松地對它們進行管理，但是存在一個 Visual Studio Code 擴展，該擴展讓你可以在服務器上進行遠程工作而不用完全離開應用程序。

[圖片上傳失敗...(image-be3adb-1619400873082)]

Microsoft 的 Remote-SSH 插件讓你可以連接到遠程開發環境，并且這完全不需要在本地系統中包含任何代碼。它還允許你在多個遠程環境之間交換，從而讓你可以在多個遠程系統之間執行多個任務。此外，該插件還支持連接到基于 Linux，Windows 或 macOS 的遠程系統。現今，在遠程服務器上進行開發至關重要，這也使得「遠程SSH插件」成為的 Visual Studio Code 必不可少的擴展。

7 Trailing Whitespace Visualizer

良好的編程習慣是確保你的代碼不包含任何尾隨空格。尾隨空格是由新行字符之前的任何代碼行中最后一個非空格字符之后的任何空格或制表符（本質上是不可見的）組成。Trailing Whitespace Visualizer 插件突出顯示了代碼中的所有此類尾隨空白。

8.png

尾隨空格是代碼中完全沒有必要的添加，并且這會增加文件的大小，因此刪除它們是個好主意。這個插件不僅可以在你的代碼中突出顯示它們，還可以在你使用其他團隊成員編寫的代碼時突出顯示它們。

8 Debugger for Chrome

當你在使用前端的 JavaScript 代碼時，測試你的代碼是否正確的常用方法是在瀏覽器上進行。Chrome Dev Tools 提供了一種通過控制臺調試 JavaScript 的實用方法。Debugger for Chrome 插件將 Visual Studio Code 集成到 Chrome 或支持 Chrome 開發工具協議的基于 Chromium 的瀏覽器。

[圖片上傳失敗...(image-c60804-1619400873082)]

有許多調試功能可讓您識別代碼中的錯誤，而不必離開 IDE。 簡而言之，Chrome調試器擴展程序可以在通常的調試過程中節省時間。

9 ESLint

ESLint 是一個靜態 JavaScript 代碼分析器。它會掃描你的代碼，并發現語法錯誤和低效的編程實踐。ESlint Visual Studio 擴展是將 ESLint 與 Visual Studio Code IDE 集成在一起，可以實現按需分析 JavaScript 代碼。但是，它要求將 ESLint 安裝在本地或你的全局系統中。

10.gif

10 Live Server

Visual Studio Code 的 Live Server 擴展讓你可以運行本地開發服務器來測試代碼。它具有針對靜態和動態網頁的實時重新加載功能。

原文地址：https://blog.bitsrc.io/top-10-visual-studio-extensions-in-2020-857ea6d692dd

作者：Shaumik Daityari

更多編程相關知識，請訪問：編程視頻！！