11 KiB
Använda en kodredigerare
Den här lektionen täcker grunderna i att använda VSCode.dev, en webbaserad kodredigerare, så att du kan göra ändringar i din kod och bidra till ett projekt utan att installera något på din dator.
Lärandemål
I den här lektionen kommer du att lära dig att:
- Använda en kodredigerare i ett kodprojekt
- Hålla koll på ändringar med versionskontroll
- Anpassa redigeraren för utveckling
Förkunskaper
Innan du börjar behöver du skapa ett konto hos GitHub. Navigera till GitHub och skapa ett konto om du inte redan har ett.
Introduktion
En kodredigerare är ett viktigt verktyg för att skriva program och samarbeta med befintliga kodprojekt. När du förstår grunderna i en redigerare och hur du använder dess funktioner kan du tillämpa dem när du skriver kod.
Kom igång med VSCode.dev
VSCode.dev är en kodredigerare på webben. Du behöver inte installera något för att använda den, precis som att öppna vilken annan webbplats som helst. För att komma igång med redigeraren, öppna följande länk: https://vscode.dev. Om du inte är inloggad på GitHub, följ instruktionerna för att logga in eller skapa ett nytt konto och logga sedan in.
När den har laddats bör den se ut ungefär som på denna bild:
Det finns tre huvudsakliga sektioner, från längst till vänster och rör sig mot höger:
- Aktivitetsfältet som innehåller några ikoner, som förstoringsglaset 🔎, kugghjulet ⚙️ och några andra.
- Det utökade aktivitetsfältet som som standard visar Utforskaren, kallad sidofältet.
- Och slutligen kodområdet till höger.
Klicka på varje ikon för att visa en annan meny. När du är klar, klicka på Utforskaren så att du är tillbaka där du började.
När du börjar skapa kod eller ändra befintlig kod kommer det att ske i det största området till höger. Du kommer att använda detta område för att visualisera befintlig kod också, vilket du kommer att göra härnäst.
Öppna ett GitHub-repository
Det första du behöver göra är att öppna ett GitHub-repository. Det finns flera sätt att öppna ett repository. I det här avsnittet kommer du att se två olika sätt att öppna ett repository så att du kan börja arbeta med ändringar.
1. Med redigeraren
Använd själva redigeraren för att öppna ett fjärrrepository. Om du går till VSCode.dev kommer du att se en knapp som heter "Open Remote Repository":
Du kan också använda kommandopaletten. Kommandopaletten är en inmatningsruta där du kan skriva vilket ord som helst som är en del av ett kommando eller en åtgärd för att hitta rätt kommando att utföra. Använd menyn längst upp till vänster, välj sedan Visa och välj därefter Kommandopalett, eller använd följande tangentbordsgenväg: Ctrl-Shift-P (på MacOS är det Command-Shift-P).
När menyn öppnas, skriv open remote repository och välj sedan det första alternativet. Flera repositories som du är en del av eller som du har öppnat nyligen kommer att visas. Du kan också använda en fullständig GitHub-URL för att välja ett. Använd följande URL och klistra in den i rutan:
https://github.com/microsoft/Web-Dev-For-Beginners
✅ Om det lyckas kommer du att se alla filer för detta repository laddade i textredigeraren.
2. Använda URL
Du kan också använda en URL direkt för att ladda ett repository. Till exempel är den fullständiga URL:en för det aktuella repositoryt https://github.com/microsoft/Web-Dev-For-Beginners, men du kan byta ut GitHub-domänen med VSCode.dev/github och ladda repositoryt direkt. Den resulterande URL:en skulle vara https://vscode.dev/github/microsoft/Web-Dev-For-Beginners.
Redigera filer
När du har öppnat repositoryt i webbläsaren/vscode.dev är nästa steg att göra uppdateringar eller ändringar i projektet.
1. Skapa en ny fil
Du kan antingen skapa en fil i en befintlig mapp eller skapa den i rotkatalogen/mappen. För att skapa en ny fil, öppna en plats/katalog där du vill att filen ska sparas och välj ikonen 'Ny fil ...' på aktivitetsfältet (vänster), ge den ett namn och tryck på enter.
2. Redigera och spara en fil i repositoryt
Att använda vscode.dev är användbart när du vill göra snabba uppdateringar av ditt projekt utan att behöva ladda någon programvara lokalt.
För att uppdatera din kod, klicka på ikonen 'Utforskaren', som också finns på aktivitetsfältet, för att visa filer och mappar i repositoryt.
Välj en fil för att öppna den i kodområdet, gör dina ändringar och spara.
När du är klar med att uppdatera ditt projekt, välj ikonen versionskontroll som innehåller alla nya ändringar du har gjort i repositoryt.
För att visa de ändringar du har gjort i ditt projekt, välj filerna i mappen Ändringar i det utökade aktivitetsfältet. Detta öppnar ett 'Arbetsträd' där du visuellt kan se de ändringar du har gjort i filen. Rött visar en borttagning från projektet, medan grönt betyder ett tillägg.
Om du är nöjd med de ändringar du har gjort, hovra över mappen Ändringar och klicka på +-knappen för att lägga till ändringarna. Att lägga till ändringar innebär att förbereda dem för att skickas till GitHub.
Om du däremot inte är bekväm med vissa ändringar och vill ta bort dem, hovra över mappen Ändringar och välj ikonen ångra.
Skriv sedan ett commit-meddelande (En beskrivning av ändringen du har gjort i projektet), klicka på ikonen check för att skicka och pusha dina ändringar.
När du är klar med att arbeta på ditt projekt, välj ikonen hamburgermeny längst upp till vänster för att återgå till repositoryt på github.com.
Använda tillägg
Att installera tillägg i VSCode gör att du kan lägga till nya funktioner och anpassade utvecklingsmiljöalternativ i din redigerare för att förbättra ditt arbetsflöde. Dessa tillägg hjälper dig också att lägga till stöd för flera programmeringsspråk och är ofta antingen generiska tillägg eller språkbaserade tillägg.
För att bläddra igenom listan över alla tillgängliga tillägg, klicka på ikonen Tillägg på aktivitetsfältet och börja skriva namnet på tillägget i textfältet märkt 'Sök tillägg i Marketplace'.
Du kommer att se en lista över tillägg, var och en innehållande tilläggets namn, utgivarens namn, en kort beskrivning, antal nedladdningar och en stjärnklassificering.
Du kan också visa alla tidigare installerade tillägg genom att expandera mappen Installerade, populära tillägg som används av de flesta utvecklare i mappen Populära och rekommenderade tillägg för dig, antingen av användare i samma arbetsyta eller baserat på dina nyligen öppnade filer, i mappen Rekommenderade.
1. Installera tillägg
För att installera ett tillägg, skriv tilläggets namn i sökfältet och klicka på det för att visa ytterligare information om tillägget i kodområdet när det visas i det utökade aktivitetsfältet.
Du kan antingen klicka på den blå installationsknappen i det utökade aktivitetsfältet för att installera eller använda installationsknappen som visas i kodområdet när du väljer tillägget för att ladda ytterligare information.
2. Anpassa tillägg
Efter att ha installerat tillägget kan du behöva ändra dess beteende och anpassa det baserat på dina preferenser. För att göra detta, välj ikonen Tillägg, och den här gången kommer ditt tillägg att visas i mappen Installerade, klicka på Kugghjulsikonen och navigera till Tilläggsinställningar.
3. Hantera tillägg
Efter att ha installerat och använt ditt tillägg erbjuder vscode.dev alternativ för att hantera ditt tillägg baserat på olika behov. Till exempel kan du välja att:
-
Inaktivera: (Du inaktiverar tillfälligt ett tillägg när du inte längre behöver det men inte vill avinstallera det helt)
Välj det installerade tillägget i det utökade aktivitetsfältet > klicka på kugghjulsikonen > välj 'Inaktivera' eller 'Inaktivera (Arbetsyta)' ELLER Öppna tillägget i kodområdet och klicka på den blå Inaktivera-knappen.
-
Avinstallera: Välj det installerade tillägget i det utökade aktivitetsfältet > klicka på kugghjulsikonen > välj 'Avinstallera' ELLER Öppna tillägget i kodområdet och klicka på den blå Avinstallera-knappen.
Uppgift
Skapa en CV-webbplats med vscode.dev
Granskning & Självstudier
Läs mer om VSCode.dev och några av dess andra funktioner.
Ansvarsfriskrivning:
Detta dokument har översatts med hjälp av AI-översättningstjänsten Co-op Translator. Även om vi strävar efter noggrannhet, vänligen notera att automatiska översättningar kan innehålla fel eller felaktigheter. Det ursprungliga dokumentet på dess originalspråk bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för eventuella missförstånd eller feltolkningar som uppstår vid användning av denna översättning.