4種方法來在Visual Studio Code中執行HTML檔案 如何在Visual Studio Code中執行HTML檔案

目錄

方法1：建立、開啟和儲存HTML檔案1、開啟Visual Studio Code。2、開啟或建立一個新的HTML檔案。3、把檔案另存為HTML檔案。方法2：使用終端1、開啟Visual Studio Code。2、開啟或建立一個新的HTML檔案。3、開啟一個新的終端。4、鍵入cd後接HTML檔案的路徑，然後按? Enter5、鍵入start後接HTML檔名，然後按? Enter方法3：使用“HTML Preview”擴充套件1、開啟Visual Studio Code。2、點選“擴充套件”按鈕。3、在搜尋欄中鍵入HTML Preview。4、點選“HTML Preview”擴充套件。5、點選安裝6、開啟或建立一個新的HTML檔案。7、點選分屏預覽按鈕。方法4：使用“Open in Browser”擴充套件1、開啟Visual Studio Code。2、點選“擴充套件”按鈕。3、在搜尋欄中鍵入open in browser。4、點選“open in browser”擴充套件。5、點選安裝6、開啟或建立一個新的HTML檔案。7、在HTML程式碼中右鍵點選任意位置。8、點選在預設瀏覽器中開啟Visual Studio Code是微軟推出的一個原始碼編輯器。它在Windows、macOS和Linux上都能使用。你可以通過它用各種編碼語言來編寫和編輯程式碼，其中也包括HTML。但要是你想執行HTML程式碼來預覽外觀，又該怎麼辦呢？好在有一些Visual Studio Code的擴充套件能讓你在Visual Studio Code中輕鬆執行HTML程式碼。你也可以使用終端來執行HTML檔案。這篇文章將教你如何在Visual Studio Code中執行HTML檔案。

方法1：建立、開啟和儲存HTML檔案

1、開啟Visual Studio Code。它的圖示有點像一條藍色絲帶。點選圖示即可啟動Visual Studio Code。你可以在Windows的“開始”選單、Mac的“應用”資料夾或Linux的 “應用程式”選單中找到它。如果你還沒有安裝，可以從 https://code.visualstudio.com/ 免費下載Visual Studio Code。只用點選網頁上的下載按鈕，然後從網頁瀏覽器或“下載”資料夾中開啟安裝檔案。按照說明完成安裝。

2、開啟或建立一個新的HTML檔案。通過以下步驟之一來開啟或建立一個新檔案。要建立一個新檔案，點選頂部選單欄中的檔案。然後點選新建檔案。開始輸入HTML程式碼。

要開啟現有的檔案，可在頂部的選單欄中點選檔案。然後點選開啟檔案。找到你要開啟的HTML檔案，點選選中它。然後點選開啟。

3、把檔案另存為HTML檔案。如果準備在Visual Studio Code中執行HTML檔案，你首先需要把檔案另存為HTML格式。一旦儲存了HTML檔案，你就可以在所選擇的任何瀏覽器中執行它。按照以下步驟在Visual Studio Code中儲存HTML檔案：點選頂部選單欄中的檔案。

點選另存為。

在“檔名”旁邊輸入檔名。

使用“另存為型別”旁邊的下拉選單選擇“HTML”。

點選儲存。

方法2：使用終端

1、開啟Visual Studio Code。Visual Studio Code的圖示有點像一條藍色絲帶。點選圖示即可啟動Visual Studio Code。你可以在Windows的“開始”選單、Mac的“應用”資料夾或Linux的 “應用程式”選單中找到它。

2、開啟或建立一個新的HTML檔案。如果還沒有開啟HTML檔案，那就開啟一個現有的HTML檔案，或者建立一個新的HTML檔案並另存為HTML格式。如果已經開啟，那就點選螢幕上方包含你的HTML檔案的選項卡來進行檢視。

3、開啟一個新的終端。點選螢幕上方的終端，然後點選新建終端。終端是在Visual Studio Code中執行HTML檔案而不使用擴充套件的唯一方法。但同時它也是最複雜的方法。或者，你可以點選頂部的檢視，然後點選終端。

4、鍵入cd後接HTML檔案的路徑，然後按? Enter。這樣就會轉到你的HTML檔案的位置。比如，你的HTML檔案在“文件”資料夾中，你就可以鍵入cd 使用者使用者名稱文件並按Enter。如果你的HTML檔案被儲存在與作業系統不同碟符的分割槽上，那你得在終端中改成該碟符，然後才能轉到HTML檔案的路徑。要進行更改，只用輸入碟符（比如D:表示D:盤），然後按Enter。

