安裝完其實就可以直接使用了，一般來說不必手動配置，點擊右下角的go live按鈕就可以運行。默認端口是5500
好的，為你詳細說明如何在 VS Code 中配置 Live Server 插件。這是一個非常有用的插件，我們不僅會講如何安裝和使用，還會介紹如何根據你的偏好進行個性化配置。
第一步：安裝 Live Server
如果還沒安裝，這是第一步。
- 打開 VS Code。
- 點擊左側邊欄的 擴展(Extensions) 圖標（四個方塊的圖標）。
- 在搜索框中輸入
Live Server。 - 找到由 Ritwick Dey 開發的那個插件，點擊 Install (安裝)。
第二步：基本使用方法
安裝成功后，VS Code 右下角的狀態欄會出現一個 Go Live 的按鈕。
你有兩種方式啟動它：
- 點擊
Go Live按鈕：直接點擊狀態欄的Go Live按鈕，它會自動為你當前的 HTML 文件啟動一個服務器。 - 右鍵菜單：在你的 HTML 文件上右鍵，在彈出的菜單中選擇
Open with Live Server。
啟動后，它會自動用你的默認瀏覽器打開頁面。現在，每當你修改并保存 HTML、CSS 或 JavaScript 文件時，瀏覽器里的頁面都會自動刷新，無需手動操作。
要關閉服務器，只需再次點擊右下角那個已經變為顯示端口號（如 Port: 5500）的按鈕即可。
第三步：個性化配置 (核心部分)
現在我們來回答你的問題：如何“配置”它。Live Server 的所有配置都在 VS Code 的設置 (settings.json) 文件中進行。
如何打開 settings.json？
- 使用快捷鍵
Ctrl + Shift + P(macOS:Cmd + Shift + P) 打開命令面板。 - 輸入
settings.json，然后選擇首選項: 打開用戶設置 (JSON)(Preferences: Open User Settings (JSON))。 - 這會打開一個 JSON 文件，你可以在這里添加或修改配置項。
下面是一些最常用的配置項，你可以把它們復制到你的 settings.json 文件的大括號 {} 內。
常用配置示例
{// 在這里添加你的 Live Server 配置"liveServer.settings.port": 8080, // 設置服務器端口號，默認為 5500。如果 5500 端口被占用，可以改成其他的，比如 8080"liveServer.settings.root": "/src", // 設置服務器的根目錄。默認是當前打開的文件夾。如果你的入口文件在 src 目錄下，可以這樣設置"liveServer.settings.CustomBrowser": "chrome", // 設置要使用的瀏覽器。'chrome', 'firefox', 'safari' 等。在 Windows 上是 'chrome'，在 macOS 上可能是 'google chrome'"liveServer.settings.NoBrowser": true, // 設置為 true 后，啟動服務器時不會自動打開瀏覽器，你需要手動輸入地址（如 http://127.0.0.1:8080）"liveServer.settings.fullReload": true, // 設為 true 時，每次保存都會強制整個頁面重新加載，而不是熱重載（hot reload）"liveServer.settings.wait": 100, // 保存文件后，等待多少毫秒再刷新瀏覽器。單位是毫秒// 如果你想使用 HTTPS"liveServer.settings.https": {"enable": false, // 設置為 true 來啟用 https"key": "", // https key 的路徑"cert": "" // https cert 的路徑},// 其他 VS Code 設置..."editor.fontSize": 16
}
如何使用上面的示例？
- 打開你的
settings.json文件。 - 如果文件是空的（只有一個
{}），直接把"liveServer.settings.port": 8080,這樣的單行配置復制進去。 - 如果文件里已經有其他配置了，確保在每一行配置的末尾加上逗號
,(最后一行除外)。
例如，只修改端口和瀏覽器：
{"editor.fontSize": 14,"workbench.colorTheme": "Default Dark+",// --- 在這里添加你的 Live Server 配置 ---"liveServer.settings.port": 9000,"liveServer.settings.CustomBrowser": "firefox"
}
修改并保存 settings.json 文件后，配置會立即生效。下次你再啟動 Live Server 時，它就會使用新的配置了（比如，用 Firefox 在 9000 端口打開頁面）。
第四步：故障排查
如果你遇到 Live Server 無法正常工作的情況，可以檢查以下幾點：
- 端口被占用：最常見的問題。如果終端提示 “Port is already in use”，就按照上面的方法，在
settings.json里換一個端口號（比如5501、8888等）。 - 無法自動打開瀏覽器：檢查
liveServer.settings.CustomBrowser的值是否正確。- Windows: 可能是
chrome,firefox。 - macOS: 可能是
google chrome,firefox。 - 如果不確定，可以先將這項配置刪除，讓它使用系統默認瀏覽器。
- Windows: 可能是
- HTML 文件結構不完整：Live Server 需要一個標準的 HTML 結構才能正確注入刷新腳本。請確保你的 HTML 文件至少包含
<html>,<head>, 和<body>標簽。 - 防火墻問題：在極少數情況下，操作系統的防火墻可能會阻止 Live Server 的網絡連接。你可以檢查防火墻設置，允許 VS Code 或 Node.js 的網絡訪問。
總結
配置 Live Server 非常簡單，核心就是修改 VS Code 的 settings.json 文件。最常用的配置是修改端口 (port) 和 指定瀏覽器 (CustomBrowser)。希望這份指南能幫助你更好地使用這個強大的工具！
