Hoe te openen in browser vanuit VS Code

Als u HTML-, PHP- of JS-bestanden gebruikt, wilt u deze misschien openen in uw browser vanuit Visual Studio Code. Er is echter geen geïntegreerde optie om dit te doen. Dit kan frustrerend zijn, vooral als u snel het resultaat van uw codering wilt bekijken.

Gelukkig kun je de functie "Openen in browser" op andere manieren inschakelen. Dit artikel laat je zien hoe je precies dat doet.

Hoe te openen in browser in VS-code op een Windows-pc

De eenvoudigste manier om de optie Openen in browser voor Visual Studio Code in Windows te krijgen, is door een extensie te gebruiken. Het installeren van extensies in Visual Studio Code is relatief eenvoudig, net als het gebruik ervan om bestanden in de browser te openen.

1. Open uw HTML-bestand in de Visual Studio Code Editor .
   
2. Klik in de uiterst linkse verticale werkbalk op 'Extensies'. U kunt ook de sneltoets "Ctrl + Shift + X" gebruiken om Extensies te starten.
   
3. Klik op de zoekbalk om schrijven in te schakelen.
   
4. Voer "openen in browser" in. Kies een extensie die overeenkomt met uw zoekterm.
   
5. Klik op de knop "Installeren".
   
6. Laad het programma opnieuw.
7. Selecteer de Verkenner in de linker werkbalk.
   
8. Zoek uw HTML-bestand in de Verkenner en klik er met de rechtermuisknop op. Kies 'Openen in standaardbrowser' of 'Openen in andere browsers'.
   
9. Als u de optie "Openen in standaardbrowser" selecteert, wordt het HTML-bestand gestart in elke browser die als standaard is ingesteld. Als u 'Openen in andere browsers' kiest, moet u aangeven welke browser wordt gebruikt.

Op de Visual Studio Marketplace vind je tal van handige extensies . Of u kunt de Open in Browser-extensies met de meest positieve gebruikersrecensies hier downloaden: Extensie 1 , Extensie 2 , Extensie 3 , Extensie 4 .

Hoe te openen in browser in VS Code op een Mac

Visual Studio Code kan worden geüpgraded met behulp van verschillende extensies die de functionaliteit van het programma vergroten. Eén type extensie kan het openen van HTML-, PHP- of JS-bestanden in een standaard- of andere browser mogelijk maken. Hier leest u hoe u die optie op een Mac kunt inschakelen.

1. Open het gewenste bestand met behulp van de Visual Studio Code Editor .
   
2. Ga naar de werkbalk aan de linkerkant en selecteer 'Extensies'.
   
3. Klik op de zoekbalk in het paneel Extensies en schrijf "openen in browser".
   
4. Kies een extensie en klik op "Installeren".
   
5. Laad de software opnieuw.
6. Ga naar de linker werkbalk en selecteer Verkenner.
   
7. Zoek het bestand dat u wilt openen in het Explorer-paneel en klik er met de rechtermuisknop op. Selecteer 'Openen in standaardbrowser' of 'Openen in andere browsers'.
   
8. De optie "Openen in standaardbrowser" start het bestand met de vooraf geselecteerde browser. "Openen in andere browsers" zal een prompt weergeven waarin u een van de browsers kunt kiezen die op uw computer zijn geïnstalleerd.
   

De Visual Studio Marketplace heeft een uitgebreide selectie van extensies die nieuwe functies kunnen toevoegen aan Visual Studio Code. De website is het ontdekken waard als u het programma verder wilt aanpassen. En als u uitsluitend geïnteresseerd bent in Open in Browser-extensies, volgen hier enkele suggesties: Extensie 1 , Extensie 2 , Extensie 3 , Extensie 4 .

Openen in browsersnelkoppeling

Bijna elke Open in Browser-extensie voor Visual Studio Code wordt geleverd met sneltoetsen. De snelkoppelingen zijn echter niet uniform. In plaats daarvan heeft elke extensie een bepaalde combinatie van toetsen die het openen van het bestand in uw browser activeert.

Dit zijn de sneltoetsen voor de extensies die in dit artikel worden voorgesteld.

1. Extensie 1: "Ctrl + 1" op Windows, "Command + 1" op Mac.
   
   
2. Extensie 2: "Ctrl + Alt + O" op Windows, "Command + Option (Alt) + O" op Mac.
   
3. Uitbreiding 3: "Ctrl + Shift + F9" op Windows, "Command + Shift + F9" op Mac.
   
   
4. Uitbreiding 4: "Ctrl + Shift + P" op Windows, "Command + Shift + P" op Mac.
   
   

Merk op dat deze snelkoppelingen alleen werken op hun respectieve extensies waarnaar in dit artikel wordt verwezen. Als u ervoor kiest om een ​​andere extensie te installeren, worden de relevante snelkoppelingen waarschijnlijk vermeld op de Marketplace-pagina.

HTML uitvoeren in Visual Studio Code

Als u geïnteresseerd bent in het werken met HTML in Visual Studio Code, vindt u hier enkele methoden om HTML-code in het programma uit te voeren.

De eerste methode bestaat uit het handmatig laden van het bestand dat u wilt uitvoeren.

1. Open Visual Studio Code en maak een nieuw HTML-bestand.
   
2. Ga naar "Bestand" en klik vervolgens op "Opslaan".
   
