在這篇文章中，我想介紹一下自己日常使用中最喜歡的Visual Studio Code擴(kuò)展。大多數(shù)時(shí)候，我用VS Code編寫(xiě)的是JavaScript應(yīng)用程序(標(biāo)準(zhǔn)JavaScript、React、Angular、NodeJS……各式各樣)。

Bracket Pair Colorizer 2

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

它還有其他許多很酷的功能，例如定義顏色或?yàn)榛顒?dòng)括號(hào)顯示裝訂線之類。值得嘗試一波。

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

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

NPM Intellisense

如動(dòng)圖所示，它能自動(dòng)完成以NPM包為目標(biāo)的require import語(yǔ)句。這可以提供很多幫助，尤其是當(dāng)你的項(xiàng)目變得很大，并且在package.json中包含很多依賴項(xiàng)時(shí)。我不想再錯(cuò)過(guò)這個(gè)插件了，強(qiáng)烈推薦！

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

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

Path Intellisense

這是NPM Intellisense的姐妹插件。它會(huì)執(zhí)行相同的自動(dòng)補(bǔ)全，不過(guò)針對(duì)的是你的文件系統(tǒng)。這倆插件的維護(hù)者是同一人，我也不想再錯(cuò)過(guò)這個(gè)好東西！

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

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

Quokka.js

如果你只是想嘗試一些東西，不想費(fèi)勁先設(shè)置項(xiàng)目，那么這款工具就是一個(gè)很好的輔助。通過(guò)實(shí)時(shí)檢查輸出，它會(huì)立即將輸出顯示在JavaScript/TypeScript代碼旁邊，如動(dòng)圖所示。這是一個(gè)很好的擴(kuò)展，特別適合調(diào)試目的。

鏈接：https://quokkajs.com/

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

Docker

由于我經(jīng)常使用NodeJS，因此習(xí)慣了完全使用Docker設(shè)置開(kāi)發(fā)環(huán)境。在找到這個(gè)擴(kuò)展之前，我只會(huì)用CLI。

這個(gè)擴(kuò)展是處理多個(gè)Docker映像和容器的必備，因?yàn)槟憧梢杂盟焖贋g覽正在運(yùn)行哪些容器、構(gòu)建哪些映像以及創(chuàng)建哪些網(wǎng)絡(luò)。

如果你每天都在使用Docker，那么我強(qiáng)烈推薦這個(gè)擴(kuò)展。

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

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

Live Server

我仍在不時(shí)使用靜態(tài)網(wǎng)站和標(biāo)準(zhǔn)JavaScript，而且這樣做的時(shí)候我不想安裝諸如webpack-dev-server之類的東西。這個(gè)擴(kuò)展為本地開(kāi)發(fā)服務(wù)器提供了熱重載功能，從而能幫助我解決這個(gè)問(wèn)題，也就是說(shuō)它會(huì)在保存對(duì)文件所做的任何更改后立即刷新頁(yè)面。它在狀態(tài)欄中有一個(gè)漂亮的“Go Live”按鈕，你只需單擊一下即可啟動(dòng)服務(wù)器。如果你還沒(méi)用上的話，一定要看看這個(gè)擴(kuò)展。

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

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

Auto Close Tag和Auto Rename Tag

它們是VS Code的兩個(gè)小插件，可通過(guò)自動(dòng)重命名和關(guān)閉標(biāo)簽來(lái)幫助你維護(hù)HTML文件。這也適用于React自己的JSX語(yǔ)法。如果你想節(jié)省一些時(shí)間，請(qǐng)嘗試一下。

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上寫(xiě)文章，為我的私人項(xiàng)目寫(xiě)文檔，或者在markdown中寫(xiě)筆記來(lái)理順自己的想法。大多數(shù)時(shí)候，我都是用VS Code來(lái)寫(xiě)的，在找到Markdown Preview Enhanced插件之前，我一直缺乏好用的Markdown預(yù)覽工具。它不僅為你提供預(yù)覽，而且還有同步滾動(dòng)、PDF導(dǎo)出和PlantUML的功能。我非常喜歡這個(gè)工具，所以向經(jīng)常用Markdown的人們高度推薦。

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

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

小結(jié)

以上就是我每天最常用的VS Code擴(kuò)展。我希望你發(fā)現(xiàn)了一些對(duì)你的工作流程有用的新東西，你有什么好用的擴(kuò)展也可以在評(píng)論里推薦。

原文鏈接：

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

延伸閱讀：

VS Code會(huì)“一統(tǒng)江湖”嗎？-InfoQ

關(guān)注我并轉(zhuǎn)發(fā)此篇文章，私信我“領(lǐng)取資料”，即可免費(fèi)獲得InfoQ價(jià)值4999元迷你書(shū)，點(diǎn)擊文末「了解更多」，即可移步InfoQ官網(wǎng)，獲取最新資訊～

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。