Categories
程式開發

分享幾個我日常使用的VS Code插件


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

支架對著色器2

分享幾個我日常使用的VS Code插件 1

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

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

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

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

NPM智能感知

分享幾個我日常使用的VS Code插件 2

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

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

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

路徑智能感知

分享幾個我日常使用的VS Code插件 3

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

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

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

Quokka.js

分享幾個我日常使用的VS Code插件 4

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

鏈接:https://quokkajs.com/

市場:https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

碼頭工人

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

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

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

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

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

實時服務器

分享幾個我日常使用的VS Code插件 5

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

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

市場:https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

自動關閉標籤和自動重命名標籤

分享幾個我日常使用的VS Code插件 6

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

自動關閉標籤:https://github.com/formulahendry/vscode-auto-close-tag“ /https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

自動重命名標籤:https://github.com/formulahendry/vscode-auto-rename-tag“ /https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

Markdown預覽增強

分享幾個我日常使用的VS Code插件 7

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

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

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

小結

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

原文鏈接:

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