„VS Code Live Server“ - kaip automatiškai atnaujinti naršyklę naudojant šį paprastą plėtinį

„Visual Studio Code“ yra vienas iš populiariausių kodų redaktorių. Tai nemokama, turi švarią sąsają ir nesuskaičiuojamus plėtinius, kurie palengvina ir suteikia daugiau malonumo programuoti.

Esu žiniatinklio kūrėjas ir naudoju „VS Code“, kol dirbu ir „YouTube“ kanale. Teko manęs daugeliui paklausti, kaip naršyklė atnaujinama automatiškai, kol aš koduoju, nespustelėdamas perkėlimo mygtuko.

Na, tai įmanoma, jei VS kode sukonfigūravote naudingą plėtinį, vadinamą tiesioginiu serveriu. Šiame įraše paaiškinsiu išsamią informaciją apie tai, kaip tai veikia, ir kaip nustatyti ir sukonfigūruoti tiesioginį serverį „VS Code“ redaktoriuje.

Kodėl turėčiau naudoti tiesioginio serverio plėtinį?

Paprastai, kai keičiate kodą arba parašote ką nors naujo, turite atnaujinti puslapį rankiniu būdu, kad pamatytumėte pakeitimus.

Kitaip tariant, jei kiekvieną dieną atliksite 100 pakeitimų savo kode, turėsite 100 kartų atnaujinti naršyklę.

Tačiau tiesioginio serverio plėtinys tai jums automatizuoja. Įdiegus jį, jūsų naršyklėje galės veikti automatizuotas vietinis kompiuteris, kurį galite pradėti vienu mygtuku.

Kai pakeisite kodą arba parašysite ką nors naujo, jį išsaugoję naršyklė automatiškai atnaujins save. Tada galėsite greitai ir automatiškai pamatyti pakeitimus.

Jei norite, taip pat galite žiūrėti mokymo vaizdo įrašą žemiau:

Pirmiausia įdiekite VS kodą

Galite praleisti šią dalį, jei jau įdiegėte „VS Code“ savo kompiuteryje. Kitu atveju galite jį atsisiųsti iš savo oficialios svetainės.

Atsisiuntę ir įdiegę „VS Code“, pamatysite pasveikinimo ekraną:

Kairėje pusėje turėtumėte pamatyti keletą piktogramų. Vienas iš jų (po piktograma be klaidų) yra plėtinių mygtukas:

Kai spustelėsite, pasirodys paieškos juosta. Tiesiog įveskite „gyvas serveris“.

Pamatysite daugybę variantų, todėl galėsite pasirinkti, kuris tinka jūsų sistemai. Aš naudoju „Ritwick Dey“ „Live Server“, todėl tęskime šį pavyzdį šiame pavyzdyje:

Spustelėkite mygtuką įdiegti ir jis įdiegs plėtinį.

Sukurkite naują HTML puslapį

Norėdami paleisti tiesioginį serverį, įsitikinkite, kad turite bent HTML puslapį. Norėdami tai padaryti, spustelėkite failo mygtuką viršuje, tada pasirinkite naują failo mygtuką ir įveskite index.html:

Konfigūracijos problemos

Dabar, sukūrę HTML puslapį ir įdiegę plėtinį, mėlyname lauke turėtumėte pamatyti žemiau esančią piktogramą „Pradėti tiesiogiai“:

Jei to nematote, tiesiog paleiskite VS kodą iš naujo. Tada turėtų būti gerai.

Spustelėkite mygtuką „Pradėti tiesiogiai“ ir vietinis kompiuteris (priskirtas uosto numeriui) turėtų prasidėti numatytojoje naršyklėje. Galite bet kada paleisti ir sustabdyti tiesioginį serverį spustelėdami tą patį mygtuką.

Jei pasiekėte šį žingsnį, sveikiname! :) Dabar galite dirbti su tiesioginiu serveriu. Kitu atveju, jei vis dar kyla problemų, peržiūrėkite šį įrašą, jei norite gauti daugiau informacijos.

Išvada

Tikiuosi, kad šis pranešimas padės jums įdiegti ir sukonfigūruoti tiesioginį serverio plėtinį „VS Code“. Jei norite sužinoti daugiau apie interneto plėtrą, nedvejodami apsilankykite mano „Youtube“ kanale.

Ačiū, kad skaitėte!