這篇文章中，我想介紹一下自己日常使用中最喜歡的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官網，獲取最新資訊～

isual Studio Code是一款輕量級但功能強大的源代碼編輯器，它可以在你的桌面上運行，適用于Windows、macOS和Linux。它內置了對JavaScript、TypeScript和Node.js的支持，并為其他語言(如C++、C#、Java、Python、PHP、Go)和運行時(如.NET和Unity)提供了豐富的擴展生態系統。本文以在Visual Studio Code中安裝與配置C#為例進行語言配置講解。

下載并安裝Visual Studio Code

• 登錄Visual Studio Code官網，點擊"Download Visual Studio Code"下拉列表，選擇適合自己電腦系統的版本進行下載。

• 雙擊已下載的安裝文件"VSCodeUserSetup-{version}.exe",根據安裝向導提示進行安裝，在此期間可以自行設置安裝路徑，且確?！疤砑拥絇ATH(重啟后生效)”處于勾選狀態。

下載并安裝.NET.Core.SDK

• 進入https://dotnet.microsoft.com/download，點擊"Download .NET Core SDK",下載安裝文件。

• 運行.NET Core SDK安裝文件，點擊“安裝”按鈕即可進行安裝，安裝完成后關閉窗口。

• 打開“命令提示符”窗口，輸入命令"dotnet"，按Enter鍵執行命令，若出現如下圖所示關于怎樣使用dotnet的信息，則說明.NET Core SDK安裝成功。

從 Visual Studio Code 市場安裝 C#擴展

打開已安裝的Visual Studio Code程序，點擊左側”Extensions“圖標，在搜索框輸入"C#"，選擇合適的C#擴展，點擊其右側的"Install"按鈕進行安裝。（注意：安裝完成后如果在右下角提示"The .NET Core SDK cannot be located. .NET Core debugging will not be enabled. Make sure the .NET Core SDK is installed and is on the path."，則有可能是因為你在安裝.NET Core SDK時Visual Studio Code處于打開狀態，此時的解決辦法是關閉Visual Studio Code后再重新啟動）

通過Visual Studio Code開始使用.NET Core

.NET Core 提供了快速運行的模塊化平臺，用于創建在 Windows、Linux 和 macOS 上運行的應用程序。 帶 C# 擴展的 Visual Studio Code 提供功能強大的編輯體驗，完全支持 C# IntelliSense（智能代碼填充）和調試。讓我們從 .NET Core 上的一個簡單“Hello World”程序入手：

1.打開項目

• 打開 Visual Studio Code。
• 依次單擊左側菜單上的“資源管理器”圖標和 “打開文件夾” 。
• 從主菜單中選擇“文件” > “打開文件夾”，打開要在其中放置 C# 項目的文件夾，然后單擊“選擇文件夾”
• 在我們的示例中，為項目創建名為“HELLOWORLD”的文件夾 。

2.初始化 C# 項目：

• 通過從主菜單中選擇“視圖” > “集成終端” ，從 Visual Studio Code 中打開集成終端。
• 在終端窗口中，鍵入“dotnet new console”。
• 此命令在已編寫“Hello World”簡單程序的文件夾中創建“Program.cs”文件，以及名為“HelloWorld.csproj”的 C# 項目文件 。

3.運行"Hello World"程序

• 鍵入 dotnet run，命令執行完成后則會輸出"Hello World",并在項目文件下生成bin和obj文件。

4.調試

• 單擊打開 Program.cs。 在 Visual Studio Code 中首次打開 C# 文件時，會在編輯器中加載 OmniSharp。

• Visual Studio Code 會提示添加缺少的資產，以生成和調試應用。 選擇 “是” 。

• 若要打開調試視圖，請單擊左側菜單上的“調試”圖標。找到窗格最上面的綠色箭頭。 請確保已選擇旁邊下拉列表中的“.NET Core Launch (控制臺)” 。

• 單擊第 9 行旁邊的編輯器邊距 （編輯器中行號左側的空間）或者將文本光標移動到編輯器中的第 9 行并按 F9，為項目添加斷點。

• 請按 F5 或選擇綠色箭頭啟動調試。 在到達你在上一步中設置的斷點時，調試器會停止執行程序。（調試時，可以在左上角的窗格中查看局部變量，也可以使用調試控制臺進行查看）。選擇最上面的藍色箭頭以繼續調試，或選擇最上面的紅色方塊以停止調試。

"css.remoteStyleSheets": [
 "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
]

::placeholder {
 color: gray;
}

::-webkit-input-placeholder {
 color: gray;
}
:-ms-input-placeholder {
 color: gray;
}
::-ms-input-placeholder {
 color: gray;
}
::placeholder {
 color: gray;
}