App下載

VSCode插件推薦-html實(shí)時(shí)加載插件-live server

猿友 2021-06-04 17:06:52 瀏覽數(shù) (5389)
反饋

很多剛接觸前端的小伙伴們?cè)陂_(kāi)發(fā) html 頁(yè)面的時(shí)候覺(jué)得調(diào)試很不方便。因?yàn)槊恳淮芜M(jìn)行html 代碼的更改的時(shí)候,要先保存 html 代碼,然后用瀏覽器打開(kāi)這個(gè)代碼。而一個(gè) html 頁(yè)面在開(kāi)發(fā)的時(shí)候總要經(jīng)歷很多次的修改,這時(shí)候刷新瀏覽器成了一種負(fù)擔(dān)。接下來(lái)小編帶來(lái)一款及其好用的插件—Live Server,使用這款插件后可以實(shí)現(xiàn) html 實(shí)時(shí)加載。讓你能馬上看到更改后的代碼效果!

Live Server介紹

Live Server 是一個(gè)具有實(shí)時(shí)加載功能的小型服務(wù)器,使用它進(jìn)行 web 頁(yè)面開(kāi)發(fā)就好像在服務(wù)器上修改頁(yè)面一樣。同時(shí)它因?yàn)榫哂袑?shí)時(shí)加載功能,代碼修改后頁(yè)面會(huì)進(jìn)行實(shí)時(shí)刷新,可以直觀的看到網(wǎng)頁(yè)的修改效果。

安裝

在插件市場(chǎng)搜索 Live Server,點(diǎn)擊安裝即可。

liveserver插件安裝

使用

Live Server 不能加載單個(gè)頁(yè)面,只能加載文件夾??梢孕陆ㄒ粋€(gè)文件夾,然后用 VSCode 打開(kāi)這個(gè)文件夾。就快要在這個(gè)文件夾內(nèi)進(jìn)行web頁(yè)面的開(kāi)發(fā)了。

在寫(xiě)完代碼需要查看效果的時(shí)候,可以使用以下幾種方式運(yùn)行 Live Server:

右下角狀態(tài)欄有一個(gè) ?Go Live ? 按鈕,點(diǎn)擊即可運(yùn)行(啟動(dòng)后這個(gè)按鈕會(huì)變成 ?port:5500?,這說(shuō)明服務(wù)器部署在? localhost:5500? 的端口下,再次點(diǎn)擊這個(gè)按鈕可以停止運(yùn)行。此外也可以直接在瀏覽器通過(guò)訪問(wèn)? localhost:5500? 來(lái)查看網(wǎng)頁(yè))。

右下角golive按鈕

在資源管理器右擊對(duì)應(yīng)的 html 文件后會(huì)出現(xiàn)如下右鍵菜單,?open with Live Server? 也可以啟動(dòng)服務(wù)器(也可以使用指令進(jìn)行執(zhí)行)。

右擊文件菜單

在代碼文件中右擊,可以看到如下彈出菜單,與上一種方法相似,可以找到啟動(dòng)服務(wù)器的功能。不同的是,這個(gè)菜單還提供 ?Stop Live Server? 的按鈕,使用后可以關(guān)閉服務(wù)器(也可使用指令執(zhí)行)。

代碼右擊菜單

注;可以同時(shí)啟動(dòng)多個(gè) Live Server,因此,端口號(hào)并不是固定的,但一般都是 5500 端口。另外,這個(gè)端口號(hào)可以設(shè)置,在 VSCode 配置文件中可以設(shè)置這個(gè)端口號(hào),此處不多做深入介紹。

需要注意的坑:

在使用 Live Server 開(kāi)發(fā)頁(yè)面的時(shí)候需要特別關(guān)注 html 與 css 中引用路徑的問(wèn)題。有些時(shí)候引用路徑出現(xiàn)一些錯(cuò)誤的時(shí)候,如果使用本地打開(kāi)的方式會(huì)打開(kāi)失敗,而 Live Server 有時(shí)候會(huì)忽視這種錯(cuò)誤(能成功打開(kāi))。這并不是 Live Server 的問(wèn)題,而是開(kāi)發(fā)者自己的問(wèn)題。所以在使用 Live Server 開(kāi)發(fā)完代碼后,最好使用本地打開(kāi)方式預(yù)覽一下頁(yè)面展示效果。

小結(jié)

使用 Live Server 可以實(shí)現(xiàn) html 的實(shí)時(shí)加載,達(dá)到實(shí)時(shí)預(yù)覽的效果。配合 VSCode 的自動(dòng)保存功能,可以做到 VSCode 寫(xiě)完代碼,切換到瀏覽器頁(yè)面代碼即刻實(shí)時(shí)刷新的效果,大大方便了前端開(kāi)發(fā)工作者的頁(yè)面調(diào)試。小編在此強(qiáng)烈推薦這款插件,希望各位讀者大大也能愛(ài)上這款插件。

更多優(yōu)秀前端開(kāi)發(fā)課程,盡在W3Cschool前端微課。


0 人點(diǎn)贊