如何在 VS Code 中使用 Live Server 打開
Live Server 是一個 Visual Studio (VS) Code 擴展，它使開發人員能夠實時預覽他們的工作。該擴展消除了每次進行任何更改時手動刷新瀏覽器的繁瑣，這在更大的項目中可能會累加起來。對於使用 HTML、CSS 和 JavaScript 的 Web 開發人員來說，它特別方便。
本教程將解釋如何設置、自定義和使用不同文件類型的工具，並解決開發人員可能遇到的一些常見問題
在 VS Code 中使用 Live Server 打開項目
如果沒有 Live Server，無論何時更改代碼或添加內容，都必須手動刷新瀏覽器才能顯示更新出現。換個角度來看——如果您每天進行 100 次更改，您可能需要刷新瀏覽器 100 次以上才能看到每次更改。以下是如何在 Visual Studio Code 中使用 Live Server 打開項目:
從 Marketplace 安裝 Live Server 擴展。您可以在 VS Code 活動欄中找到它。
根據需要單擊“文件”和“打開文件”或使用鍵盤快捷鍵打開項目。
右鍵單擊項目中的 HTML 文件，然後從上下文菜單中選擇“使用實時服務器打開”。
一個新的瀏覽器窗口將顯示實時站點。您對項目文件所做的任何更改都會在瀏覽器中自動更新。
在 VS Code 中自定義實時服務器設置
要充分利用實時服務器擴展，請嘗試在其設置中提供不同的自定義選項。您可以修改端口號、HTTPS 和代理配置等功能。讓我們逐步實施這些自定義選項。
更改默認端口號
您可能希望使用與默認 5500 不同的端口號。這很容易實現:
找到“liveServer.settings.port”行（默認端口值為5500）。
為隨機端口號設置為 0，或選擇一個您要使用的號碼。
啟用 HTTPS 連接
啟用 HTTPS 連接以獲得更高的安全性，如下所示:
找到“liveServer.settings.https”HTTPS 協議行。
將“啟用”值更改為“true”。
輸入證書、密鑰和密碼必要的文件路徑。
配置代理設置
特定情況下可能需要配置代理設置。以下是設置代理的方法:
使用“liveServer.settings.proxy”啟用代理。
如果尚未啟用，請將“啟用”更改為“真”。
為所需的代理位置設置“baseUri”。
為實際 URL 提供“proxyUri”。
將 Edge DevTools 與實時服務器集成在VS Code
Visual Studio Code 中的 Edge DevTools 和 Live Server 集成可以顯著提高 Web 開發效率，從而改進 Web 開發。此工具組合可同時顯示實時更改並允許直接訪問開發人員工具。
從 VS Code Marketplace 安裝適用於 Visual Studio Code 的實時服務器擴展。通過搜索“適用於 VS 代碼的 Microsoft Edge 工具”，從同一來源安裝適用於 VS 代碼的 Edge DevTools 擴展。
使用集成的瀏覽器開發人員工具自動將更改與源同步。
安裝兩個擴展後，您可以看到您的實時預覽在 VS Code 內的嵌入式瀏覽器窗口中更改。
使用具有不同文件類型的 Live Server
Live Server 擴展足夠通用，適用於許多文件類型。它默認使用 HTML 文件並支持 CSS 和 JavaScript 文件。當您更改具有這些文件類型的樣式表或腳本時，擴展程序將立即刷新瀏覽器以反映更改。開發人員，尤其是前端網頁設計師，可以從 Live Server 的即時更新功能中受益。如果調整 CSS，您將看到實時更改的效果——無需等待檢查顏色、字體或佈局是否正確。對於 HTML 和 JavaScript 編碼人員來說，很容易發現不同文件之間的錯誤和失誤。
對於那些主要使用 PHP 文件的人來說，Live Server 仍然很方便。但是，要將其功能與 PHP 一起使用，您必須配置支持 PHP 的本地服務器。
Live Server 與 Jekyll 和 Hugo 等靜態站點生成器兼容。它們允許您查看并快速修改靜態站點的輸出。將 Live Server 與靜態站點生成器集成可實現高效開發，而無需在每次進行更改時手動構建和部署站點。
解決常見的 Live Server 問題
雖然 Live Server 擴展是總體可靠，但仍可能出現一些問題。例如，實時服務器可能無法啟動，實時重新加載可能會停止工作，或者您可能會遇到 CORS 問題。
實時服務器無法啟動
如果擴展是安裝不當。如果是這樣，您可以:
驗證擴展是否已正確安裝並啟用。如果您忘記啟用或不小心禁用了它，請啟用它以解決問題。如果您懷疑安裝有問題，請嘗試重新安裝擴展。檢查您的設置並確保您的工作區文件夾可訪問、已配置且未在其他實例中打開.
實時重新加載不工作
如果實時重新加載不正常，您可以嘗試以下操作:
仔細檢查您的文件類型和文件類型支持。確認該擴展正確地跟踪更改並且沒有忽略應該接收修改的文件。檢查“liveServer.settings.ignoreFiles”等設置。
跨源資源共享問題
處理來自不同來源的資源時可能會出現 CORS 問題。要解決這些問題:
允許服務器上的跨源請求。使用本地開發服務器。
Live Server 無法打開瀏覽器選項卡
如果 Live Server 無法在您的默認瀏覽器中打開瀏覽器選項卡，請嘗試調整設置:
檢查您的默認 Web 瀏覽器。在 VS Code 中調整服務器的瀏覽器設置。啟用實時共享時，您需要通過命令面板啟動協作會話。
高級實時服務器功能
Live Server 提供了幾個鮮為人知但相當方便的附加功能。一個值得一提的“隱藏”功能是與預處理器（如 Sass、Less 或 TypeScript）的兼容性，以自動編譯代碼並刷新預覽。 Live Server 還可以與第三方工具和庫集成，例如框架和構建系統。
探索 Live Server 設置和文檔以確定可以為您的堆棧提供幫助的相關集成。
Live Server Performance Optimization
有一些調整可以讓 Live Server 性能更好。
避免過度重新加載
一種方法來使服務器最佳性能是通過配置設置來避免過度重新加載。例如，您可以調整“liveServer.settings.ignoreFiles”選項來定義哪些文件或文件夾不應觸發實時重新加載。限制符合重新加載條件的數據量可降低刷新頻率並節省系統資源。
Increase Refresh Delay
微調瀏覽器刷新延遲以從服務器中獲得更多性能。為此，請調整“liveServer.settings.wait”服務器設置。保存多個連續文件時有時會發生快速重新加載，這可能會耗盡系統資源。通過“liveServer.settings.wait”增加延遲有助於避免這個潛在問題。
關閉未使用的實例
最後，考慮關閉未使用的 Live Server 實例以獲得更直接的性能處理多個項目時的技巧。同時打開多個實例會消耗大量系統資源，具體取決於您的硬件。
Live Server 提示
充分利用 Live Server ，嘗試一些實用技巧:
保持開發和生產環境分離
其他開發人員可能會分享的一個技巧是將您的開發環境與生產環境分開。這種分離有助於您避免意外部署未完成或未經測試的代碼，從而保持代碼清潔並節省寶貴的時間。
為多個項目使用單獨的工作區
如果您同時處理多個項目，請使用單獨的工作區VS Code 中的工作區使您的項目井井有條。這種方法將使您能夠輕鬆地在項目之間切換並管理它們各自的 Live Server 實例。
更好地與 Live Share 和 Live Server 協作
Live Share 和 Live Server 擴展還增強了您與其他開發人員的協作。此設置允許您與他人共享您的工作區和實時預覽。對於實時協作處理項目和解決問題的團隊來說，這是一種最佳方法。
其他常見問題解答
Visual Studio Code 中的 Live Server 是什麼?
Live Server 是一種流行的 VS Code 擴展，可實時預覽 HTML、CSS 和 JavaScript 文件。
如何停止 Live Server?
要停止服務器，請打開命令面板並鍵入“Live Server:停止 Live Server。”
為什麼 Live Server 沒有運行?
此問題的一些可能原因包括擴展安裝不正確、項目設置不正確或阻止服務器的防火牆或代理。
我可以在 VS Code 中將 Live Server 與 Microsoft Edge DevTools 一起使用嗎?
您可以將 Live Server 與 Microsoft Edge 結合使用。為此，請安裝Visual Studio Code 的 Live Server 和 Edge DevTools 擴展。
加入實時（服務器）對話
Visual Studio Code 中的 Live Server 擴展是現代開發人員必備的工具，幫助他們優化工作流程並發布一流的項目。它消除了不必要的瀏覽器刷新，並通過共享工作區和預覽實現了實時協作。
您對此擴展有何看法?您發現哪些提示和技巧特別有用?在評論中讓我們知道-它可以極大地幫助其他編碼人員。
免責聲明:本網站上的某些頁面可能包含附屬鏈接。這不會以任何方式影響我們的社論。
