11 KiB
Bruke en kodeeditor
Denne leksjonen dekker det grunnleggende om å bruke VSCode.dev, en nettbasert kodeeditor, slik at du kan gjøre endringer i koden din og bidra til et prosjekt uten å installere noe på datamaskinen din.
Læringsmål
I denne leksjonen vil du lære å:
- Bruke en kodeeditor i et kodeprosjekt
- Holde oversikt over endringer med versjonskontroll
- Tilpasse editoren for utvikling
Forutsetninger
Før du begynner, må du opprette en konto hos GitHub. Gå til GitHub og opprett en konto hvis du ikke allerede har gjort det.
Introduksjon
En kodeeditor er et essensielt verktøy for å skrive programmer og samarbeide med eksisterende kodeprosjekter. Når du forstår det grunnleggende om en editor og hvordan du bruker dens funksjoner, kan du anvende dem når du skriver kode.
Komme i gang med VSCode.dev
VSCode.dev er en kodeeditor på nettet. Du trenger ikke å installere noe for å bruke den, akkurat som å åpne en hvilken som helst annen nettside. For å komme i gang med editoren, åpne følgende lenke: https://vscode.dev. Hvis du ikke er logget inn på GitHub, følg instruksjonene for å logge inn eller opprette en ny konto og deretter logge inn.
Når den lastes inn, bør den se omtrent slik ut:
Det er tre hovedseksjoner, fra venstre til høyre:
- Aktivitetsfeltet, som inkluderer noen ikoner, som forstørrelsesglasset 🔎, tannhjulet ⚙️, og noen andre.
- Det utvidede aktivitetsfeltet som som standard viser Utforsker, kalt sidefeltet.
- Og til slutt kodeområdet til høyre.
Klikk på hvert av ikonene for å vise en annen meny. Når du er ferdig, klikk på Utforsker slik at du er tilbake der du startet.
Når du begynner å lage kode eller endre eksisterende kode, vil det skje i det største området til høyre. Du vil også bruke dette området til å visualisere eksisterende kode, noe du skal gjøre neste gang.
Åpne et GitHub-repositorium
Det første du trenger er å åpne et GitHub-repositorium. Det finnes flere måter å åpne et repositorium på. I denne delen vil du se to forskjellige måter du kan åpne et repositorium på, slik at du kan begynne å jobbe med endringer.
1. Med editoren
Bruk selve editoren til å åpne et eksternt repositorium. Hvis du går til VSCode.dev, vil du se en knapp som heter "Open Remote Repository":
Du kan også bruke kommandopaletten. Kommandopaletten er en inntastingsboks der du kan skrive inn et hvilket som helst ord som er en del av en kommando eller handling for å finne riktig kommando å utføre. Bruk menyen øverst til venstre, velg deretter View, og deretter Command Palette, eller bruk følgende hurtigtast: Ctrl-Shift-P (på MacOS er det Command-Shift-P).
Når menyen åpnes, skriv open remote repository, og velg deretter det første alternativet. Flere repositorier som du er en del av eller som du har åpnet nylig, vil vises. Du kan også bruke en full GitHub-URL for å velge ett. Bruk følgende URL og lim den inn i boksen:
https://github.com/microsoft/Web-Dev-For-Beginners
✅ Hvis det lykkes, vil du se alle filene for dette repositoriet lastet inn i teksteditoren.
2. Ved å bruke URL
Du kan også bruke en URL direkte for å laste inn et repositorium. For eksempel er den fullstendige URL-en for det nåværende repositoriet https://github.com/microsoft/Web-Dev-For-Beginners, men du kan bytte ut GitHub-domenet med VSCode.dev/github og laste inn repositoriet direkte. Den resulterende URL-en vil være https://vscode.dev/github/microsoft/Web-Dev-For-Beginners.
Redigere filer
Når du har åpnet repositoriet i nettleseren/vscode.dev, er neste steg å gjøre oppdateringer eller endringer i prosjektet.
1. Opprett en ny fil
Du kan enten opprette en fil inne i en eksisterende mappe eller opprette den i rotkatalogen/mappen. For å opprette en ny fil, åpne en plassering/katalog der du vil lagre filen og velg ikonet 'New file ...' på aktivitetsfeltet (venstre), gi den et navn og trykk enter.
2. Redigere og lagre en fil i repositoriet
Å bruke vscode.dev er nyttig når du vil gjøre raske oppdateringer i prosjektet ditt uten å måtte laste inn programvare lokalt.
For å oppdatere koden din, klikk på 'Utforsker'-ikonet, som også er plassert på aktivitetsfeltet, for å vise filer og mapper i repositoriet.
Velg en fil for å åpne den i kodeområdet, gjør endringene dine og lagre.
Når du er ferdig med å oppdatere prosjektet ditt, velg ikonet source control, som inneholder alle de nye endringene du har gjort i repositoriet.
For å se endringene du har gjort i prosjektet, velg filene i Changes-mappen i det utvidede aktivitetsfeltet. Dette vil åpne et 'Working Tree' som lar deg visuelt se endringene du har gjort i filen. Rødt viser en utelatelse i prosjektet, mens grønt indikerer en tillegg.
Hvis du er fornøyd med endringene du har gjort, hold musepekeren over Changes-mappen og klikk på +-knappen for å stage endringene. Å stage betyr å forberede endringene dine for å commite dem til GitHub.
Hvis du derimot ikke er komfortabel med noen endringer og vil forkaste dem, hold musepekeren over Changes-mappen og velg ikonet undo.
Deretter skriver du inn en commit message (En beskrivelse av endringen du har gjort i prosjektet), klikker på check-ikonet for å committe og pushe endringene dine.
Når du er ferdig med å jobbe med prosjektet ditt, velg hamburger-menyikonet øverst til venstre for å gå tilbake til repositoriet på github.com.
Bruke utvidelser
Å installere utvidelser i VSCode lar deg legge til nye funksjoner og tilpasse utviklingsmiljøet ditt i editoren for å forbedre arbeidsflyten din. Disse utvidelsene hjelper deg også med å legge til støtte for flere programmeringsspråk og er ofte enten generelle utvidelser eller språkbaserte utvidelser.
For å bla gjennom listen over alle tilgjengelige utvidelser, klikk på Extensions-ikonet på aktivitetsfeltet og begynn å skrive inn navnet på utvidelsen i tekstfeltet merket 'Search Extensions in Marketplace'.
Du vil se en liste over utvidelser, hver med utvidelsesnavn, utgiverens navn, en kort beskrivelse, antall nedlastinger og en stjernerangering.
Du kan også se alle tidligere installerte utvidelser ved å utvide mappen Installed, populære utvidelser brukt av de fleste utviklere i mappen Popular, og anbefalte utvidelser for deg enten av brukere i samme arbeidsområde eller basert på nylig åpnet filer i mappen Recommended.
1. Installere utvidelser
For å installere en utvidelse, skriv inn navnet på utvidelsen i søkefeltet og klikk på den for å se tilleggsinformasjon om utvidelsen i kodeområdet når den vises i det utvidede aktivitetsfeltet.
Du kan enten klikke på den blå installasjonsknappen i det utvidede aktivitetsfeltet for å installere eller bruke installasjonsknappen som vises i kodeområdet når du velger utvidelsen for å laste inn tilleggsinformasjon.
2. Tilpasse utvidelser
Etter å ha installert utvidelsen, kan det hende du må endre dens oppførsel og tilpasse den basert på dine preferanser. For å gjøre dette, velg Extensions-ikonet, og denne gangen vil utvidelsen din vises i mappen Installed, klikk på Gear-ikonet og naviger til Extensions Setting.
3. Administrere utvidelser
Etter å ha installert og brukt utvidelsen, tilbyr vscode.dev alternativer for å administrere utvidelsen basert på ulike behov. For eksempel kan du velge å:
-
Deaktivere: (Du deaktiverer midlertidig en utvidelse når du ikke lenger trenger den, men ikke vil avinstallere den helt)
Velg den installerte utvidelsen i det utvidede aktivitetsfeltet > klikk på Gear-ikonet > velg 'Disable' eller 'Disable (Workspace)' ELLER åpne utvidelsen i kodeområdet og klikk på den blå Deaktiver-knappen.
-
Avinstallere: Velg den installerte utvidelsen i det utvidede aktivitetsfeltet > klikk på Gear-ikonet > velg 'Uninstall' ELLER åpne utvidelsen i kodeområdet og klikk på den blå Avinstaller-knappen.
Oppgave
Opprett et CV-nettsted ved hjelp av vscode.dev
Gjennomgang og selvstudium
Les mer om VSCode.dev og noen av de andre funksjonene.
Ansvarsfraskrivelse:
Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten Co-op Translator. Selv om vi streber etter nøyaktighet, vær oppmerksom på at automatiserte oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på sitt opprinnelige språk bør anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen.