vscode如何實現實時預覽效果

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教程

以上就是

? 版權聲明
THE END
喜歡就支持一下吧
點贊5 分享