Server VS Code Live – Cum să reîmprospătați automat browserul cu această extensie simplă

Visual Studio Code este unul dintre cei mai populari editori de coduri de acolo. Este gratuit, are o interfață curată și are nenumărate extensii care fac programarea mai ușoară și mai distractivă.

Sunt dezvoltator web frontend și folosesc codul VS în timp ce lucrez și pe canalul meu YouTube. Am avut mulți oameni care mă întreabă cum se actualizează automat browserul în timp ce codez, fără a face clic pe butonul de reîncărcare.

Ei bine, acest lucru este posibil dacă configurați o extensie utilă în codul VS numită live-server. În această postare, voi explica detaliile despre modul în care funcționează și cum se configurează și se configurează un server live în editorul dvs. de cod VS.

De ce ar trebui să folosesc extensia live-server?

În mod normal, când modificați codul sau scrieți ceva nou, trebuie să reîmprospătați manual pagina pentru a vedea modificările.

Cu alte cuvinte, dacă faceți 100 de modificări în cod în fiecare zi, trebuie să reîmprospătați browserul de 100 de ori.

Cu toate acestea, extensia live-server automatizează acest lucru pentru dvs. După instalare, un localhost automat va putea rula în browserul dvs., pe care îl puteți începe cu un singur buton.

După ce modificați codul sau scrieți ceva nou, după ce îl salvați, browserul se va actualiza automat. Apoi, veți putea vedea modificările rapid și automat.

Dacă preferați, puteți viziona și videoclipul tutorial de mai jos:

Mai întâi, instalați codul VS

Puteți sări peste această parte dacă ați instalat deja codul VS pe computer. În caz contrar, îl puteți descărca de la site-ul său oficial.

După ce ați descărcat și instalat codul VS, veți vedea ecranul de întâmpinare:

În partea stângă, ar trebui să vedeți câteva pictograme. Unul dintre ele (sub pictograma fără erori) este butonul extensii:

După ce faceți clic pe ea, va apărea o bară de căutare. Tastați doar „server live”.

Veți vedea multe opțiuni, astfel încât să puteți alege oricare dintre acestea funcționează pentru sistemul dvs. Folosesc Live Server de Ritwick Dey, deci să continuăm cu cel din acest exemplu:

Faceți clic pe butonul de instalare și va instala extensia.

Creați o pagină HTML nouă

Pentru a porni serverul live, asigurați-vă că ați creat cel puțin o pagină HTML. Pentru aceasta, faceți clic pe butonul fișier din partea de sus, apoi alegeți butonul fișier nou și tastați index.html:

Probleme de configurare

Acum, după ce ați creat o pagină HTML și ați instalat extensia, ar trebui să puteți vedea pictograma „Intră în direct” chiar mai jos în câmpul albastru:

Dacă nu o vedeți, reporniți codul VS. Atunci ar trebui să fie OK.

Faceți clic pe butonul „Accesați live” și localhost-ul (atribuit unui număr de port) ar trebui să înceapă în browserul dvs. implicit. Puteți porni și opri serverul live oricând făcând clic pe același buton.

Dacă ați ajuns la acest pas, felicitări! 🙂 Acum puteți lucra cu live-serverul. În caz contrar, dacă aveți în continuare probleme, consultați această postare pentru mai multe informații.

Concluzie

Sper că această postare vă ajută să instalați și să configurați extensia de server live în VS Code. Dacă doriți să aflați mai multe despre dezvoltarea web, nu ezitați să mă vizitați Canalul canalului YouTube.

Mulțumesc că ai citit!