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

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

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

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

　　1. 更漂亮

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

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

　　觀看更漂亮的動(dòng)作：

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

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

　　2. 腳本助推器

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

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

　　將聲明和初始化拆分為多個(gè)語(yǔ)句：

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

　　安裝： JavaScript 助推器 — Visual Studio Marketplace

　　3. 斷續(xù)器

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

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

　　例如，它可以使用紅色波浪線來(lái)通知錯(cuò)誤：

　　我們可以通過(guò)將鼠標(biāo)懸停在紅線上來(lái)查看有關(guān)錯(cuò)誤的詳細(xì)信息：

　　我們還可以使用該選項(xiàng)卡查看當(dāng)前 VSCode 工作區(qū)中每個(gè)文件中的所有錯(cuò)誤。Problems

　　安裝： ESLint — Visual Studio Marketplace

　　4. 吉特倫斯

　　GitLens 是另一個(gè)功能強(qiáng)大的擴(kuò)展，可幫助你充分利用可視化工作室代碼中的 Git 源代碼管理。

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

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

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

　　5. 實(shí)時(shí)服務(wù)器

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

　　在下面的演示中，將快速啟動(dòng)新服務(wù)器以顯示文件的內(nèi)容。修改和保存文件會(huì)立即重新加載服務(wù)器。這樣，您就不必在每次進(jìn)行更改時(shí)在瀏覽器中手動(dòng)重新加載頁(yè)面。index.html index.html

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

　　安裝：實(shí)時(shí)服務(wù)器 — 可視化工作室市場(chǎng)

　　6.CSS 偷看

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

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

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

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

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

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

　　Install： CSS 速覽 — Visual Studio Marketplace

　　7. 對(duì) HTML 中 CSS 類名的智能感知

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

　　當(dāng)使用包含數(shù)百個(gè)類的第三方 CSS 庫(kù)時(shí)，您會(huì)欣賞此擴(kuò)展的好處。

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

　　8. 腳本 (ES6) 代碼片段

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

　　下面是一個(gè)演示，其中此擴(kuò)展的 和 代碼段用于快速導(dǎo)入具有 ES6 語(yǔ)法的兩個(gè)模塊。impimd

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

　　9. 視覺(jué)工作室智能代碼

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

　　當(dāng)您鍵入字符以訪問(wèn)對(duì)象方法或字段時(shí)，IntelliCode 將建議一個(gè)可能在當(dāng)前方案中使用的成員列表。列表中的項(xiàng)目使用星號(hào)表示，如以下演示所示。

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

　　安裝： 智能代碼 — Visual Studio Marketplace

　　10. VS碼圖標(biāo)

　　圖標(biāo)包可用于自定義 Visual Studio 代碼中不同類型的文件的外觀。它們?cè)鰪?qiáng)了應(yīng)用程序的外觀，使識(shí)別和區(qū)分各種文件變得更加容易。

　　VSCode圖標(biāo)是最受歡迎的圖標(biāo)包擴(kuò)展之一，擁有一組高度全面的圖標(biāo)和超過(guò)1100萬(wàn)次下載。

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

　　安裝：vscode-icons — Visual Studio 市場(chǎng)

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