23個提高開發效率的前端VSCode插件（快來收藏）

本篇文章給大家分享23個前端vscode插件，助你提高開發效率，讓你事半功倍，快來收藏吧！

vscode 是我們前端開發的一個強大的IDE，所以選擇趁手好用的插件是提高開發效率，然后剩下的時間用來摸魚是很有必要滴?！就扑]學習：《vscode》】

Chinese（Simplified）

vscode 我們都知道是微軟的開源軟件，對于英文不好的同學呢，使用中文漢化是首先要做的，所以筆者推薦漢化插件。

立即學習“前端免費學習筆記（深入）”；

Chinese（Simplified）（簡體中文）Language Pack for Visual Studio Code :?此中文（簡體）語言包為 VS Code 提供本地化界面。

• 插件名：Chinese（Simplified）（簡體中文）Language Pack for Visual Studio Code
• 官方地址： vscode
• 用法：通過使用“Configure Display Language”命令顯式設置 VS Code 顯示語言，可以替代默認 UI 語言。 按下“Ctrl+Shift+P”組合鍵以顯示“命令面板”，然后鍵入“display”以篩選并顯示“Configure Display Language”命令。按“Enter”，然后會按區域設置顯示安裝的語言列表，并突出顯示當前語言設置。選擇另一個“語言”以切換 UI 語言。 請參閱文檔并獲取更多信息。

Polacode-2020

Polacode-2020 : 如果你想要一種簡單的方法來為你的片段的任何選擇提供那些漂亮的視覺效果。

• 插件名：Polacode-2020
• 官方地址： vscode
• 特征：

• • 選中需要截圖的范圍即可生成代碼塊的截圖
  • 可以設置想要的陰影、背景顏色

• 用法：command+shift+p、fn+F1(Mac) / ctrl+shift+p(Window)，選擇Polacode，然后選中需要截圖的范圍即可

CodeSnap

CodeSnap :?在 VS Code 中為您的代碼截取漂亮的屏幕截圖！

• 插件名：CodeSnap
• 官方地址：vscode
• 特征：

• • 快速保存代碼的屏幕截圖
  • 將屏幕截圖復制到剪貼板
  • 顯示行號
  • 許多其他配置選項

• 用法：選中需要截取的代碼塊，然后右鍵點擊 CodeSnap 即可

Image preview

Image preview : 在編輯器的間隙中和鼠標懸停在圖片上可預覽圖像。

• 插件名：Image preview
• 官方地址： vscode
• 特性：無論是在 HTML 標簽中還是在 style 中引入的圖像都能在編輯器的間隙中和鼠標懸停時預覽
• 用法：在編輯器的間隙中和鼠標懸停在圖片鏈接上可預覽圖像

Image Sprites

在開發某些頁面時總會遇到擁有很多小圖片的需求，這時使用雪碧圖就可以減少服務器請求的數量并節省帶寬，在沒有UI幫助的情況下，選用該插件是個不錯的選擇。

Image Sprites :?圖像精靈是放入單個圖像的圖像集合。包含許多圖像的網頁可能需要很長時間才能加載并生成多個服務器請求。使用圖像精靈將減少服務器請求的數量并節省帶寬。

• 插件名：Image Sprites
• 官方地址： vscode
• 特性：

• • 易于創建和更新圖像精靈
  • 支持 png、jpg 和 bmp 圖像
  • 配置垂直或水平精靈布局
  • 使用 sprite 圖像位置生成 LESS、Sass 或 CSS 文件
  • 您可以使用不同的設置選項管理所有精靈

• 用法：

• • Sprite文件夾中的所有圖像
  • 右鍵單擊包含圖像的文件夾并選擇Create Image Sprite

• • Sprite一些圖像
  • 選擇圖片，右鍵選擇Create Image Sprite

• • 這兩種方式將生成一個設置.sprite文件以及生成的默認文件。image file.css

Svg Preview

當你找到一個合適的 svg 圖像卻因為顏色、形態等不合適時，可以使用此插件進行修改。

Svg Preview : VSCode 的 Svg 預覽。

• 插件名：Svg Preview
• 官方地址： vscode
• 特征：

