分享幾個(gè)我日常使用的VS Code插件

這篇文章中，我想介紹一下自己日常使用中最喜歡的Visual Studio Code擴(kuò)展。大多數(shù)時(shí)候，我用VS Code編寫的是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語句。這可以提供很多幫助，尤其是當(dāng)你的項(xiàng)目變得很大，并且在package.json中包含很多依賴項(xiàng)時(shí)。我不想再錯(cuò)過這個(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ǔ)全，不過針對(duì)的是你的文件系統(tǒng)。這倆插件的維護(hù)者是同一人，我也不想再錯(cuò)過這個(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è)很好的輔助。通過實(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è)置開發(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ò)展為本地開發(fā)服務(wù)器提供了熱重載功能，從而能幫助我解決這個(gè)問題，也就是說它會(huì)在保存對(duì)文件所做的任何更改后立即刷新頁面。它在狀態(tài)欄中有一個(gè)漂亮的“Go Live”按鈕，你只需單擊一下即可啟動(dòng)服務(wù)器。如果你還沒用上的話，一定要看看這個(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è)小插件，可通過自動(dòng)重命名和關(guān)閉標(biāo)簽來幫助你維護(hù)HTML文件。這也適用于React自己的JSX語法。如果你想節(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àng)目寫文檔，或者在markdown中寫筆記來理順自己的想法。大多數(shù)時(shí)候，我都是用VS Code來寫的，在找到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元迷你書，點(diǎn)擊文末「了解更多」，即可移步InfoQ官網(wǎng)，獲取最新資訊～

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

下載并安裝Visual Studio Code

登錄Visual Studio Code官網(wǎng)，點(diǎn)擊"Download Visual Studio Code"下拉列表，選擇適合自己電腦系統(tǒng)的版本進(jìn)行下載。

雙擊已下載的安裝文件"VSCodeUserSetup-{version}.exe",根據(jù)安裝向?qū)崾具M(jìn)行安裝，在此期間可以自行設(shè)置安裝路徑，且確保“添加到PATH(重啟后生效)”處于勾選狀態(tài)。

下載并安裝.NET.Core.SDK

進(jìn)入https://dotnet.microsoft.com/download，點(diǎn)擊"Download .NET Core SDK",下載安裝文件。

運(yùn)行.NET Core SDK安裝文件，點(diǎn)擊“安裝”按鈕即可進(jìn)行安裝，安裝完成后關(guān)閉窗口。

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

從 Visual Studio Code 市場安裝 C#擴(kuò)展

打開已安裝的Visual Studio Code程序，點(diǎn)擊左側(cè)”Extensions“圖標(biāo)，在搜索框輸入"C#"，選擇合適的C#擴(kuò)展，點(diǎn)擊其右側(cè)的"Install"按鈕進(jìn)行安裝。（注意：安裝完成后如果在右下角提示"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."，則有可能是因?yàn)槟阍诎惭b.NET Core SDK時(shí)Visual Studio Code處于打開狀態(tài)，此時(shí)的解決辦法是關(guān)閉Visual Studio Code后再重新啟動(dòng)）

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

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

1.打開項(xiàng)目

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

2.初始化 C# 項(xiàng)目：

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

3.運(yùn)行"Hello World"程序

鍵入 dotnet run，命令執(zhí)行完成后則會(huì)輸出"Hello World",并在項(xiàng)目文件下生成bin和obj文件。

4.調(diào)試

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

Visual Studio Code 會(huì)提示添加缺少的資產(chǎn)，以生成和調(diào)試應(yīng)用。選擇 “是” 。

若要打開調(diào)試視圖，請(qǐng)單擊左側(cè)菜單上的“調(diào)試”圖標(biāo)。找到窗格最上面的綠色箭頭。請(qǐng)確保已選擇旁邊下拉列表中的“.NET Core Launch (控制臺(tái))” 。

單擊第 9 行旁邊的編輯器邊距（編輯器中行號(hào)左側(cè)的空間）或者將文本光標(biāo)移動(dòng)到編輯器中的第 9 行并按 F9，為項(xiàng)目添加斷點(diǎn)。

請(qǐng)按 F5 或選擇綠色箭頭啟動(dòng)調(diào)試。在到達(dá)你在上一步中設(shè)置的斷點(diǎn)時(shí)，調(diào)試器會(huì)停止執(zhí)行程序。（調(diào)試時(shí)，可以在左上角的窗格中查看局部變量，也可以使用調(diào)試控制臺(tái)進(jìn)行查看）。選擇最上面的藍(lán)色箭頭以繼續(xù)調(diào)試，或選擇最上面的紅色方塊以停止調(diào)試。

言

Visual Studio Code最令人印象深刻的部分之一是可定制性，尤其是通過擴(kuò)展。隨著大量開發(fā)人員創(chuàng)建擴(kuò)展，功能實(shí)際上是無窮無盡的！

作為一名程序員，或多或少都會(huì)碼一點(diǎn)點(diǎn)CSS，不管是簡單的css顏色、字體設(shè)置，還是高級(jí)的css動(dòng)畫等。現(xiàn)在就為大家推薦一下VS Code中用于編寫CSS的一些最佳擴(kuò)展，讓你編寫CSS時(shí)更得心應(yīng)手。

