简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > 開發工具 > VSCode > 主體

vscode如何實現即時預覽效果

王林
發布： 2020-01-10 10:00:40
原創
11824 人瀏覽過

vscode如何實現即時預覽效果

1、開啟VScode，點選【擴充】，在搜尋方塊中輸入Live Server，在搜尋結果中找到如下插件，選擇安裝

vscode如何實現即時預覽效果

2、安裝完成後重新啟動軟體，讓外掛程式生效

3、重新啟動之後，新建一個工作區（也可以直接拖曳一個資料夾到vscode中） ，在這裡建立一個HTML檔案做測試，注意單獨新建一個HTML檔案拖曳到IDE中是使用不了Live Server的，需要把這個HTML檔案放到建立的工作區(資料夾)中，新建完成後我們可以在狀態列上看到一個Go Live，點擊會自動開啟瀏覽器並顯示

提示：如果之前也有HTML項目，直接把項目根資料夾拖曳到VScode中就會自動新增到工作區

vscode如何實現即時預覽效果

vscode如何實現即時預覽效果

4、如果沒有狀態列上，也可以在檔案上按一下右鍵，選擇Open With Live Server這項

vscode如何實現即時預覽效果

5、接下來修改程式碼，只需要ctrl S儲存修改過的程式碼，瀏覽器即可自動重新整理

vscode如何實現即時預覽效果

相關文章教學推薦：vscode教學

#

以上是vscode如何實現即時預覽效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
vscode 實現 效果
來源：php.cn
上一篇：vscode如何取消標籤提示底線 下一篇：vscode如何更換代碼編輯框背景
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
頁面突然無法拉動 css 或 bootstrap 所以我正在開發一個頁面，我昨天做了一部分，效果很好，今天我繼續做剩下的部分，一切都很好。當我嘗試將其作為普通html頁面打開時，CSS或BOOTSTRAP不起作用，僅顯示頁面文本，...
來自於 2024-04-06 21:58:04
0
1
800
數獨檢查器無法運作？誰能幫我辨識錯誤？ 我嘗試了在線編輯器上的所有方法，但仍然收到錯誤。但當我在我的機器上的VSCode上執行此操作時，它工作正常。我很困惑，在沒有發現錯誤的情況下無法提交程式碼。我不知道該去哪裡找了。我...
來自於 2024-04-06 21:21:07
0
1
474
我的網頁在 HTML 中有標題，但不可見 所以我剛開始編碼，所以不要評判我。我試圖使用vscode創建我的網站，我使用html和css，但是我試圖放在代碼左上角的標題和按鈕沒有顯示在瀏覽器上，我在網絡上搜索並可以似乎不明白...
來自於 2024-04-01 18:24:53
0
1
364
如何自訂 VSCode id 屬性？ 我最近從Atom遷移到VSCode，雖然我設法根據自己的喜好自訂大部分編輯器，但我仍然缺少一些我喜歡的Atom功能。其中之一是Atom中的「id」屬性曾經是一種特定的顏色，類似於#...
來自於 2024-03-31 14:13:45
0
1
373
/bin/sh: 1: C:xamppphpphp.exe: 未找到 我正在使用WSL2、Ubuntu20.04並運行VSCode。我在Windows上的VSCode和XAMPP中使用CodeRunner擴充我在Windows環境變數中設定了php....
來自於 2024-03-31 09:10:37
0
1
333
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！