如果你不確定HTML檔案的儲存位置，可以右鍵點選螢幕上方的HTML檔案選項卡，然後點選複製路徑。在終端輸入cd，然後緊接著就貼上剛才複製的路徑。刪除掉路徑末尾的檔名，然後按Enter。

如果HTML檔案的路徑中的任何一個資料夾名稱包含了空格，那麼終端就無法轉到該資料夾。使用Windows上的“檔案資源管理器”或Mac上的“訪達”轉到任何名稱中包含空格的資料夾，然後重新命名這些資料夾以避免任何空格（例如，你的資料夾名稱為“HTML Files”，那就把它改為“HTML_Files”）。

5、鍵入start後接HTML檔名，然後按? Enter。例如，你要執行一個索引HTML檔案，那就可以鍵入start index.html並按Enter。這樣會在一個單獨的視窗中啟動HTML檔案，以便你預覽HTML檔案。要關閉預覽，只用點選視窗頂部的“x”圖示。

方法3：使用“HTML Preview”擴充套件

1、開啟Visual Studio Code。它的圖示有點像一條藍色絲帶。點選圖示即可啟動Visual Studio Code。你可以在Windows的“開始”選單、Mac的“應用”資料夾或Linux的 “應用程式”選單中找到它。

2、點選“擴充套件”按鈕。這是左側選單欄中類似4個方塊的圖示。這樣將顯示擴充套件的搜尋選單。

3、在搜尋欄中鍵入HTML Preview。搜尋欄位於左邊擴充套件選單的頂部。這樣將顯示符合你搜索查詢的擴充套件列表。“HTML Preview”是Visual Studio Code的一個擴充套件，讓你能在Visual Studio Code中使用分屏或全屏模式來預覽HTML檔案。

4、點選“HTML Preview”擴充套件。它應該是列表頂部的第一個擴充套件。它是由Thomas Haakon Townsend建立的，圖示類似於一個橙色的盾牌，中間有一個“5”（HTML 5的標誌）。

5、點選安裝。它在擴充套件選單右側的資訊頁面中，位於“HTML Preview”標題下面。這樣將安裝該擴充套件。等幾分鐘，讓它完成安裝。

6、開啟或建立一個新的HTML檔案。如果還沒有開啟HTML檔案，那就開啟一個現有的HTML檔案，或者建立一個新的HTML檔案並另存為HTML格式。如果已經開啟，那就點選螢幕上方包含你的HTML檔案的選項卡來進行檢視。

7、點選分屏預覽按鈕。這是一個類似於分屏的圖示，左邊有一個放大鏡。它位於螢幕的右上角。這樣就會在Visual Studio Code中以分屏方式開啟HTML檔案的預覽。按住Alt並點選預覽按鈕，然後就能檢視HTML程式碼的全屏預覽。

要關閉預覽，點選螢幕上方預覽標籤中的“x”圖示就可以了。

方法4：使用“Open in Browser”擴充套件

1、開啟Visual Studio Code。它的圖示有點像一條藍色絲帶。點選圖示即可啟動Visual Studio Code。你可以在Windows的“開始”選單、Mac的“應用”資料夾或Linux的 “應用程式”選單中找到它。

2、點選“擴充套件”按鈕。這是左側選單欄中類似4個方塊的圖示。這樣將顯示擴充套件的搜尋選單。

3、在搜尋欄中鍵入open in browser。搜尋欄位於左邊擴充套件選單的頂部。這樣將顯示符合你搜索查詢的擴充套件列表。“Open in browser”是Visual Studio Code的一個擴充套件，讓你能在Visual Studio Code中使用所選擇的網路瀏覽器來開啟HTML檔案。

4、點選“open in browser”擴充套件。它應該是列表頂部的第一個擴充套件。它是由TechER建立的，名稱都是小寫字母。點選擴充套件選中它。

5、點選安裝。它在擴充套件選單右側的資訊頁面中，位於“open in browser”標題的下面。這樣將安裝該擴充套件。等幾分鐘，讓它完成安裝。

6、開啟或建立一個新的HTML檔案。如果還沒有開啟HTML檔案，那就開啟一個現有的HTML檔案，或者建立一個新的HTML檔案並另存為HTML格式。如果已經開啟，那就點選螢幕上方包含你的HTML檔案的選項卡來進行檢視。

7、在HTML程式碼中右鍵點選任意位置。這項將顯示一個上下文選單。

8、點選在預設瀏覽器中開啟。這樣就會在預設網路瀏覽器中開啟HTML檔案，以便你進行檢視。或者，你也可以點選在其他瀏覽器中開啟，然後雙擊你選擇的網路瀏覽器。

如果要求你選擇一個預設瀏覽器，那就點選你要用來開啟檔案的瀏覽器，然後點選確定。