(轉(zhuǎn)載)VSCode設(shè)置網(wǎng)頁代碼實(shí)時(shí)預(yù)覽

本文轉(zhuǎn)載自：https://blog.csdn.net/sinat_34104446/article/details/83051052

一、設(shè)置描述

  1. VSCode作為一款很不錯(cuò)的開發(fā)軟件，相比DW更小巧，用來測(cè)試前端特別不錯(cuò)，那么我們平時(shí)開發(fā)網(wǎng)頁發(fā)現(xiàn)只有寫完代碼，然后保存，接下來到瀏覽器中刷新查看效果，然后不停重復(fù)，我們發(fā)現(xiàn)很多時(shí)間就這樣浪費(fèi)到了這三個(gè)步驟上。

  2. 其實(shí)我們可以在VSCode中配置一個(gè)網(wǎng)頁服務(wù)器，修改完代碼之后只需要保存代碼瀏覽器就可以實(shí)時(shí)預(yù)覽

二、操作步驟

  1. 打開VScode，點(diǎn)擊坐標(biāo)工具欄的最后一個(gè)進(jìn)入插件安裝
  1. 如果沒有顯示左邊的工具欄，也可以在View中找到Extensions進(jìn)入插件安裝
  1. 在搜索框中輸入Live Server，在搜索結(jié)果中找到如下，選擇安裝

  1. 安裝完成需要重啟軟件插件才能生效

  2. 重啟過之后，新建一個(gè)工作區(qū)，在這里創(chuàng)建一個(gè)HTML文件做測(cè)試，注意單獨(dú)新建一個(gè)HTML文件拖動(dòng)到IDE中是使用不了Live Server的，文件新建完成后我們可以在狀態(tài)欄上看到一個(gè)Go Live，單擊會(huì)自動(dòng)打開瀏覽器并顯示

  1. 如果沒有狀態(tài)欄上，也可以在文件上單擊右鍵，選擇Open With Live Server這一項(xiàng)
  1. 接下來修改代碼我們只需要ctrl+S保存修改后的代碼，瀏覽器自動(dòng)刷新，動(dòng)圖顯示
  1. 遇到問題解決不了別忘了留言~~
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容