aan de slag met Visual Studio Codespaces – Cloud IDE

de Visual Studio Codespaces (voorheen Visual Studio Online / VSO) web-based IDE is nu beschikbaar om te worden gebruikt. Gebaseerd op de populaire Visual Studio Code editor, Het biedt een vertrouwd gevoel en werkruimte voor het schrijven en werken met broncode.. Dit biedt ook de uitbreidbaarheid van het ondersteunen van Visual Studio-Code-extensies, hoewel we op dit moment niet weten hoeveel of welke VS-Code-extensies zullen worden ondersteund.



uw eerste Visual Studio-Codespace & Factureringsplan

hier vindt u een overzicht van het inloggen op Visual Studio-Codespaces (de cloudgebaseerde IDE van Microsoft) en het aan de slag gaan met de tooling.

  1. begin met het openen van een webbrowser en navigeer naar https://online.visualstudio.com
  2. zodra u bent ingelogd, ziet u voor het eerst een scherm dat laat zien dat u geen omgevingen hebt, met de knop Coderuimte aanmaken.
    aan de slag met Visual Studio - Codespaces-Cloud IDE 1
  3. klik op de knop Coderuimte maken.
  4. dit opent het deelvenster een Factureringsplan maken. U gebruikt dit om een nieuw Visual Studio Codespaces-Factureringsplan op te geven dat moet worden gemaakt binnen uw Azure-abonnement.
    aan de slag met Visual Studio - Codespaces-Cloud IDE 2
    Geef de volgende waarden op in dit paneel:
    • abonnement: Kies het Azure-abonnement waartoe uw login toegang heeft waarvoor u het nieuwe Factureringsplan wilt aanmaken.
    • locatie: Kies de Azure-regio om het Factureringsplan te hosten.
  5. Optioneel kunt u geavanceerde opties uitbreiden om de volgende configuratie weer te geven:
    • Plannaam: Geef de naam op van het Factureringsplan dat u wilt maken binnen uw Azure-abonnement.
    • brongroep: Geef de naam van de brongroep op waarin het nieuwe Factureringsplan moet worden geplaatst.
  6. vul de gewenste waarden in en klik vervolgens op maken.
  7. met het nieuw aangemaakte Factureringsplan opent het automatisch het deelvenster Coderuimte maken.
  8. om uw eerste Coderuimte aan te maken, vult u de vereiste waarden in en klikt u op maken. U kunt de volgende waarden gebruiken om dit voor de eerste keer te proberen.
    • Coderuimte naam: Geef een naam op voor de nieuwe Coderuimte. U moet een naam gebruiken die lijkt op het project of de taak waarvoor u deze omgeving wilt gebruiken.
    • Git Repository: optioneel, geef een git repository op voor deze Coderuimte om te klonen. Dit kan in twee verschillende formaten worden gespecificeerd:
      • URL van het GitHub-Project: u kunt de volledige URL van de homepage van een GitHub-project opgeven. Zoals https://github.com/build5nines/az-kung-fu.
      • GitHub Short Form: u kunt een door een schuine streep gescheiden opgemaakte GitHub-repositorynaam opgeven in het formaat organization/repo; zoals build5nines/az-kung-fu.
    • Instance Type: Geef de CPU core en het geheugen configuratie die zal worden voorzien voor de Visual Studio Codespace.
    • inactieve Coderuimte onderbreken na…: Geef de tijdsduur op totdat de Coderuimte automatisch wordt onderbroken wanneer deze niet in gebruik is.
      aan de slag met Visual Studio - Codespaces-Cloud IDE 3
  9. de Visual Studio-Codespace die zojuist is gemaakt, wordt nu geopend voor de online code-editor / IDE.

aan de slag met Visual Studio - Codespaces-Cloud IDE 4
Screenshot: Visual Studio Codespaces IDE


bewerken, committen, een synchronisatie Code wijzigingen met behulp van Visual Studio Codespaces

