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.

Hoe te openen in browser vanuit VS Code

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 .
    Hoe te openen in browser vanuit VS Code
  2. Klik in de uiterst linkse verticale werkbalk op 'Extensies'. U kunt ook de sneltoets "Ctrl + Shift + X" gebruiken om Extensies te starten.
    Hoe te openen in browser vanuit VS Code
  3. Klik op de zoekbalk om schrijven in te schakelen.
    Hoe te openen in browser vanuit VS Code
  4. Voer "openen in browser" in. Kies een extensie die overeenkomt met uw zoekterm.
    Hoe te openen in browser vanuit VS Code
  5. Klik op de knop "Installeren".
    Hoe te openen in browser vanuit VS Code
  6. Laad het programma opnieuw.
  7. Selecteer de Verkenner in de linker werkbalk.
    Hoe te openen in browser vanuit VS Code
  8. Zoek uw HTML-bestand in de Verkenner en klik er met de rechtermuisknop op. Kies 'Openen in standaardbrowser' of 'Openen in andere browsers'.
    Hoe te openen in browser vanuit VS Code
  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 .
    Hoe te openen in browser vanuit VS Code
  2. Ga naar de werkbalk aan de linkerkant en selecteer 'Extensies'.
    Hoe te openen in browser vanuit VS Code
  3. Klik op de zoekbalk in het paneel Extensies en schrijf "openen in browser".
    Hoe te openen in browser vanuit VS Code
  4. Kies een extensie en klik op "Installeren".
    Hoe te openen in browser vanuit VS Code
  5. Laad de software opnieuw.
  6. Ga naar de linker werkbalk en selecteer Verkenner.
    Hoe te openen in browser vanuit VS Code
  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'.
    Hoe te openen in browser vanuit VS Code
  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.
    Hoe te openen in browser vanuit VS Code

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.
    Hoe te openen in browser vanuit VS Code
    Hoe te openen in browser vanuit VS Code
  2. Extensie 2: "Ctrl + Alt + O" op Windows, "Command + Option (Alt) + O" op Mac.Hoe te openen in browser vanuit VS Code
    Hoe te openen in browser vanuit VS Code
  3. Uitbreiding 3: "Ctrl + Shift + F9" op Windows, "Command + Shift + F9" op Mac.
    Hoe te openen in browser vanuit VS Code
    Hoe te openen in browser vanuit VS Code
  4. Uitbreiding 4: "Ctrl + Shift + P" op Windows, "Command + Shift + P" op Mac.
    Hoe te openen in browser vanuit VS Code
    Hoe te openen in browser vanuit VS Code

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.
    Hoe te openen in browser vanuit VS Code
  2. Ga naar "Bestand" en klik vervolgens op "Opslaan".
    Hoe te openen in browser vanuit VS Code
  3. Gebruik HTML:5 om de sjabloon voor HTML te activeren. Open vervolgens het bestand dat u in stap 2 hebt opgeslagen.
    Hoe te openen in browser vanuit VS Code
  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.
    Hoe te openen in browser vanuit VS Code
  6. Keer terug naar de browser en klik op vernieuwen. U zou de pagina moeten zien veranderen op basis van uw bewerking.
    Hoe te openen in browser vanuit VS Code
  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.
    Hoe te openen in browser vanuit VS Code
  2. Typ 'live server' in de zoekbalk van Extensies.
    Hoe te openen in browser vanuit VS Code
  3. Klik op de knop "Installeren" naast de Live Server-extensie.
    Hoe te openen in browser vanuit VS Code
  4. Maak en sla een nieuw HTML-bestand op.
    Hoe te openen in browser vanuit VS Code
    Hoe te openen in browser vanuit VS Code
  5. Klik in de Visual Studio Code Explorer met de rechtermuisknop op uw nieuwe bestand. Selecteer "Live-server openen".
    Hoe te openen in browser vanuit VS Code
  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.
    Hoe te openen in browser vanuit VS Code
    Hoe te openen in browser vanuit VS Code
  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.
    Hoe te openen in browser vanuit VS Code

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.

Sign up and earn $1000 a day ⋙

Leave a Comment

Grafische drivers bijwerken in Windows 10 en 11

Grafische drivers bijwerken in Windows 10 en 11

Door de driver van uw grafische kaart bij te werken naar de nieuwste versie, kunt u problemen met de schermresolutie, games en de algemene grafische prestaties van uw computer oplossen.

Handige tips om nooit meer zonder Windows-opslagruimte te komen zitten

Handige tips om nooit meer zonder Windows-opslagruimte te komen zitten

Als je voortdurend meldingen krijgt over te weinig opslagruimte, word je er gek van. Begin dus met het aanleren van slimme gewoontes, zodat u nooit meer zonder opslagruimte komt te zitten!

