Cum se deschide în browser din VS Code

Dacă utilizați fișiere HTML, PHP sau JS, este posibil să doriți să le deschideți în browser din Visual Studio Code. Cu toate acestea, nu există nicio opțiune integrată pentru a face acest lucru. Acest lucru poate fi frustrant, mai ales dacă doriți să aruncați o privire rapidă asupra rezultatului codificării dvs.

Din fericire, puteți activa funcția „Deschideți în browser” prin alte metode. Acest articol vă va arăta cum să faceți exact asta.

Cum se deschide în browser în VS Code pe un computer cu Windows

Cel mai simplu mod de a obține opțiunea Open in Browser pentru Visual Studio Code în Windows este să utilizați o extensie. Instalarea extensiilor în Visual Studio Code este relativ simplă, la fel ca și utilizarea acestora pentru a deschide fișiere în browser.

1. Deschideți fișierul HTML în Visual Studio Code Editor .
   
2. În bara de instrumente verticală din stânga, faceți clic pe „Extensii”. Alternativ, puteți utiliza comanda rapidă de la tastatură „Ctrl + Shift + X” pentru a lansa Extensii.
   
3. Faceți clic pe bara de căutare pentru a activa scrierea.
   
4. Introduceți „deschideți în browser”. Alegeți o extensie care se potrivește termenului dvs. de căutare.
   
5. Faceți clic pe butonul „Instalare”.
   
6. Reîncărcați programul.
7. Selectați Explorer din bara de instrumente din stânga.
   
8. Găsiți fișierul HTML în Explorer și faceți clic dreapta pe el. Alegeți „Deschideți în browserul implicit” sau „Deschideți în alte browsere”.
   
9. Dacă selectați opțiunea „Deschidere în browser implicit”, fișierul HTML se va lansa în orice browser setat ca implicit. Dacă alegeți „Deschideți în alte browsere”, va trebui să specificați ce browser va fi utilizat.

Puteți găsi o mulțime de extensii utile pe Visual Studio Marketplace . Sau puteți obține extensiile Open in Browser cu cele mai pozitive recenzii ale utilizatorilor aici: Extensia 1 , Extensia 2 , Extensia 3 , Extensia 4 .

Cum se deschide în browser în VS Code pe un Mac

Visual Studio Code poate fi actualizat folosind diverse extensii care măresc funcționalitatea programului. Un tip de extensie poate permite deschiderea fișierelor HTML, PHP sau JS într-un browser implicit sau alt browser. Iată cum să activați această opțiune pe un Mac.

1. Folosind Visual Studio Code Editor , deschideți fișierul dorit.
   
2. Accesați bara de instrumente din stânga și selectați „Extensii”.
   
3. Faceți clic pe bara de căutare din panoul Extensii și scrieți „deschideți în browser”.
   
4. Alegeți o extensie și faceți clic pe „Instalare”.
   
5. Reîncărcați software-ul.
6. Accesați bara de instrumente din stânga și selectați Explorer.
   
7. Găsiți fișierul pe care doriți să îl deschideți în panoul Explorer și faceți clic dreapta pe el. Selectați fie „Deschideți în browserul implicit”, fie „Deschideți în alte browsere”.
   
8. Opțiunea „Deschidere în browser implicit” va lansa fișierul folosind browserul preselectat. „Deschideți în alte browsere” va apărea o solicitare în care veți putea alege unul dintre browserele instalate pe computer.
   

Visual Studio Marketplace are o selecție vastă de extensii care pot adăuga noi funcții la Visual Studio Code. Site-ul web merită explorat dacă doriți să modificați programul în continuare. Și dacă sunteți interesat exclusiv de extensiile Open in Browser, iată câteva sugestii: Extensia 1 , Extensia 2 , Extensia 3 , Extensia 4 .

Deschideți în Browser Shortcut

Aproape fiecare extensie Open in Browser pentru Visual Studio Code vine cu comenzile rapide de la tastatură activate. Cu toate acestea, comenzile rapide nu sunt uniforme. În schimb, fiecare extensie are o combinație specială de taste care va activa deschiderea fișierului în browser.

Iată comenzile rapide de la tastatură pentru extensiile sugerate în acest articol.

1. Extensia 1: „Ctrl + 1” pe Windows, „Comandă + 1” pe Mac.
   
   
2. Extensia 2: „Ctrl + Alt + O” pe Windows, „Comandă + Opțiune (Alt) + O” pe Mac.
   
3. Extensia 3: „Ctrl + Shift + F9” pe Windows, „Command + Shift + F9” pe Mac.
   
   
4. Extensia 4: „Ctrl + Shift + P” pe Windows, „Command + Shift + P” pe Mac.
   
   

Rețineți că aceste comenzi rapide vor funcționa numai pe extensiile lor respective, legate în acest articol. Dacă alegeți să instalați o altă extensie, comenzile rapide relevante vor fi probabil listate pe pagina pieței sale.

Rularea HTML în Visual Studio Code

Dacă sunteți interesat să lucrați cu HTML în Visual Studio Code, iată câteva metode de rulare a codului HTML în cadrul programului.

Prima metodă constă în încărcarea manuală a fișierului pe care doriți să-l rulați.

1. Deschideți Visual Studio Code și creați un nou fișier HTML.
   