• • 實時預覽 svg 文件和 svg 的內部文件
  • 預覽的平移和縮放（最高32767%）

file-size

file-size :?一個簡單的擴展。在狀態欄中顯示當前文本文件的大小。保存文件或更改活動選項卡時，狀態將更新。

• 插件名：file-size
• 官方地址： vscode

Live Server

Live Server :?為靜態和動態頁面啟動具有實時重新加載功能的本地開發服務器。

• 插件名：Live Server
• 官方地址： vscode
• 特征：

• • 具有實時瀏覽器重新加載的快速開發實時服務器。
  • 從狀態欄中單擊即可啟動或停止服務器。
  • 從資源管理器菜單中打開一個 HTML 文件到瀏覽器。[快速 Gif 演示]。
  • 支持排除文件以進行更改檢測。
  • 熱鍵控制。
  • 可定制的端口號、服務器根目錄、默認瀏覽器。
  • 使用高級命令行支持任何瀏覽器 （例如：Firefox Nightly） 。
  • 支持 Chrome 調試附件（更多信息）。[快速 Gif 演示]。
  • 通過 WLAN 遠程連接（例如：使用移動設備連接） [需要幫助嗎？請參閱常見問題部分]
  • 使用首選主機名 *（localhost 或 127.0.0.1） *。
  • Live Reload 功能的可定制支持標簽。（默認為Body或head）
  • SVG 支持
  • https支持。
  • 支持代理。
  • 啟用 CORS
  • 支持多根工作區。
  • 通過Live Server Web Extension支持任何文件甚至是動態頁面。

Profile Switcher

Profile Switcher :?此擴展允許您定義許多設置配置文件，您可以輕松地在它們之間切換。這個擴展的最初想法來自于我希望有一種簡單的方法讓我將我的 VS Code 切換到更好地優化呈現的設置（更改主題、增加字體大小等）。

• 插件名：Profile Switcher
• 官方地址： vscode
• 特征：該擴展引入了四個可以從命令面板使用的新命令。所有命令都以Profile Switcher

Project Manager

當你需要在 vscode 中打開很多不同性質的項目時，Project Manager 是不錯的項目管理插件。

Project Manager :?它可以幫助您輕松訪問您的項目，無論它們位于何處。不要再錯過那些重要的項目了。您可以定義自己的項目（也稱為收藏夾），或選擇自動檢測Git、Mercurial或SVN存儲庫、VSCode文件夾或任何其他文件夾。

• 插件名：Project Manager
• 官方地址： vscode
• 特征：可用命令：

• • Project Manager: Save Project將當前文件夾/工作區另存為新項目
  • Project Manager: Edit Project手動編輯您的項目 ( projects.json)
  • Project Manager: List Projects to Open列出所有已保存/檢測到的項目并選擇一個
  • Project Manager: List Projects to Open in New Window列出所有已保存/檢測到的項目并選擇一個在新窗口中打開
  • Project Manager: Filter Projects by Tag按選定標簽過濾收藏項目

• 用法：

• • Project Manager擴展有自己的Side Bar，帶有各種命令來提高您的工作效率
  • 您可以定義自定義標簽（通過設置），為每個項目projectManager.tags定義多個標簽，并過濾標記在其標簽上的項目

Settings Sync

Settings Sync 可以幫助我們在換電腦、或重裝系統、或多個電腦中同步 VSCode 上的設置。

Settings Sync : Visual Studio Code 的設置同步。

• 插件名：Settings Sync
• 官方地址： vscode

npm

npm :?此擴展支持運行文件中定義的 npm 腳本。

• 插件名：npm
• 官方地址： vscode
• 特征：

• • npm為報告的警告提供運行快速修復。

• • 用于運行腳本的命令在該npm類別中可用

open in browser

open in browser :?此擴展可讓你的html文件在瀏覽器中打開。

• 插件名：open in browser
• 官方地址： vscode
• 用法

• • 使用快捷方式在默認瀏覽器Alt + B中打開當前 html Shift + Alt + B文件，或選擇瀏覽器。您也可以像圖片一樣右鍵單擊：

• • 當您選擇 時oepn in Other Browsers，將顯示一個瀏覽器列表，您可以選擇一個打開當前文件。

