將這些功能強大的 VSCode 擴展安裝到顯著在 Web 開發(fā)過程中提高您的工作效率。

　　視覺工作室代碼是目前使用最廣泛的源代碼編輯器之一，在GitHub上有超過136k顆星。它的受歡迎程度是由于其輕巧，靈活，開源性質，簡單性和可擴展性。

　　說到可擴展性，VSCode有數(shù)千個擴展，您可以安裝這些擴展來提高開發(fā)人員的工作效率，并使自己免于執(zhí)行日常任務。它們都可以在Visual Studio代碼市場中使用，其中絕大多數(shù)都是完全免費的。

　　本文將介紹 10 個功能強大的 Visual Studio 代碼擴展，這些擴展可顯著改善 Web 開發(fā)體驗。為每個示例用法和安裝鏈接提供了示例。

　　1. 更漂亮

　　“更漂亮”是一個有用的工具，它使用固執(zhí)己見和可自定義的規(guī)則自動設置代碼格式。它可確保所有代碼具有一致的格式，并有助于在涉及多個開發(fā)人員的協(xié)作項目中強制實施特定的樣式約定。

　　Visual Studio 代碼的更漂亮的擴展帶來了代碼編輯器和更漂亮的代碼之間的無縫集成，允許您使用鍵盤快捷鍵或在保存文件后立即輕松設置代碼格式。

　　觀看更漂亮的動作：

　　“漂亮”會在保存文件后立即格式化代碼

　　安裝： 漂亮 — 代碼格式化程序 — Visual Studio Marketplace

　　2. 腳本助推器

　　此擴展使用代碼操作升級 Visual Studio 代碼，以執(zhí)行使用 JavaScript 編程時發(fā)生的常見重構任務。

　　它們是它可以執(zhí)行的數(shù)十種代碼操作，包括：用三元運算符替換語句：if...else

　　將聲明和初始化拆分為多個語句：

　　并將函數(shù)轉換為箭頭函數(shù)：

　　安裝： JavaScript 助推器 — Visual Studio Marketplace

　　3. 斷續(xù)器

　　ESLint 是一種查找并修復 JavaScript 代碼中問題的工具。它處理代碼質量和編碼風格問題，幫助識別可能產(chǎn)生棘手錯誤的編程模式。

　　可視化工作室代碼的 ESLint 擴展支持在 ESLint 和代碼編輯器之間進行集成。此集成允許 ESLint 直接在編輯器中通知您問題。

　　例如，它可以使用紅色波浪線來通知錯誤：

　　我們可以通過將鼠標懸停在紅線上來查看有關錯誤的詳細信息：

　　我們還可以使用該選項卡查看當前 VSCode 工作區(qū)中每個文件中的所有錯誤。Problems

　　安裝： ESLint — Visual Studio Marketplace

　　4. 吉特倫斯

　　GitLens 是另一個功能強大的擴展，可幫助你充分利用可視化工作室代碼中的 Git 源代碼管理。

　　GitLens 顯示包含重要存儲庫數(shù)據(jù)和當前文件信息(如文件歷史記錄、提交、分支和遠程)的視圖。

　　將光標放在編輯器中的任何一行上，GitLens 將顯示有關更改該行的最新提交的信息：

　　安裝： GitLens — Git 增壓 — Visual Studio Marketplace

　　5. 實時服務器

　　VSCode 的實時服務器擴展將啟動一個本地服務器，該服務器使用工作區(qū)中的文件內容提供頁面。當關聯(lián)文件發(fā)生更改時，服務器將自動重新加載。

　　在下面的演示中，將快速啟動新服務器以顯示文件的內容。修改和保存文件會立即重新加載服務器。這樣，您就不必在每次進行更改時在瀏覽器中手動重新加載頁面。index.html index.html

　　如演示所示，可以使用 VSCode 資源管理器中文件的右鍵單擊上下文菜單中的項輕松啟動新服務器。Open with Live Server

　　安裝：實時服務器 — 可視化工作室市場

　　6.CSS 偷看

　　通過 CSS 速覽擴展，您可以快速查看 HTML 中分配的各種類名和 ID 的 CSS 樣式定義。

　　有三種方法可以使用 CSS 速覽：

　　您可以按住該鍵并將鼠標懸停在類名或 ID 上，以查看其定義。Ctrl

　　可以使用鍵盤快捷鍵打開一個永久定義窗口，該窗口顯示類名或 ID 的 CSS 定義。

　　可以使用鍵盤快捷鍵導航到定義在其 CSS 文件中的位置。

　　以下是所有這些方法的演示：

　　Install： CSS 速覽 — Visual Studio Marketplace

　　7. 對 HTML 中 CSS 類名的智能感知

　　此擴展可以與 CSS 速覽攜手合作，它為當前可視化工作室代碼工作區(qū)中的現(xiàn)有 CSS 定義中的 HTML 屬性提供代碼完成。class

　　當使用包含數(shù)百個類的第三方 CSS 庫時，您會欣賞此擴展的好處。

　　安裝：用于 HTML 中的 CSS 類名的智能感知 — Visual Studio Marketplace

　　8. 腳本 (ES6) 代碼片段

　　顧名思義，這是一個擴展，它以 ES6 語法完全加載了大量節(jié)省時間的 JavaScript 代碼片段。

　　下面是一個演示，其中此擴展的 和 代碼段用于快速導入具有 ES6 語法的兩個模塊。impimd

　　安裝：腳本 (ES6) 代碼片段 — 可視化工作室市場

　　9. 視覺工作室智能代碼

　　人工智能繼續(xù)提高工人在各種工作中的生產(chǎn)力，開發(fā)人員也不會被排除在外。IntelliCode 是一種生成智能代碼完成建議的工具，這些建議在當前代碼上下文中是有意義的。它使用AI模型來做到這一點，該模型已經(jīng)在GitHub上數(shù)千個流行的開源項目中進行了訓練。

　　當您鍵入字符以訪問對象方法或字段時，IntelliCode 將建議一個可能在當前方案中使用的成員列表。列表中的項目使用星號表示，如以下演示所示。

　　智能代碼可用于 JavaScript、類型腳本、蟒蛇和許多其他語言。

　　安裝： 智能代碼 — Visual Studio Marketplace

　　10. VS碼圖標

　　圖標包可用于自定義 Visual Studio 代碼中不同類型的文件的外觀。它們增強了應用程序的外觀，使識別和區(qū)分各種文件變得更加容易。

　　VSCode圖標是最受歡迎的圖標包擴展之一，擁有一組高度全面的圖標和超過1100萬次下載。

　　它超越了文件擴展名區(qū)分，為具有特定名稱的文件和文件夾(包括 、 和 ) 提供不同的圖標。package.jsonnode_modules.prettierrc

　　安裝：vscode-icons — Visual Studio 市場

　　因此，我們已經(jīng)完成了 10 個基本擴展，這些擴展有助于在 Visual Studio 代碼中進行 Web 開發(fā)。立即安裝它們以提高開發(fā)人員的工作效率，并提高您作為Web開發(fā)人員的生活質量。