如何從 VS Code 在瀏覽器中打開

如果您使用的是 HTML、PHP 或 JS 文件，您可能希望通過 Visual Studio Code 在瀏覽器中打開它們。但是，沒有這樣做的集成選項。這可能會令人沮喪，尤其是當您想快速查看編碼結果時。

幸運的是，您可以通過其他方法啟用“在瀏覽器中打開”功能。本文將向您展示如何做到這一點。

如何在 Windows PC 上的 VS Code 中在瀏覽器中打開

在 Windows 中獲取 Visual Studio Code 的“在瀏覽器中打開”選項的最簡單方法是使用擴展。在 Visual Studio Code 中安裝擴展相對簡單，使用它們在瀏覽器中打開文件也是如此。

1. 在Visual Studio 代碼編輯器中打開您的 HTML 文件。
   
2. 在最左側的垂直工具欄上，單擊“擴展”。或者，您可以使用鍵盤快捷鍵“Ctrl + Shift + X”來啟動擴展程序。
   
3. 單擊搜索欄以啟用寫作。
   
4. 輸入“在瀏覽器中打開”。選擇與您的搜索詞匹配的擴展名。
   
5. 單擊“安裝”按鈕。
   
6. 重新加載程序。
7. 從左側工具欄中選擇資源管理器。
   
8. 在資源管理器中找到您的 HTML 文件並右鍵單擊它。選擇“在默認瀏覽器中打開”或“在其他瀏覽器中打開”。
   
9. 如果您選擇“在默認瀏覽器中打開”選項，HTML 文件將在任何設置為默認的瀏覽器中啟動。如果選擇“在其他瀏覽器中打開”，則需要指定將使用的瀏覽器。

您可以在Visual Studio Marketplace上找到大量有用的擴展。或者，您可以在此處獲得具有最正面用戶評論的“在瀏覽器中打開”擴展程序：擴展程序 1、擴展程序 2、擴展程序 3、擴展程序 4。

如何在 Mac 上的 VS Code 中在瀏覽器中打開

可以使用增加程序功能的各種擴展來升級 Visual Studio Code。一種類型的擴展可以在默認瀏覽器或其他瀏覽器中打開 HTML、PHP 或 JS 文件。以下是在 Mac 上啟用該選項的方法。

1. 使用Visual Studio Code Editor打開所需的文件。
   
2. 轉到左側的工具欄並選擇“擴展”。
   
3. 單擊“擴展”面板中的搜索欄，然後輸入“在瀏覽器中打開”。
   
4. 選擇一個擴展，然後單擊“安裝”。
   
5. 重新加載軟件。
6. 轉到左側工具欄並選擇資源管理器。
   
7. 在資源管理器面板中找到要打開的文件，然後右鍵單擊它。選擇“在默認瀏覽器中打開”或“在其他瀏覽器中打開”。
   
8. “在默認瀏覽器中打開”選項將使用預選的瀏覽器啟動文件。“在其他瀏覽器中打開”將彈出提示，您可以在其中選擇計算機上安裝的瀏覽器之一。
   

Visual Studio Marketplace有大量可供選擇的擴展，可以將新功能添加到 Visual Studio Code。如果您想進一步調整程序，該網站非常值得探索。如果您只對 Open in Browser 擴展程序感興趣，這裡有一些建議：擴展程序 1、擴展程序 2、擴展程序 3、擴展程序 4。

在瀏覽器快捷方式中打開

幾乎每個 Visual Studio Code 的“在瀏覽器中打開”擴展都啟用了鍵盤快捷鍵。但是，快捷方式並不統一。相反，每個擴展都有一個特定的鍵組合，可以激活在瀏覽器中打開文件。

以下是本文中建議的擴展的鍵盤快捷鍵。

1. 擴展 1：Windows 上的“Ctrl + 1”，Mac 上的“Command + 1”。
   
   
2. 擴展 2：Windows 上的“Ctrl + Alt + O”，Mac 上的“Command + Option (Alt) + O”。
   
3. 擴展 3：Windows 上的“Ctrl + Shift + F9”，Mac 上的“Command + Shift + F9”。
   
   
4. 擴展 4：Windows 上的“Ctrl + Shift + P”，Mac 上的“Command + Shift + P”。
   
   

請注意，這些快捷方式僅適用於本文中鏈接的各自擴展。如果您選擇安裝不同的擴展，相關的快捷方式可能會列在其市場頁面上。

在 Visual Studio Code 中運行 HTML

如果您對在 Visual Studio Code 中使用 HTML 感興趣，這裡有一些在程序中運行 HTML 代碼的方法。

