今天來分享一些提升開發效率的實用 VS Code 插件!

1. Image preview

通過此插件，當鼠標懸浮在圖片的鏈接上時，可以實時預覽該圖片，除此之外，還可以看到圖片的大小和分辨率。

2. Auto Rename Tag

使用該插件，可以在重命名一個 HTML 標簽時，自動重命名 HTML 標簽的開始和結束標簽。避免只修改了開始標簽，而忘記修改結束標簽。該擴展適用于 HTML、XML、PHP 和 JavaScript。

3. Bracket Pair Colorizer

使用該插件可以用不同顏色區分出代碼中的括號，對于括號很多的代碼非常實用。該插件還支持自定義括號顏色。

4. Color Highlight

此擴展可以用來設置 CSS 顏色的樣式。除了 CSS 之外，它還會對不顯示默認顏色的 JavaScript、HTML、JSON 等文件進行著色。該插件會對顏色名稱、RGB、RGBA 和十六進制顏色進行著色。

5. Better Comments

Better Comments擴展可以幫助我們在代碼中創建更人性化的注釋，有不同形式和顏色的注釋供我們選擇。

6. GitLens

GitLens 增強了 Visual Studio Code 中內置的 Git 功能。它可以幫助我們更好地理解代碼，快速了解更改行或代碼塊的人員、原因和時間。

7. VSCode-Icons

VSCode-Icons 是一個文件圖片插件，可以為項目不同類型的文件賦予不同的圖標。讓我們更容易區分不同的文件類型。

安裝完成之后，按照以下步驟進行使用：文件 → 首選項 → 文件圖標主題 → VSCode-Icons。

8. Tabnine

Tabnine 是一個多語言的插件，可以自動幫助我們完成代碼的輸入。Tabnine 的目標是通過基于 AI 的系統提高開發人員的生產力。

9. Project Dashboard

Project Dashboard 是一個項目儀表板插件，可以將經常訪問的文件夾、文件等固定到儀表板上以快速訪問它們。

10. CodeSnap

CodeSnap 是一個代碼截圖插件，只需選中項目中相應的代碼段，即可快速創建代碼的截圖。

11. CSS Peek

CSS Peek 插件允許我們在 HTML 中選擇某個 class 或者 id 名稱按住Ctrl鍵+鼠標左鍵可以直接定位到該名稱的CSS的位置。

12. Path Autocomplete

Path Autocomplete 提供了路徑自動完成，因此不必記住那些很長的文件路徑。

13. Auto Close Tag

Auto Close Tag 插件用于自動補全HTML結束標簽。

14. Vetur

Vue 開發必備插件，它為 Vue.js 提供了實用的工具，例如調試、錯誤檢查、語法高亮、片段等。

15.IntelliCode

IntelliCode 旨在幫助開發人員提供智能的代碼建議。它默認支持 Python、TypeScript/JavaScript、React 和 Java。IntelliCode 將最有可能使用的內容放在列表的頂部，從而節省時間。IntelliCode 建議基于 GitHub 上的數千個開源項目。

16. Import Cast

該插件用于在編輯器中內聯顯示導入包的大小。該擴展使用 webpack 來檢測導入包的大小。

17. Beautify

Beautify 可以幫助我們以更美觀的方式格式化代碼。它支持 JavaScript、JSON、CSS、Sass 和 HTML 等流行語言。

18. Code Time

Code Time 可以計算我們使用 Visual Studio Code 的時間，提供了多種數據指標。

19. Settings Sync

Settings Sync 用于將 Visual Studio Code 的設置保存在 GitHub 上，并輕松地將其用于其他計算機，例如有關擴展的信息或系統設置。使用該插件就可以輕松地為許多不同的機器進行設置，而無需打開之前安裝的擴展和相關設置。

20. Live Share

Live Share 幫助團隊中的開發人員實時共享程序中的代碼，從而輕松編輯和調試程序，例如共享調試會話、終端實例、localhost Web 應用程序、語音通話等。

21. Code Spell Checker

Code Spell Checker 可以幫助我們檢查單詞拼寫是否出現錯誤，檢查的規則遵循 camelCase (駝峰命名法)。

22. Error Lens

Error Lens 是一款把代碼檢查(錯誤、警告、語法問題)進行突出顯示的插件。Error Lens 通過使診斷更加突出，增強了語言的診斷功能，突出顯示了由該語言生成的診斷所在的整行，并在代碼行的位置以行方式在線打印了診斷消息。

23. ES7 React/Redux/GraphQL/React-Native snippets

React/Redux/Reatc Native/react-router 語法智能提示，React 開發者必備。借助此代碼段，可以輕松創建基于類的組件、function組件。

24. REST Client

REST Client 允許發送 HTTP 請求并直接在 VS Code 中查看響應。它是 VS Code 的 Postman，可以方便地集成到代碼編輯器中。REST 客戶端同時支持 REST 和 GraphQL API。

25. JavaScript Booster

JavaScript Booster 通過分析代碼及其上下文自動建議快速操作以重構或增強代碼。它支持來自重構條件、聲明、函數、TypeScript、promise、JSX 等的多種代碼操作。

26. Live SASS Compiler

Live SASS Compiler 擴展可以將 SASS 或 SCSS 文件實時編譯或轉譯為 CSS 文件。

27. Remote-SSH

Remote-SSH 可以使用任何帶有 SSH 服務器的遠程機器作為開發環境。由于擴展直接在遠程機器上運行命令，因此無需在本地機器上放置源代碼即可快速操作遠程服務器。

28. Debugger for chrome

Debugger for Chrome 是微軟開發的插件，它允許我們在 VS Code 中調試 JS 代碼。可以設置斷點、逐步執行代碼、調試動態添加的腳本等。它有助于在開發過程的早期檢測錯誤。

29. npm Intellisense

npm 安裝包之后，在 require 時提供該插件可以獲得智能提示，import 語句中自動填充 npm 模塊。

30. Live Server

Live Server是一個具有實時加載功能的小型服務器，可以在項目中用live-server作為一個實時服務器實時查看開發的網頁或項目效果。

它是為靜態和動態頁面啟動具有實時重新加載功能的本地開發服務器，在狀態欄中單擊即可啟動或停止服務器。