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.

Server VS Code Live Cum sa reimprospatati automat browserul
Site-ul oficial al Visual Studio Code

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

1611638406 206 Server VS Code Live Cum sa reimprospatati automat browserul

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

1611638407 912 Server VS Code Live Cum sa reimprospatati automat browserul

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

1611638407 687 Server VS Code Live Cum sa reimprospatati automat browserul

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:

1611638407 97 Server VS Code Live Cum sa reimprospatati automat browserul

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:

1611638407 314 Server VS Code Live Cum sa reimprospatati automat browserul
Pictogramă fișier nou cu semn Plus (al doilea din stânga)

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:

1611638407 834 Server VS Code Live Cum sa reimprospatati automat browserul

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!