第一種方法包括手動加載您希望運行的文件。

1. 打開 Visual Studio Code 並創建一個新的 HTML 文件。
   
2. 轉到“文件”，然後單擊“保存”。
   
3. 使用 HTML:5，激活 HTML 模板。然後，打開您在步驟 2 中保存的文件。
   
4. 使用您之前安裝的“在瀏覽器中打開”擴展程序在瀏覽器中啟動文件。
5. 讓瀏覽器保持打開狀態，返回到 Visual Studio Code 並編輯 HTML 文件，保存更改。
   
6. 返回瀏覽器並單擊刷新。您應該看到頁面根據您的編輯而變化。
   
7. 在繼續編輯 HTML 文件時，重複步驟 5 和 6 以檢查您的進度。

手動方法可以幫助跟踪您的工作。然而，還有一個更好的解決方案：自動加載。此選項將要求您安裝另一個擴展，但值得花時間。

1. 在 Visual Studio Code 中，轉到位於左側工具欄底部的擴展。
   
2. 在擴展程序搜索欄中，輸入“live server”。
   
3. 單擊 Live Server 擴展旁邊的“安裝”按鈕。
   
4. 創建並保存一個新的 HTML 文件。
   
   
5. 在 Visual Studio Code Explorer 中，右鍵單擊您的新文件。選擇“打開實時服務器”。
   
6. HTML 文件將在瀏覽器中打開。完成後，嘗試編輯 HTML 代碼。保存你的進步。
   
   
7. 一旦您在代碼中創建更改並保存它，您的瀏覽器就會刷新，顯示新內容。您不需要手動刷新頁面，而是能夠實時視覺確認更改。
   

其他有用的 Visual Studio Code HTML 擴展

如前所述，Visual Studio Marketplace 充滿了優秀的工具，其中許多都是針對 HTML 的。以下是 10 個最有用且評分最高的 HTML 擴展。

• lit-plugin：一種工具，可以突出顯示語法、檢查輸入並幫助您無錯地完成代碼。此擴展具有可自定義的規則。
• SCSS Everywhere：HTML、SCSS、Elixir、SASS、PHP、CSS 和許多其他文件類型的類定義的自動完成擴展。
• Angular Snippets：添加 Angular 片段以便在 HTML 和 TypeScript 中輕鬆使用。該擴展程序通過在部分輸入後展開片段來工作。
• ES6 String HTML：啟用 es6 字符串代碼支持語法突出顯示。適用於 HTML、CSS、XML、GLSL 和其他格式。
• 拆分 HTML 屬性：此擴展將拆分 HTML 屬性，以及 Angular、Vue 和 React 道具和指令。您可以在打開和自動關閉標籤以及多個選擇上使用它。
• Djaneiro – Django Snippets：一個廣泛的 django HTML 模板片段集合。使用此擴展程序將顯著縮短打字時間。
• 實時預覽：Microsoft 的實時預覽擴展允許本地服務器託管。如果您的項目不使用 Angular、React 或其他服務器工具，此擴展將啟用常規和嵌入式 HTML 預覽，並實時刷新頁面。
• Oracle JET Core：這個由 Oracle Corporation 創建的擴展提供了對 Oracle JET 自定義 HTML 數據的全面支持。包含的片段將自動完成任何 JET 屬性和標籤。
• CSS 導航：為 HTML 到 CSS、HTML 到 Less 和 HTML 到 Sass 啟用 Go to Definition。Peek Definition 命令也已啟用。
• HTML 重音字符轉換器：用適當的 HTML 實體無縫替換特殊字符。此擴展在某些情況下很有用，但在處理可本地化字符串時必不可少。

您可以從瀏覽器運行 Visual Studio Code

除了在瀏覽器中運行 HTML 文件外，還可以在線使用整個 Visual Studio Code。這需要您啟動為瀏覽器使用而開發的特定版本的程序。

值得注意的是，與桌面 Visual Studio Code 相比，此版本要輕量級得多。但是，它可以是簡單的存儲庫和文件導航以及較小的代碼更改的直接解決方案。

如果您想試用 Visual Studio Code 瀏覽器變體，可以單擊此處立即開始。

啟動並運行您的 HTML 文件

使用 Visual Studio Code 的專用擴展程序可以輕鬆地在瀏覽器中打開 HTML 文件。如果您決定探索此編碼工具的大量擴展產品，那麼“在瀏覽器中打開”功能將只是您旅程的開始。

您是否設法在您選擇的瀏覽器中打開您的 HTML 文件？你用的是哪個擴展？請在下面的評論部分告訴我們。