1、HTML CSS Support

2、Intellisense for CSS Class Names

3、Autoprefixer

4、CSS Peek

5、Prettier - Code Formatter

6、Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets

HTML CSS Support

VS Code中6個(gè)令人驚嘆的CSS擴(kuò)展

HTML CSS Support（以及下一個(gè)擴(kuò)展）基于項(xiàng)目中包含的或遠(yuǎn)程引用的CSS在HTML文件中提供智能感知（提示）。下方是完整的功能列表：

1、Class attribute completion（類屬性）

2、Id attribute completion（id類屬性）

3、Supports Zen Coding completion for class and id attributes（支持類和id屬性的Zen Coding完成）

4、Scans workspace folder for css and scss files（掃描css和scss文件的工作區(qū)文件夾）

5、Supports remote css files（支持遠(yuǎn)程css文件）

有一點(diǎn)非常好用，那就是可以指定要緩存的遠(yuǎn)程CSS文件。添加以下設(shè)置來完成此操作。這個(gè)例子引用了bootstrap 4 css文件。

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

Intellisense for CSS Class Names

VS Code中6個(gè)令人驚嘆的CSS擴(kuò)展

Intellisense for CSS Class Names 提供與上述擴(kuò)展類似的功能. 但是它還將自動(dòng)從HTML文件中引用的CSS中提取類。在使用Emmet時(shí)，也可以通過intellisense使用獲得！

在任何時(shí)候，都可以通過打開命令選項(xiàng)板來觸發(fā)CSS文件中類，來重新緩存。

VS Code中6個(gè)令人驚嘆的CSS擴(kuò)展

Autoprefixer

VS Code中6個(gè)令人驚嘆的CSS擴(kuò)展

Autoprefixer是一款自動(dòng)管理瀏覽器前綴的插件，它可以解析CSS文件并且添加瀏覽器前綴到CSS內(nèi)容里

打開命令調(diào)色板并調(diào)用“Autoprefixer CSS”即可。

如：

::placeholder {
 color: gray;
}

自動(dòng)替換為：

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

VS Code中6個(gè)令人驚嘆的CSS擴(kuò)展

CSS Peek

VS Code中6個(gè)令人驚嘆的CSS擴(kuò)展

如果你像我一樣，討厭切換到我的.css文件來檢查附加到類或ID的屬性。那你可以使用css peek，你可以從html文件中查看css的懸停圖像。

這個(gè)擴(kuò)展還將類名和ID轉(zhuǎn)換成一個(gè)超鏈接，直接帶您訪問CSS中的類或ID定義！

安裝后，鼠標(biāo)指向選擇器，按Ctrl就可以顯示對(duì)應(yīng)樣式。

VS Code中6個(gè)令人驚嘆的CSS擴(kuò)展

Prettier - Code Formatter

prettier 對(duì)于自動(dòng)格式化JavaScript非常友好，但是你知道它也自動(dòng)格式化CSS嗎？

以前的css是這樣：

VS Code中6個(gè)令人驚嘆的CSS擴(kuò)展

格式化后是這樣：

VS Code中6個(gè)令人驚嘆的CSS擴(kuò)展

您可以將其設(shè)置為自動(dòng)保存或手動(dòng)保存。

Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets

VS Code中6個(gè)令人驚嘆的CSS擴(kuò)展

當(dāng)然，并非每個(gè)項(xiàng)目都使用Bootstrap或Font Awesome，但其中有很多都可以。這就是為什么我認(rèn)為值得分享這個(gè)擴(kuò)展，為Bootstrap 4，F(xiàn)ont Awesome 4和Font Awesome 5提供intellisense。

Bootstrap中有很多類，所以不可能記住它們。與使用Font Awesome一樣。每次我想添加一個(gè)圖標(biāo)時(shí)我都要查找語法，有了它就不需要了！

Bootstrap 4:

VS Code中6個(gè)令人驚嘆的CSS擴(kuò)展

Font Awesome 5:

VS Code中6個(gè)令人驚嘆的CSS擴(kuò)展

結(jié)語

如果您認(rèn)為還有什么沒有提到的，請(qǐng)?jiān)谙路皆u(píng)論！

在線咨詢

上一篇：一鍵即可復(fù)制網(wǎng)頁上的文字，媽媽再也不用擔(dān)心我查找資料了
下一篇：來，教你做個(gè)屬于自己的 Markdown 編輯器

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

分享幾個(gè)我日常使用的VS Code插件

Bracket Pair Colorizer 2

NPM Intellisense

Path Intellisense

Quokka.js

Docker

Live Server

Auto Close Tag和Auto Rename Tag

Markdown Preview Enhanced

小結(jié)

下載并安裝Visual Studio Code

下載并安裝.NET.Core.SDK

從 Visual Studio Code 市場安裝 C#擴(kuò)展

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

言

HTML CSS Support

Intellisense for CSS Class Names

Autoprefixer

CSS Peek

Prettier - Code Formatter

Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets

結(jié)語

您的項(xiàng)目需求