在這篇文章中，我想介紹一下自己日常使用中最喜歡的Visual Studio Code擴展。大多數時候，我用VS Code編寫的是JavaScript應用程序(標準JavaScript、React、Angular、NodeJS……各式各樣)。

Bracket Pair Colorizer 2

這個擴展很不錯，可以幫助我搞清楚JavaScript中復雜的嵌套promise。顧名思義，它可以讓方括號對變色，幫我弄清楚是否在某個地方搞糊涂了(例如缺少方括號)。它默認匹配()、[]和{}等普通括號，但如果需要你也可以定義自定義括號。

它還有其他許多很酷的功能，例如定義顏色或為活動括號顯示裝訂線之類。值得嘗試一波。

鏈接：https://github.com/CoenraadS/Bracket-Pair-Colorizer-2

Marketplace：https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

NPM Intellisense

如動圖所示，它能自動完成以NPM包為目標的require import語句。這可以提供很多幫助，尤其是當你的項目變得很大，并且在package.json中包含很多依賴項時。我不想再錯過這個插件了，強烈推薦！

鏈接：https://github.com/ChristianKohler/NpmIntellisense

Marketplace：https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

Path Intellisense

這是NPM Intellisense的姐妹插件。它會執行相同的自動補全，不過針對的是你的文件系統。這倆插件的維護者是同一人，我也不想再錯過這個好東西！

鏈接：https://github.com/ChristianKohler/PathIntellisense

Marketplace：https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

Quokka.js

如果你只是想嘗試一些東西，不想費勁先設置項目，那么這款工具就是一個很好的輔助。通過實時檢查輸出，它會立即將輸出顯示在JavaScript/TypeScript代碼旁邊，如動圖所示。這是一個很好的擴展，特別適合調試目的。

鏈接：https://quokkajs.com/

Marketplace：https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

Docker

由于我經常使用NodeJS，因此習慣了完全使用Docker設置開發環境。在找到這個擴展之前，我只會用CLI。

這個擴展是處理多個Docker映像和容器的必備，因為你可以用它快速瀏覽正在運行哪些容器、構建哪些映像以及創建哪些網絡。

如果你每天都在使用Docker，那么我強烈推薦這個擴展。

鏈接：https://github.com/microsoft/vscode-docker

Marketplace：https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker

Live Server

我仍在不時使用靜態網站和標準JavaScript，而且這樣做的時候我不想安裝諸如webpack-dev-server之類的東西。這個擴展為本地開發服務器提供了熱重載功能，從而能幫助我解決這個問題，也就是說它會在保存對文件所做的任何更改后立即刷新頁面。它在狀態欄中有一個漂亮的“Go Live”按鈕，你只需單擊一下即可啟動服務器。如果你還沒用上的話，一定要看看這個擴展。

鏈接：https://github.com/ritwickdey/vscode-live-server

Marketplace：https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Auto Close Tag和Auto Rename Tag

它們是VS Code的兩個小插件，可通過自動重命名和關閉標簽來幫助你維護HTML文件。這也適用于React自己的JSX語法。如果你想節省一些時間，請嘗試一下。

Auto Close Tag：https://github.com/formulahendry/vscode-auto-close-tag/https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

Markdown Preview Enhanced

我用Markdown做很多事情。例如，在hashnode.com或dev.to上寫文章，為我的私人項目寫文檔，或者在markdown中寫筆記來理順自己的想法。大多數時候，我都是用VS Code來寫的，在找到Markdown Preview Enhanced插件之前，我一直缺乏好用的Markdown預覽工具。它不僅為你提供預覽，而且還有同步滾動、PDF導出和PlantUML的功能。我非常喜歡這個工具，所以向經常用Markdown的人們高度推薦。

鏈接：https://github.com/shd101wyy/vscode-markdown-preview-enhanced

Marketplace：https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced

小結

以上就是我每天最常用的VS Code擴展。我希望你發現了一些對你的工作流程有用的新東西，你有什么好用的擴展也可以在評論里推薦。

原文鏈接：

https://dev.to/klamserdev/vs-code-extensions-i-use-daily-568i

延伸閱讀：

VS Code會“一統江湖”嗎？-InfoQ

關注我并轉發此篇文章，私信我“領取資料”，即可免費獲得InfoQ價值4999元迷你書，點擊文末「了解更多」，即可移步InfoQ官網，獲取最新資訊～

總結

以上是生活随笔為你收集整理的live server插件怎么用_分享几个我日常使用的VS Code插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。