3. Gebruik HTML:5 om de sjabloon voor HTML te activeren. Open vervolgens het bestand dat u in stap 2 hebt opgeslagen.
   
4. Gebruik de Open in Browser-extensie die u eerder hebt geïnstalleerd om het bestand in uw browser te starten.
5. Laat de browser openstaan, ga terug naar Visual Studio Code en bewerk het HTML-bestand, waarbij u uw wijzigingen opslaat.
   
6. Keer terug naar de browser en klik op vernieuwen. U zou de pagina moeten zien veranderen op basis van uw bewerking.
   
7. Herhaal stap 5 en 6 om uw voortgang te controleren terwijl u doorgaat met het bewerken van het HTML-bestand.

De handmatige methode kan u helpen uw werk bij te houden. Er is echter een nog betere oplossing: automatisch laden. Voor deze optie moet je nog een extensie installeren, maar het zou de moeite waard moeten zijn.

1. Ga in Visual Studio Code naar Extensies, onderaan de linker werkbalk.
   
2. Typ 'live server' in de zoekbalk van Extensies.
   
3. Klik op de knop "Installeren" naast de Live Server-extensie.
   
4. Maak en sla een nieuw HTML-bestand op.
   
   
5. Klik in de Visual Studio Code Explorer met de rechtermuisknop op uw nieuwe bestand. Selecteer "Live-server openen".
   
6. Het HTML-bestand wordt geopend in de browser. Zodra dit het geval is, probeert u de HTML-code te bewerken. Sla je voortgang op.
   
   
7. Zodra u een wijziging in de code aanbrengt en deze opslaat, moet uw browser worden vernieuwd en de nieuwe inhoud worden weergegeven. U hoeft de pagina niet handmatig te vernieuwen en kunt in plaats daarvan in realtime visuele bevestiging van de wijzigingen krijgen.
   

Andere handige Visual Studio Code HTML-extensies

Zoals gezegd staat de Visual Studio Marketplace vol met uitstekende tools, waarvan er vele gericht zijn op HTML. Hier zijn de tien meest bruikbare en best beoordeelde extensies voor HTML.

• lit-plugin : een tool die de syntaxis benadrukt, het typen controleert en u helpt de code foutloos te voltooien. Deze extensie heeft aanpasbare regels.
• SCSS Everywhere : Een auto-complete extensie voor klassedefinities voor HTML, SCSS, Elixir, SASS, PHP, CSS en vele andere bestandstypen.
• Angular Snippets : Voegt Angular snippets toe voor eenvoudig gebruik in HTML en TypeScript. De extensie werkt door een fragment uit te vouwen zodra het gedeeltelijk is uitgetypt.
• ES6 String HTML : Schakelt es6 stringcode-ondersteuning in voor syntaxisaccentuering. Werkt met HTML, CSS, XML, GLSL en andere formaten.
• HTML-attributen splitsen : deze extensie splitst HTML-attributen, evenals Angular-, Vue- en React-props en -richtlijnen. Je kunt het gebruiken op openende en zelfsluitende tags, maar ook op meerdere selecties.
• Djaneiro - Django-fragmenten : een uitgebreide verzameling fragmenten voor django HTML-sjablonen. Het gebruik van deze extensie verkort de tijd die wordt besteed aan typen aanzienlijk.
• Live Preview : De Live Preview-extensie van Microsoft maakt lokale serverhosting mogelijk. Als u een project heeft dat geen Angular, React of andere servertools gebruikt, maakt deze extensie regelmatige en ingesloten HTML-voorbeelden mogelijk met paginavernieuwingen in realtime.
• Oracle JET Core : Deze extensie gemaakt door Oracle Corporation biedt volledige ondersteuning voor aangepaste HTML-gegevens van Oracle JET. De meegeleverde fragmenten vullen alle JET-attributen en -tags automatisch aan.
• CSS-navigatie : schakelt Go to Definition in voor HTML naar CSS, HTML naar Less en HTML naar Sass. De opdracht Peek Definition is ook ingeschakeld.
• HTML-tekenconvertor : vervangt naadloos speciale tekens door geschikte HTML-entiteiten. Deze extensie is situationeel nuttig, maar essentieel bij het omgaan met lokaliseerbare tekenreeksen.

U kunt Visual Studio Code uitvoeren vanuit uw browser

Naast het uitvoeren van HTML-bestanden in een browser, is het ook mogelijk om de volledige Visual Studio Code online te gebruiken. Hiervoor moet u een bepaalde versie van het programma starten dat is ontwikkeld voor browsergebruik.

Het is vermeldenswaard dat deze versie veel lichter is in vergelijking met de desktop Visual Studio Code. Het kan echter een eenvoudige oplossing zijn voor eenvoudige repository- en bestandsnavigatie, evenals kleine codewijzigingen.

Als u de browservariant Visual Studio Code wilt uitproberen, kunt u direct aan de slag door hier te klikken .

Zorg dat uw HTML-bestanden actief zijn

Het openen van HTML-bestanden in uw browser is gemakkelijk gemaakt met de speciale extensie voor Visual Studio Code. Als u besluit om het enorme aanbod aan extensies voor deze coderingstool te verkennen, is de functie Openen in browser nog maar het begin van uw reis.

Is het je gelukt om je HTML-bestand te openen in je browser naar keuze? Welke extensie heb je gebruikt? Laat het ons weten in de comments hieronder.