• • 當您選擇 時open in Default Browser，默認為 系統默認瀏覽器 。如果你想配置默認瀏覽器，你可以像這樣覆蓋它：

GitLens – Git supercharged

GitLens – Git supercharged :?GitLens 增強了VS?Code 中的 Git，并解鎖了每個存儲庫中未開發的知識。 它可以幫助您通過 Git 對比注釋和 CodeLens直觀地可視化代碼作者身份，無縫導航和探索Git 存儲庫，通過豐富的可視化和強大的比較命令獲得有價值的見解等等。

• 插件名：GitLens – Git supercharged
• 官方地址： vscode

Git History

Git History : 查看 git 日志，文件歷史，合并分支或提交。

• 插件名：Git History
• 官方地址： vscode

SVN

SVN : 此插件依賴系統的 SVN 安裝，因此您需要先安裝有 TortoiseSVN。

• 插件名：SVN
• 官方地址： vscode
• 特征：查看：

• • 源代碼管理視圖
  • 排水溝中的快速差異
  • 狀態欄
  • 創建變更列表
  • 添加文件
  • 還原編輯
  • 刪除文件
  • 創建分支
  • 切換分支
  • 創建補丁
  • 差異變化
  • 提交更改/更改列表
  • 查看提交消息

Postcode

Postcode : Postcode?可用于創建和測試簡單和復雜的 HTTP/s 請求，以及查看響應。

• 插件名：Postcode
• 官方地址：vscode

REST Client

REST Client :?REST Client 允許您發送 HTTP 請求并直接在 Visual Studio Code 中查看響應。

• 插件名：TEST Client
• 官方地址：vscode

發出請求

發出 cURL 請求

Live Share

Live Share :?Live Share 使您能夠與其他人實時協作編輯和調試，無論您使用什么編程語言或您正在構建的應用程序類型。它允許您立即（并且安全地）共享您當前的項目，然后根據需要共享調試會話、終端實例、本地主機 Web 應用程序、語音通話等等！加入您的會話的開發人員會從您的環境中接收所有的編輯器上下文（例如語言服務、調試），這確保他們可以立即開始高效協作，而無需克隆任何存儲庫或安裝任何 SDK。

• 插件名：Live Share
• 官方地址：vscode

Draw.io Integration

Draw.io Integration :?這個非官方的擴展將Draw.io（也稱為diagrams.net）集成到 VS Code 中。

• 插件名：Draw.io Integration
• 官方地址：vscode
• 特征：

• • 在 Draw.io 編輯器中 編輯 、或.drawio文件。.dio.drawio.svg.drawio.png

• • • 要創建一個新圖表，只需創建一個空的.drawio,.drawio.svg或*.drawio.png文件并打開它。**
    • .drawio.svg.svg是可以嵌入到 Github 自述文件中的有效文件！不需要導出。
    • .drawio.png是有效.png文件！不需要導出。您應該.svg盡可能使用它們 – 它們看起來好多了！
    • 要在不同格式之間進行轉換，請使用Draw.io: Convert To…命令。

• • 默認使用 Draw.io 的離線版本。
  • 多個 Draw.io 主題可用。
  • 使用 Liveshare 與他人協作編輯圖表。
  • 節點/邊可以與代碼跨度鏈接。

Markdown All in One

Markdown All in One :?Markdown 所需的一切（鍵盤快捷鍵、目錄、自動預覽等）。

• 插件名：Markdown All in One
• 官方地址：vscode

Markdown PDF

Markdown PDF :?此擴展將 Markdown 文件轉換為 pdf、html、png 或 jpeg 文件。

• 插件名：Markdown PDF
• 官方地址：vscode
• 特征：支持以下功能：

• • 語法高亮
  • 表情符號
  • markdown-it-復選框
  • 降價容器
  • 降價它包括
  • 植物UML

• • • markdown-it-plantuml

• • 美人魚

Markdown Preview Enhanced

Markdown Preview Enhanced : Markdown 預覽增強。

• 插件名：Markdown Preview Enhanced
• 官方地址：vscode

更多關于VSCode的相關知識，請訪問：vscode！