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

Wat is VPN? Voor- en nadelen van VPN en virtueel privénetwerk

Wat is VPN? Voor- en nadelen van VPN en virtueel privénetwerk

Wat is VPN en wat zijn de voor- en nadelen ervan? Laten we met WebTech360 de definitie van VPN bespreken en hoe we dit model en systeem in de praktijk kunnen toepassen.

De meeste mensen gebruiken deze verborgen functies in Windows-beveiliging niet.

De meeste mensen gebruiken deze verborgen functies in Windows-beveiliging niet.

Windows Security biedt meer dan alleen bescherming tegen basisvirussen. Het beschermt tegen phishing, blokkeert ransomware en voorkomt dat schadelijke apps worden uitgevoerd. Deze functies zijn echter niet gemakkelijk te vinden: ze zitten verborgen achter verschillende menulagen.

Coderen is niet zo moeilijk als je denkt

Coderen is niet zo moeilijk als je denkt

Zodra u het onder de knie hebt en zelf hebt uitgeprobeerd, zult u merken dat encryptie ontzettend makkelijk te gebruiken is en ontzettend praktisch in het dagelijks leven.

Herstel verwijderde gegevens met Recuva Portable in Windows 7

Herstel verwijderde gegevens met Recuva Portable in Windows 7

In het volgende artikel presenteren we de basisbewerkingen voor het herstellen van verwijderde gegevens in Windows 7 met de ondersteunende tool Recuva Portable. Met Recuva Portable kunt u uw gegevens opslaan op een handige USB-stick en gebruiken wanneer u ze nodig hebt. De tool is compact, eenvoudig en gebruiksvriendelijk en beschikt over de volgende functies:

Hoe u dubbele bestanden verwijdert om computergeheugen te besparen met CCleaner

Hoe u dubbele bestanden verwijdert om computergeheugen te besparen met CCleaner

CCleaner scant binnen enkele minuten op dubbele bestanden en laat u vervolgens beslissen welke u veilig kunt verwijderen.

Waarom moet ik de standaard downloadlocatie in Windows 11 wijzigen?

Waarom moet ik de standaard downloadlocatie in Windows 11 wijzigen?

Door de downloadmap van station C naar een ander station in Windows 11 te verplaatsen, verkleint u de capaciteit van station C en werkt uw computer soepeler.

Windows-updates op uw pc stoppen

Windows-updates op uw pc stoppen

Op deze manier kunt u uw systeem zodanig afstemmen dat updates plaatsvinden volgens uw eigen schema, en niet dat van Microsoft.

Hoe u bestandsextensies kunt weergeven, bestandsextensies kunt bekijken in Windows

Hoe u bestandsextensies kunt weergeven, bestandsextensies kunt bekijken in Windows

Windows Verkenner biedt talloze opties om de weergave van bestanden te wijzigen. Wat u misschien niet weet, is dat één belangrijke optie standaard is uitgeschakeld, ook al is deze cruciaal voor de beveiliging van uw systeem.

5 gratis tools om spyware en adware op uw pc te vinden

5 gratis tools om spyware en adware op uw pc te vinden

Met de juiste hulpmiddelen kunt u uw systeem scannen en spyware, adware en andere schadelijke programma's verwijderen die mogelijk op uw systeem aanwezig zijn.

14 Windows-apps en software die u nodig hebt op uw nieuwe computer

14 Windows-apps en software die u nodig hebt op uw nieuwe computer

Hieronder vindt u een lijst met aanbevolen software voor het installeren van een nieuwe computer. Zo kunt u de belangrijkste en beste applicaties voor uw computer kiezen!

Hoe u Windows-instellingen kunt klonen om uw workflow overal mee naartoe te nemen

Hoe u Windows-instellingen kunt klonen om uw workflow overal mee naartoe te nemen

Het kan erg handig zijn om een ​​compleet besturingssysteem op een flashdrive te hebben staan, vooral als je geen laptop hebt. Maar denk niet dat deze functie beperkt is tot Linux-distributies - het is tijd om je Windows-installatie te klonen.

Schakel deze 7 Windows-services uit om de batterijduur te verlengen!

Schakel deze 7 Windows-services uit om de batterijduur te verlengen!

Door een aantal van deze services uit te schakelen, kunt u aanzienlijk besparen op de batterijduur, zonder dat dit uw dagelijkse gebruik beïnvloedt.

Wat is het nut van de sneltoets Ctrl+Z in Windows? Waarschijnlijk meer dan je denkt.

Wat is het nut van de sneltoets Ctrl+Z in Windows? Waarschijnlijk meer dan je denkt.

Ctrl + Z is een veelgebruikte toetsencombinatie in Windows. Met Ctrl + Z kunt u in principe alle handelingen in Windows ongedaan maken.

Klik niet op een verkorte link voordat u zeker weet dat deze veilig is!

Klik niet op een verkorte link voordat u zeker weet dat deze veilig is!

Verkorte URL's zijn handig om lange links op te schonen, maar ze verbergen ook de werkelijke bestemming. Als je malware of phishing wilt vermijden, is het niet verstandig om zomaar op die link te klikken.

Windows 11 22H2: Moment 1-update met veel opvallende features

Windows 11 22H2: Moment 1-update met veel opvallende features

Na lang wachten is de eerste grote update van Windows 11 officieel uitgebracht.