komma igång med Visual Studio Codespaces – Cloud IDE

Visual Studio Codespaces (tidigare Visual Studio Online / VSO) webbaserad IDE är nu tillgänglig för användning. Baserat på den populära Visual Studio Code editor erbjuder den en bekant känsla och arbetsyta för att skriva och arbeta med källkod.. Detta erbjuder också utbyggbarheten för att stödja Visual Studio-Kodtillägg, även om vi för närvarande inte vet hur många eller vilka VS-kodtillägg som stöds.



skapa din första Visual Studio Codespace & Faktureringsplan

här är en översikt över att logga in på Visual Studio Codespace (den molnbaserade IDE från Microsoft) och komma igång med verktyget.

  1. börja med att öppna en webbläsare och navigera till https://online.visualstudio.com
  2. när du är inloggad, för första gången, du kommer att se en skärm som visar att du inte har några miljöer, med en skapa Codespace knapp.
     komma igång med Visual Studio Codespaces-Cloud IDE 1
  3. klicka på knappen Skapa Kodrymd.
  4. detta öppnar fönstret Skapa en Faktureringsplan. Du kommer att använda detta för att ange en ny Faktureringsplan för Visual Studio Codespaces som ska skapas i din Azure-prenumeration.
    komma igång med Visual Studio Codespaces - Cloud IDE 2
    ange följande värden i den här rutan:
    • prenumeration: Välj Azure-prenumerationen som din inloggning har tillgång till som du vill skapa den nya Faktureringsplanen inom.
    • plats: Välj Azure-regionen som värd för Faktureringsplanen.
  5. du kan också utöka Avancerade alternativ för att visa följande konfiguration:
    • Plannamn: ange namnet på Faktureringsplanen som ska skapas i din Azure-prenumeration.
    • resursgrupp: ange Resursgruppens namn för att placera den nya Faktureringsplanen inom.
  6. fyll i önskade värden och klicka sedan på Skapa.
  7. med den nyskapade Faktureringsplanen öppnar den automatiskt fönstret Skapa Kodrymd.
  8. för att skapa din första Kodrymd, fyll i de önskade värdena och klicka sedan på Skapa. Du kan använda följande värden för att prova detta för första gången.
    • Codespace Name: ange ett namn för det nya Codespace. Du bör använda ett namn som liknar projektet eller aktiviteten du ska använda den här miljön för.
    • Git Repository: ange eventuellt ett Git-arkiv för detta Kodområde att klona. Detta kan anges i två olika format:
      • Github Project URL: du kan ange den fullständiga webbadressen till Hemsidan för ett GitHub-projekt. Som https://github.com/build5nines/az-kung-fu.
      • GitHub kortform: du kan ange ett snedstreck avgränsat formaterat GitHub-arkivnamn i formatet organization/repo; till exempel build5nines/az-kung-fu.
    • Instanstyp: ange CPU-kärnan och minneskonfigurationen som ska tillhandahållas för Visual Studio Codespace.
    • Stäng av Idle Codespace efter…: Ange hur lång tid det tar tills Codespace stängs av automatiskt när det inte används.
       komma igång med Visual Studio Codespaces-Cloud IDE 3
  9. Visual Studio Codespace som just skapades kommer nu att öppnas för online code editor / IDE.

komma igång med Visual Studio Codespaces-Cloud IDE 4
skärmdump: Visual Studio Codespaces IDE


redigera, begå, en Synkroniseringskod ändras med Visual Studio Codespaces

här är en översikt över att öppna Visual Studio Codespaces editor, göra några kodändringar och begå dessa ändringar tillbaka till GitHub-förvaret för ett Codespace.

  1. klicka på en fil i projektet för att öppna den i redigeraren i arbetsytan till vänster på skärmen.

     Visual Studio Codespaces-webbaserad redaktör

    Visual Studio Codespaces-webbaserad redaktör
  2. gör några ändringar i filen, spara dem sedan genom att klicka på hamburgarmenyn längst upp till vänster och välja Arkiv och sedan spara.

     Visual Studio Codespaces-Arkiv Spara Meny

    Visual Studio Codespaces-Arkiv Spara Meny

    Notera: Du kan se att det finns flera menyalternativ tillgängliga i Visual Studio Codespace editor, och att det är samma VS kod stil erfarenhet du har vuxit till kärlek.

  3. för att begå dina ändringar i Visual Studio Online “local” Git Repository (som klonades från GitHub), klicka på fliken källkontroll till vänster i fönstret och använd sedan användargränssnittet för att lägga till ändringar och begå dem.

     Visual Studio Codespaces-fliken källkontroll

    Visual Studio Codespaces-fliken källkontroll
  4. när ändringarna har begåtts kan du synkronisera dem till GitHub-förvaret genom att klicka på ellipsen (…) på fliken källkontroll och sedan välja synkroniseringsalternativet.

     Visual Studio Codespaces-fliken källkontroll-synkronisera menyn

    Visual Studio Codespaces-fliken källkontroll-synkronisera meny
  5. du kommer att uppmanas med en bekräftelse på att du vill “push and pull förbinder sig till och från”origin/master””. Klicka på OK för att fortsätta med Synkroniseringsåtgärden.

    Visual Studio Codespaces-bekräfta synkronisering

    Visual Studio Codespaces-bekräfta synkronisering
  6. första gången du gör detta öppnar Visual Studio Online en ny webbläsarflik till Github-Auktoriseringssidan så att du kan auktorisera Visual Studio-Kodutrymmen med nödvändiga behörigheter som behövs mot GitHub för ditt konto.

     Visual Studio Codespaces prompt för GitHub behörigheter

    Visual Studio Codespaces prompt för GitHub behörigheter
  7. om du klickar på knappen Auktorisera kommer Visual Studio Codespaces att komma åt ditt GitHub-konto.

  8. när Visual Studio Codespaces har godkänts kommer den att slutföra Synkroniseringsoperationen mot GitHub-förvaret. Du kan nu navigera till GitHub för att se att åtagandet verkligen har synkroniserats.


installera tillägg inom Visual Studio Codespaces

Visual Studio Codespaces webbaserad redaktör bygger på grunden för Visual Studio Code (VS Code). Som sådan delar den massor av saker inklusive ett välbekant användargränssnitt / erfarenhet och möjligheten att installera VS-Kodtillägg. Detta gör att du i huvudsak kan använda samma VS – kodredigerare med tillägg installerade från din webbläsare, på vilken enhet som helst!

du kan installera tillägg på Visual Studio Codespaces på samma sätt som att installera tillägg i VS-kod.

  1. öppna fliken Tillägg genom att klicka på ikonen till vänster om redigeraren
  2. Sök efter och leta reda på dina valfria tillägg.
  3. klicka på knappen Installera för tillägget för att installera det i Visual Studio Codespaces editor.
komma igång med Visual Studio Codespaces-Cloud IDE 5
skärmdump: Installera tillägg i Visual Studio Codespaces IDE


Visual Studio-Kodrymder resurser i Azure-prenumerationen

när du skapar en Faktureringsplan för Visual Studio-Kodrymder faktureras den planen mot din Azure-prenumeration. Det betyder att Faktureringsplanen skapas i din Azure-prenumeration och finns tillsammans med alla dina andra Azure-resurser.

  • komma igång med Visual Studio Codespaces-Cloud IDE 6
    VS Codespaces Faktureringsplan inom Azure
  • komma igång med Visual Studio Codespaces-Cloud IDE 7
    VS Codespaces Faktureringsplan inom resursgruppen


Wrap Up

som du kan se Visual Studio Codespaces (tidigare Visual Studio Online) är ganska lätt att komma igång med. Också, med hjälp av Visual Studio Code IDE användargränssnitt och erfarenhet gör VS Codespaces editor bekant att använda. Du kan även installera tillägg i Visual Studio Codespaces!

Lycklig kodning!

PS ursprungligen tillkännagavs i maj 2019 som Visual Studio Online (VSO), det är fantastiskt att äntligen få allmänhetens tillgång till och kunna börja prova / använda Visual Studio Codespaces.

om författaren

Microsoft MVP

Chris är grundaren av Build5Nines.com och en Microsoft MVP i Azure & IoT med 20 års erfarenhet av att designa och bygga moln & Enterprise systems. Han är också Microsoft-certifierad: Azure Solutions Architect, developer, Microsoft Certified Trainer (MCT) och Cloud Advocate. Han har en passion för teknik och delar vad han lär sig med andra för att hjälpa dem att lära sig snabbare och vara mer produktiva.

Lämna ett svar

Din e-postadress kommer inte publiceras.