Visual Studio Code?是用于構(gòu)建現(xiàn)代 Web 應(yīng)用程序的源代碼編輯器。它是一個免費的開源編輯器。它支持許多可用于 Web 應(yīng)用程序開發(fā)的擴(kuò)展。今天的分享中，傻大個黑科技小妹為您分享15個最佳的 VSCode web 開發(fā)擴(kuò)展：

Live Sass compiler

與 Visual Studio 擴(kuò)展等其他編譯器相比，此 VS Code 擴(kuò)展用于將 SCSS 文件快速編譯為 CSS 文件。這對于 Web 開發(fā)人員在使用 SCSS 文件開發(fā)網(wǎng)頁時非常方便。

https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass

Debugger for Chrome

此擴(kuò)展用于在 Google Chrome 瀏覽器中為 Visual Studio Code 環(huán)境中的網(wǎng)頁調(diào)試 JavaScript 代碼。這個擴(kuò)展比用于調(diào)試 JavaScript 代碼的 Chrome 控制臺方便得多。為此，首先安裝擴(kuò)展，然后設(shè)置lauch.json設(shè)置以調(diào)試您要調(diào)查的特定網(wǎng)頁。

https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

C＃

此擴(kuò)展用于在 Visual Studio Code 編輯器中使用 C# 開發(fā) Web 應(yīng)用程序。通過使用此擴(kuò)展，您可以使用 C# 代碼開發(fā)和訪問功能，如 Go to Definition、Find All Reference、IntelliSense 等，這些功能通常在 Visual Studio 等源編輯器中可用。

https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp

Live Server

此擴(kuò)展用于啟動具有靜態(tài)和動態(tài)頁面實時重新加載功能的開發(fā)本地服務(wù)器。只需在 VS 代碼中進(jìn)行更改并保存文件，就可以節(jié)省預(yù)覽對源代碼所做更改的時間。這將自動刷新瀏覽器并反映您在其中所做的更改，而不是我們手動刷新瀏覽器頁面。

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

ESLint

此擴(kuò)展用于分析您的 JavaScript 代碼并修復(fù)其中的錯誤。您可以安裝和編輯您的 JS 代碼以修復(fù)指出的錯誤。您可以在以下鏈接中找到有關(guān) ESLint 安裝和使用的詳細(xì)信息。

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Beautify

此擴(kuò)展名用于格式化 HTML 等文件。這些文件中的未格式化代碼通過此擴(kuò)展名轉(zhuǎn)換為格式化的可讀代碼。您可以在 VS Code 首選項中設(shè)置此設(shè)置，然后它將自動格式化您在編輯器中鍵入的所有代碼。

https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify

Better Comments

此擴(kuò)展用于區(qū)分注釋類型，如警告、錯誤、突出顯示和查詢，以提高代碼的可讀性和可理解性。

https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

Quokka

此擴(kuò)展用于在 Visual Studio 代碼編輯器本身中測試 JavaScript 代碼，而不是在瀏覽器控制臺中檢出它。

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

Polacode

此擴(kuò)展用于獲取代碼片段屏幕截圖。它可用于在片段屏幕截圖中輕松復(fù)制和粘貼您需要的代碼，并在安裝擴(kuò)展程序后保存它們。

https://marketplace.visualstudio.com/items?itemName=pnp.polacode

Path IntelliSense

此擴(kuò)展用于顯示項目文件路徑的提示。這在處理包含大量文件的項目時會派上用場。

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

Browser Preview

這個擴(kuò)展用于在 VS Code 編輯器中打開一個真實的瀏覽器來調(diào)試和檢查你對代碼所做的更改，而不是每次都在瀏覽器上檢查它們。

https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview

JavaScript (ES6) Code Snippets

此擴(kuò)展用于為 JavaScript 代碼設(shè)置快捷方式觸發(fā)器，可用于調(diào)用完整代碼，而不是在每個實例上輸入代碼。這在處理具有大量代碼的項目時很有用。

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

Settings Sync

此擴(kuò)展用于將您的設(shè)置保存在編輯器中以在新機(jī)器中恢復(fù)它們，而不是每次都配置它們。這對于在編輯器中設(shè)置自定義開發(fā)環(huán)境很有用。使用此擴(kuò)展，我們可以將設(shè)置上傳到 GitHub 位置，然后將它們恢復(fù)到新機(jī)器上供編輯使用。

https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

GitLens

此擴(kuò)展用于從可在 VS 環(huán)境中編輯的 Git 源獲取信息?？梢栽?VS 代碼本身內(nèi)部查看來自 Git 存儲庫文件的提交日志、文件歷史記錄等，這也節(jié)省了時間。

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

Web Dev

此擴(kuò)展是 Web 開發(fā)所需的多個擴(kuò)展的組合。此擴(kuò)展包括一些主要擴(kuò)展，例如Live Server、ESLint和JavaScript (ES6) Code Snippets。我們可以安裝 Web Dev 擴(kuò)展，而不是單獨安裝這些擴(kuò)展。

https://marketplace.visualstudio.com