GodMode inschakelen op Windows 10, 8 en 7

GodMode inschakelen op Windows 10, 8 en 7

GodeMode staat ook wel bekend als Shortcut Windows Master Control Panel. GodMode (of God Mode) is een bedieningspaneel waarmee u alles op uw Windows-besturingssysteem kunt instellen en openen.

Locatieverzoekmeldingen uitschakelen in Windows 11

Locatieverzoekmeldingen uitschakelen in Windows 11

Vanaf Windows 11 build 25977 heeft Microsoft een optie toegevoegd om meldingen over locatieverzoeken uit te schakelen, zodat u beter kunt beheren welke apps locatietoegang hebben.

Windows 11-updates creëren stilletjes een mysterieuze map op schijf C

Windows 11-updates creëren stilletjes een mysterieuze map op schijf C

De beveiligingsupdates voor Windows 11 van april hebben stilletjes een nieuwe lege map op schijf C aangemaakt.

Hoe verwijder ik het pictogram Meer informatie over deze afbeelding in Windows 11?

Hoe verwijder ik het pictogram Meer informatie over deze afbeelding in Windows 11?

De Spotlight-achtergrond op het bureaublad en het vergrendelscherm van Windows 11 bevat een vervelend pictogram met de tekst 'Meer informatie over deze afbeelding'. Hier volgen instructies om het pictogram ‘Meer informatie over deze afbeelding’ in Windows 11 te verwijderen.

9 manieren om het Apps & Features-hulpprogramma te openen in Windows 11

9 manieren om het Apps & Features-hulpprogramma te openen in Windows 11

Het Apps en onderdelen-configuratiescherm is het instellingenpaneel dat gelijk is aan het hulpprogramma Programma's en onderdelen in het Configuratiescherm.

Hoe de map Bibliotheken in Windows 11 weer te geven

Hoe de map Bibliotheken in Windows 11 weer te geven

De map Bibliotheken in Windows 11 is verborgen in de interface van Verkenner, maar u kunt deze eenvoudig weer weergeven met slechts een paar tikken.

Hoe u het probleem met hoog geheugengebruik in Microsoft Edge kunt oplossen

Hoe u het probleem met hoog geheugengebruik in Microsoft Edge kunt oplossen

Krijgt u de waarschuwing Hoog geheugengebruik gedetecteerd terwijl u op Microsoft Edge surft? Dit betekent dat bepaalde browserprocessen te veel geheugen (RAM) gebruiken.

Spraakherkenning instellen in Windows

Spraakherkenning instellen in Windows

Volg deze stappen om spraakherkenning in te stellen op uw Windows-laptop of -pc.

Herstel verborgen mappen in Windows wanneer deze met een virus zijn geïnfecteerd

Herstel verborgen mappen in Windows wanneer deze met een virus zijn geïnfecteerd

In veel gevallen is het te wijten aan virusaanvallen dat de verborgen mappen van het systeem niet kunnen worden weergegeven, zelfs niet nadat de optie "Verborgen bestanden en mappen weergeven" in Mapopties is geactiveerd. Sommige van de volgende methoden kunnen helpen om dit probleem op te lossen.

3 manieren om de Windows 10-firewall uit te schakelen

3 manieren om de Windows 10-firewall uit te schakelen

Soms moet u de firewall toch uitschakelen om bepaalde functies uit te voeren. De onderstaande 3 manieren om de firewall van Win 10 uit te schakelen, kunnen u in dergelijke situaties helpen.

Hoe u een snelkoppeling voor het afsluiten-bureaublad toevoegt in Windows 11

Hoe u een snelkoppeling voor het afsluiten-bureaublad toevoegt in Windows 11

Als u op zoek bent naar een snellere methode, kunt u als volgt een speciale afsluitsnelkoppeling toevoegen aan uw Windows 11-bureaublad of taakbalk.

Hoe u JPEG XL-ondersteuning toevoegt in Windows 11

Hoe u JPEG XL-ondersteuning toevoegt in Windows 11

Standaard ondersteunt Windows 11 de JPEG X-afbeeldingsindeling niet, maar u kunt een invoegtoepassing installeren die dit wel doet. Hier vindt u instructies voor het toevoegen van JPEG XL-ondersteuning in Windows 11.

Instructies om de fout te verhelpen waarbij u geen applicaties aan de taakbalk van Windows 11 kunt vastmaken

Instructies om de fout te verhelpen waarbij u geen applicaties aan de taakbalk van Windows 11 kunt vastmaken

Tijdens het vastmaken van applicaties komen we soms fouten tegen. Het is bijvoorbeeld niet mogelijk om de applicatie vast te maken aan de taakbalk. Hieronder vindt u enkele manieren om de fout te verhelpen waarbij u geen applicaties aan de taakbalk van Windows 11 kunt vastmaken.