2. Accesați „Fișier”, apoi faceți clic pe „Salvare”.
   
3. Folosind HTML:5, activați șablonul pentru HTML. Apoi, deschideți fișierul salvat la pasul 2.
   
4. Utilizați extensia Open in Browser pe care ați instalat-o anterior pentru a lansa fișierul în browser.
5. Lăsând browserul deschis, reveniți la Visual Studio Code și editați fișierul HTML, salvând modificările.
   
6. Reveniți la browser și faceți clic pe reîmprospătare. Ar trebui să vedeți modificarea paginii în funcție de editare.
   
7. Repetați pașii 5 și 6 pentru a verifica progresul pe măsură ce continuați editarea fișierului HTML.

Metoda manuală vă poate ajuta să vă urmăriți munca. Cu toate acestea, există o soluție și mai bună: încărcarea automată. Această opțiune vă va cere să instalați o altă extensie, dar ar trebui să merite timpul.

1. În Visual Studio Code, accesați Extensii, situat în partea de jos a barei de instrumente din stânga.
   
2. În bara de căutare Extensii, tastați „server live”.
   
3. Faceți clic pe butonul „Instalare” de lângă extensia Live Server.
   
4. Creați și salvați un fișier HTML nou.
   
   
5. În Visual Studio Code Explorer, faceți clic dreapta pe noul fișier. Selectați „Open Live Server”.
   
6. Fișierul HTML se va deschide în browser. Odată ce o face, încercați să editați codul HTML. Salvează-ți progresul.
   
   
7. De îndată ce creați o modificare a codului și o salvați, browserul dvs. ar trebui să se reîmprospăteze, arătând noul conținut. Nu va trebui să reîmprospătați pagina manual și, în schimb, veți putea avea o confirmare vizuală a modificărilor în timp real.
   

Alte extensii HTML utile Visual Studio Code

După cum am menționat, Visual Studio Marketplace este plin de instrumente excelente, dintre care multe sunt orientate spre HTML. Iată cele mai utile și mai bine evaluate zece extensii pentru HTML.

• lit-plugin : un instrument care evidențiază sintaxa, verifică tastarea și vă ajută să completați codul fără erori. Această extensie are reguli personalizabile.
• SCSS Everywhere : o extensie de completare automată pentru definițiile claselor pentru HTML, SCSS, Elixir, SASS, PHP, CSS și multe alte tipuri de fișiere.
• Fragmente unghiulare : adaugă fragmente unghiulare pentru o utilizare ușoară în HTML și TypeScript. Extensia funcționează prin desfășurarea unui fragment odată ce este parțial scris.
• ES6 String HTML : Activează suportul pentru codul de șir es6 pentru evidențierea sintaxei. Funcționează cu HTML, CSS, XML, GLSL și alte formate.
• Divizarea atributelor HTML : această extensie va împărți atributele HTML, precum și elementele de recuzită și directivele Angular, Vue și React. Îl puteți folosi pentru etichetele de deschidere și auto-închidere, precum și pentru selecții multiple.
• Djaneiro – Fragmente Django : O colecție extinsă de fragmente pentru șabloane HTML django. Utilizarea acestei extensii va scurta semnificativ timpul petrecut la tastare.
• Live Preview : Extensia Live Preview de la Microsoft permite găzduirea locală a serverului. Dacă aveți un proiect care nu folosește Angular, React sau alte instrumente de server, această extensie va permite previzualizarea HTML obișnuită și încorporată cu reîmprospătare a paginii în timp real.
• Oracle JET Core : Această extensie creată de Oracle Corporation oferă suport complet pentru datele HTML personalizate Oracle JET. Fragmentele incluse vor completa automat toate atributele și etichetele JET.
• Navigare CSS : Activează Go to Definition pentru HTML la CSS, HTML la Less și HTML la Sass. Comanda Peek Definition este, de asemenea, activată.
• Convertor de caractere cu accent HTML : înlocuiește fără probleme caracterele speciale cu entități HTML adecvate. Această extensie este utilă situațional, dar esențială atunci când se manipulează șiruri localizabile.

Puteți rula codul Visual Studio din browser

Pe lângă rularea fișierelor HTML într-un browser, este, de asemenea, posibil să utilizați întregul cod Visual Studio online. Acest lucru necesită să lansați o anumită versiune a programului dezvoltată pentru utilizarea browserului.

Este de remarcat faptul că această versiune este mult mai ușoară în comparație cu codul Visual Studio pentru desktop. Cu toate acestea, poate fi o soluție simplă pentru o navigare ușoară în depozite și fișiere, precum și pentru modificări minore de cod.

Dacă doriți să încercați varianta de browser Visual Studio Code, puteți începe imediat făcând clic aici .

Puneți în funcțiune fișierele HTML

Deschiderea fișierelor HTML în browser este ușoară cu extensia dedicată pentru Visual Studio Code. Dacă decideți să explorați ofertele vaste de extensii pentru acest instrument de codare, funcția Deschidere în browser va fi doar începutul călătoriei dumneavoastră.

Ați reușit să vă deschideți fișierul HTML în browserul dorit? Ce extensie ai folosit? Anunțați-ne în secțiunea de comentarii de mai jos.