VSCode設(shè)置網(wǎng)頁代碼實(shí)時(shí)預(yù)覽的實(shí)現(xiàn)
一、設(shè)置描述
1.VSCode作為一款很不錯(cuò)的開發(fā)軟件，相比DW更小巧，用來測試前端特別不錯(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)入插件安裝
2.如果沒有顯示左邊的工具欄，也可以在View中找到Extensions進(jìn)入插件安裝
3.在搜索框中輸入Live Server，在搜索結(jié)果中找到如下，選擇安裝
4.安裝完成需要重啟軟件插件才能生效
5.重啟過之后，新建一個(gè)工作區(qū)（也可以直接拖一個(gè)文件夾到vscode中），在這里創(chuàng)建一個(gè)HTML文件做測試，注意單獨(dú)新建一個(gè)HTML文件拖動(dòng)到IDE中是使用不了Live Server的，需要把這個(gè)HTML文件放到創(chuàng)建的工作區(qū)(文件夾)中，新建完成后我們可以在狀態(tài)欄上看到一個(gè)Go Live，單擊會(huì)自動(dòng)打開瀏覽器并顯示
提示：如果之前也有HTML項(xiàng)目，直接把項(xiàng)目根文件夾拖動(dòng)到VScode中就會(huì)自動(dòng)添加到工作區(qū)
6.如果沒有狀態(tài)欄上，也可以在文件上單擊右鍵，選擇Open With Live Server這一項(xiàng)
7.接下來修改代碼我們只需要ctrl+S保存修改后的代碼，瀏覽器自動(dòng)刷新，動(dòng)圖顯示
8.遇到問題解決不了別忘了留言~~
到此這篇關(guān)于VSCode設(shè)置網(wǎng)頁代碼實(shí)時(shí)預(yù)覽的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)VSCode 網(wǎng)頁代碼實(shí)時(shí)預(yù)覽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了GIt的基本操作。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
在處理頁面事件時(shí)，我們會(huì)經(jīng)常會(huì)碰到這樣的情況：當(dāng)我們?cè)谔峤灰豁?xiàng)頁面表單時(shí)，在提交成功后，當(dāng)我們?cè)噲D按F5刷新頁面時(shí)，數(shù)據(jù)會(huì)再次的被重復(fù)提交2012-10-10
本文主要介紹Git 工作區(qū)、暫存區(qū)和版本庫的知識(shí)，這里整理了詳細(xì)的資料，有需要的小伙伴可以參考下2016-09-09
WinSCP和PuTTY(與Linux系統(tǒng)鏈接的工具)的安裝和使用圖文教程
Putty是用來遠(yuǎn)程連接服務(wù)器的，支持SSH、Telnet、Serial等協(xié)議的連接,WinSCP是一個(gè)Windows環(huán)境下使用SSH的開源圖形化SFTP客戶端,它的主要功能就是在本地與遠(yuǎn)程計(jì)算機(jī)間安全的復(fù)制文件,本文重點(diǎn)給大家介紹WinSCP和PuTTY安裝使用，感興趣的朋友一起看看吧2022-06-06
玩轉(zhuǎn)VSCode插件之Remote-SSH的使用情況
這篇文章主要介紹了玩轉(zhuǎn)VSCode插件之Remote-SSH的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
這篇文章主要介紹了Gitee的下載安裝配置及使用,本文通過詳細(xì)步驟給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-08-08
我們?cè)谌粘Ｊ褂肎it的過程中經(jīng)常會(huì)發(fā)生一些意外情況,如果處理不當(dāng),則可能會(huì)出現(xiàn)代碼丟失的假象,這篇文章主要給大家介紹了關(guān)于Git沖突處理指南之如何高效解決代碼沖突問題的相關(guān)資料,需要的朋友可以參考下2024-08-08
這篇文章主要為大家介紹了pycharm中venv文件夾自定義處理方式圖解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
接下來小編就為大家介紹一下在Zend Stdio 8.0版本中的快捷鍵匯總。需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-10-10
這篇文章主要介紹了詳解idea切換git賬號(hào)的兩個(gè)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08