2020 年 10 個最值得推薦的 VS Code 插件

前言

原文地址： https://blog.bitsrc.io/top-10... 做者：Shaumik Daityari

正文從這裏開始~

1 Import Cost

在開發過程當中，你可能常常會發現本身要在項目中添加依賴項。儘管模塊化開發已成爲現今軟件開發的關鍵部分，但最好仍是確認對本身的輸入保持必定的細心。JavaScript 和 TypeScript 的 Import Cost 插件讓你能夠實時地警戒全部的依賴項。

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

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

2 File Utils

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

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

3 Project Manager

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

除了基於 GUI 的功能外，此擴展還添加了與項目一塊兒使用的命令。你能夠調整設置，根據本身的喜愛進一步地自定義它的功能。

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

4 SVG Viewer

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

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

5 Code Spell Checker

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

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

6 Remote — SSH

因爲開發的分佈式的性質，你可能須要登陸到遠程服務器去更新和測你的代碼。雖然能夠經過第三方 SSH 客戶端輕鬆地對它們進行管理，可是存在一個 Visual Studio Code 擴展，該擴展讓你能夠在服務器上進行遠程工做而不用徹底離開應用程序。

Microsoft 的 Remote-SSH 插件讓你能夠鏈接到遠程開發環境，而且這徹底不須要在本地系統中包含任何代碼。它還容許你在多個遠程環境之間交換，從而讓你能夠在多個遠程系統之間執行多個任務。此外，該插件還支持鏈接到基於 Linux，Windows 或 macOS 的遠程系統。現今，在遠程服務器上進行開發相當重要，這也使得遠程SSH插件成爲的 Visual Studio Code 必不可少的擴展。

7 Trailing Whitespace Visualizer

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

尾隨空格是代碼中徹底沒有必要的添加，而且這會增長文件的大小，所以刪除它們是個好主意。這個插件不只能夠在你的代碼中突出顯示它們，還能夠在你使用其餘團隊成員編寫的代碼時突出顯示它們。

8 Debugger for Chrome

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

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

9 ESLint

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

10 Live Server

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

❤️愛心三連擊

經過閱讀，若是你以爲有收穫的話，能夠愛心三連擊！！！