hier is een overzicht van het openen van de Visual Studio Codespaces editor, het maken van een aantal code wijzigingen, en committen die wijzigingen terug naar de GitHub Repository voor een Codespace.

  1. klik in het werkblad aan de linkerkant van het scherm op een bestand in het project om het te openen in de editor.

    Visual Studio-Codespaces-web-based Editor

    Visual Studio Codespaces-web-based Editor
  2. breng een aantal wijzigingen aan in het bestand en sla ze vervolgens op door op het hamburgermenu in de linkerbovenhoek te klikken en bestand te selecteren en vervolgens op te slaan.

    Visual Studio-Codespaces-Menu Bestand Opslaan

    Visual Studio-Codespaces-Menu Bestand Opslaan

    Opmerking: U kunt zien dat er verschillende menu-opties beschikbaar zijn in de Visual Studio Codespace editor, en dat het dezelfde VS Code stijl ervaring die je bent gegroeid om liefde.

  3. om je wijzigingen in de Visual Studio Online “local” Git Repository te committen (die gekloond werd vanuit GitHub), klik je op de Source Control tab aan de linkerkant van het venster, gebruik dan de gebruikersinterface om wijzigingen toe te voegen en ze te committen.

    Visual Studio-Codespaces-tabblad bronbeheer

    Visual Studio-Codespaces-tabblad bronbeheer
  4. zodra de wijzigingen zijn gecommit, kun je ze synchroniseren met de Github Repository door op de ellipse (…) te klikken in de Source Control tab, en vervolgens de Sync optie te selecteren.

    Visual Studio-Codespaces - tabblad Broncontrole-Synchronisatiemenu

    Visual Studio-Codespaces - tabblad Broncontrole-menu synchroniseren
  5. je wordt gevraagd met een bevestiging dat je”commits naar en van ‘origin/master’wilt pushen en Pullen”. Klik op OK om verder te gaan met de synchronisatie actie.

    Visual Studio-Codespaces-synchroniseren bevestigen

    Visual Studio-Codespaces-synchroniseren bevestigen
  6. de eerste keer dat je dit doet, zal Visual Studio Online een nieuw browser tabblad openen naar de Github autorisatie pagina, zodat je Visual Studio Codespaces kunt autoriseren met de nodige permissies die het nodig heeft tegen GitHub voor je account.

    Visual Studio-Codespaces vragen om GitHub-machtigingen

    Visual Studio-Codespaces vragen om GitHub-machtigingen
  7. Als u op de knop autoriseren klikt, wordt Visual Studio-Codespaces gemachtigd om toegang te krijgen tot uw GitHub-Account.

  8. nadat Visual Studio Codespaces is geautoriseerd, zal het de synchronisatie operatie met de Github Repository voltooien. Je kunt nu naar GitHub navigeren om te zien dat de commit inderdaad gesynchroniseerd is.


installeer extensies binnen Visual Studio Codespaces

de web-based editor voor Visual Studio Codespaces is gebouwd op de basis van Visual Studio Code (VS Code). Als zodanig, het deelt veel dingen, waaronder een vertrouwde gebruikersinterface / ervaring, en de mogelijkheid om te installeren VS Code extensies. Hiermee kunt u in wezen gebruik maken van dezelfde VS Code editor Met extensies geïnstalleerd vanuit uw webbrowser, op elk apparaat!

u kunt extensies installeren op Visual Studio-Coderuimten op dezelfde manier als extensies installeren in VS-Code.

  1. Open het tabblad Extensies door te klikken op het pictogram aan de linkerkant van de editor
  2. Zoek en zoek uw extensie(s) naar keuze.
  3. klik op de knop Installeren om de extensie te installeren in de Visual Studio Codespaces editor.
aan de slag met Visual Studio - Codespaces-Cloud IDE 5
Screenshot: Installeer extensies in Visual Studio Codespaces IDE


Visual Studio-Codespaces-bronnen in uw Azure-abonnement

wanneer u een abonnement voor Visual Studio-Codespaces maakt, wordt dat abonnement gefactureerd tegen uw Azure-abonnement. Dit betekent dat het Factureringsplan wordt gemaakt binnen uw Azure-abonnement en zich naast al uw andere Azure-bronnen bevindt.

  • Aan de Slag met Visual Studio Codespaces - Cloud IDE 6
    VS Codespaces Facturering Plan binnen het Azure
  • Aan de Slag met Visual Studio Codespaces - Cloud IDE 7
    VS Codespaces Facturering Plan binnen het Bron-Groep


Wrap Up

Zoals je kan zien Visual Studio Codespaces (voorheen Visual Studio-Online) is vrij eenvoudig om te beginnen met. Ook, met behulp van de Visual Studio Code IDE gebruikersinterface en ervaring maakt de VS Codespaces editor bekend om te gebruiken. U kunt zelfs extensies installeren in Visual Studio Codespaces!

Gelukkig programmeren!

P. S. oorspronkelijk aangekondigd in Mei 2019 als Visual Studio Online( VSO), is het verbazingwekkend om eindelijk publieke toegang te krijgen tot en te kunnen beginnen met het uitproberen / gebruiken van Visual Studio-Codespaces.

over de auteur

Microsoft MVP

Chris is de oprichter van Build5Nines.com en een Microsoft MVP in Azure & IoT met 20 jaar ervaring in het ontwerpen en bouwen van Cloud & Enterprise systems. Hij is ook Microsoft Certified: Azure Solutions Architect, developer, Microsoft Certified Trainer (MCT) en Cloud Advocate. Hij heeft een passie voor technologie en het delen van wat hij leert met anderen om hen in staat te stellen sneller te leren en productiever te zijn.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.