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

Hoe u de fout We hebben uw huidige Windows-wachtwoord nodig in Windows 10/11 kunt oplossen

Hoe u de fout We hebben uw huidige Windows-wachtwoord nodig in Windows 10/11 kunt oplossen

Krijgt u de foutmelding "We hebben uw huidige Windows-wachtwoord nog een laatste keer nodig"? Deze vervelende pop-up kan ervoor zorgen dat u uw werk niet kunt doen.

Los de fout Onkoppelbaar opstartvolume op Windows 10/11 snel op

Los de fout Onkoppelbaar opstartvolume op Windows 10/11 snel op

De fout 'Unmountable Boot Volume' treedt op omdat geïnstalleerde software in conflict is met het besturingssysteem of omdat de computer plotseling wordt afgesloten. In het onderstaande artikel geeft WebTech360 u enkele manieren om deze fout op te lossen.

Hoe u de klembordgeschiedenisfout in de nieuwste update van Windows 11 kunt oplossen

Hoe u de klembordgeschiedenisfout in de nieuwste update van Windows 11 kunt oplossen

Als u de Klembordgeschiedenis gebruikt om gegevens op te slaan voor later gebruik, is er een kleine kans dat de gegevens leeg blijven, ongeacht wat u probeert.

Waarom is de schatting van het batterijpercentage van een laptop nooit nauwkeurig?

Waarom is de schatting van het batterijpercentage van een laptop nooit nauwkeurig?

De meeste laptopgebruikers kennen de situatie wel eens: Windows geeft aan dat de batterij nog 2 uur meegaat, maar vijf minuten later staat er alweer 5 uur of zelfs ongeveer 1 uur op het scherm. Waarom verspringt de tijd zo vaak?

10 Windows 11-instellingen om de batterijduur van uw laptop te maximaliseren

10 Windows 11-instellingen om de batterijduur van uw laptop te maximaliseren

Laptopbatterijen gaan na verloop van tijd achteruit en verliezen capaciteit, wat resulteert in minder uptime. Maar nadat u de diepere instellingen van Windows 11 hebt aangepast, zou u een merkbare verbetering in de batterijduur moeten zien.

Microsoft: pcs met Windows 11 21H2/22H2 worden volgende maand gedwongen te updaten naar 23H2

Microsoft: pcs met Windows 11 21H2/22H2 worden volgende maand gedwongen te updaten naar 23H2

Windows 11 versie 21H2 is een van de belangrijkste originele releases van Windows 11 die wereldwijd werd uitgerold op 4 oktober 2021.

Microsoft spamt Copilot QR-codes op het vergrendelscherm van Windows 11 om gebruikers te lokken

Microsoft spamt Copilot QR-codes op het vergrendelscherm van Windows 11 om gebruikers te lokken

In 2023 zette Microsoft zwaar in op kunstmatige intelligentie en de samenwerking met OpenAI om Copilot werkelijkheid te maken.

Gebruikersaccounts uitschakelen in Windows 11

Gebruikersaccounts uitschakelen in Windows 11

U kunt gebruikersaccounts uitschakelen, zodat anderen geen toegang meer hebben tot uw computer.

Het kopen van een Windows-laptop is moeilijker dan ooit

Het kopen van een Windows-laptop is moeilijker dan ooit

Is de NPU anders genoeg om de aankoop uit te stellen en te wachten tot de PC Copilot+ mainstream wordt?

Hoe u de batterijbesparingsmodus op een Windows 11-laptop in- en uitschakelt

Hoe u de batterijbesparingsmodus op een Windows 11-laptop in- en uitschakelt

De batterijbesparingsmodus van Windows 11 is een functie die is ontworpen om de levensduur van de batterij van uw laptop te verlengen.

Microsoft lanceert nieuwe Sticky Notes-app voor Windows 11

Microsoft lanceert nieuwe Sticky Notes-app voor Windows 11

Jarenlang was alles bij het oude gebleven, maar de Sticky Note-update van medio 2024 veranderde alles.

Hoe de IRQL NOT LESS OR EQUAL-fout op Windows te verhelpen

Hoe de IRQL NOT LESS OR EQUAL-fout op Windows te verhelpen

De fout IRQL NOT LESS OR EQUAL is een geheugengerelateerde fout die meestal optreedt wanneer een systeemproces of driver probeert toegang te krijgen tot een geheugenadres zonder de juiste toegangsrechten.

6 manieren om bestands- en mappaden te kopiëren in Windows 11

6 manieren om bestands- en mappaden te kopiëren in Windows 11

Paden zijn de locaties van bestanden of mappen in Windows 11. Alle paden bevatten de mappen die u moet openen om naar een specifieke locatie te gaan.

Windows 10 en Windows 11 vergelijken

Windows 10 en Windows 11 vergelijken

Windows 11 is officieel gelanceerd. Ten opzichte van Windows 10 kent Windows 11 ook veel veranderingen, van de interface tot de nieuwe functies. Volg de details in het onderstaande artikel.

Hoe Windows 11 te downloaden, download de officiële Win 11 ISO van Microsoft

Hoe Windows 11 te downloaden, download de officiële Win 11 ISO van Microsoft

Momenteel is Windows 11 officieel gelanceerd en kunnen we het officiële Windows 11 ISO-bestand of de Insider Preview-versie downloaden om te installeren.