12 KiB
Een code-editor gebruiken
Deze les behandelt de basisprincipes van het gebruik van VSCode.dev, een webgebaseerde code-editor, zodat je wijzigingen kunt aanbrengen in je code en kunt bijdragen aan een project zonder iets op je computer te installeren.
Leerdoelen
In deze les leer je:
- Een code-editor gebruiken in een codeproject
- Wijzigingen bijhouden met versiebeheer
- De editor aanpassen voor ontwikkeling
Vereisten
Voordat je begint, moet je een account aanmaken bij GitHub. Ga naar GitHub en maak een account aan als je dat nog niet hebt gedaan.
Introductie
Een code-editor is een essentieel hulpmiddel voor het schrijven van programma's en het samenwerken aan bestaande codeprojecten. Zodra je de basisprincipes van een editor begrijpt en weet hoe je de functies kunt gebruiken, kun je ze toepassen bij het schrijven van code.
Aan de slag met VSCode.dev
VSCode.dev is een code-editor op het web. Je hoeft niets te installeren om het te gebruiken, net zoals je een andere website opent. Om te beginnen met de editor, open je de volgende link: https://vscode.dev. Als je niet bent ingelogd bij GitHub, volg dan de aanwijzingen om in te loggen of een nieuw account aan te maken en log vervolgens in.
Zodra het is geladen, zou het er ongeveer zo uit moeten zien:
Er zijn drie hoofdsecties, beginnend vanaf de meest linkse kant en bewegend naar rechts:
- De activiteitsbalk met enkele pictogrammen, zoals het vergrootglas 🔎, het tandwiel ⚙️, en een paar andere.
- De uitgebreide activiteitsbalk die standaard de Explorer toont, ook wel de zijbalk genoemd.
- En tot slot het codegebied aan de rechterkant.
Klik op elk van de pictogrammen om een ander menu weer te geven. Als je klaar bent, klik je op de Explorer zodat je terug bent waar je begon.
Wanneer je begint met het maken van code of het wijzigen van bestaande code, gebeurt dit in het grootste gebied aan de rechterkant. Je gebruikt dit gebied ook om bestaande code te visualiseren, wat je hierna zult doen.
Een GitHub-repository openen
Het eerste wat je nodig hebt, is een GitHub-repository openen. Er zijn meerdere manieren om een repository te openen. In deze sectie zie je twee verschillende manieren waarop je een repository kunt openen om wijzigingen aan te brengen.
1. Met de editor
Gebruik de editor zelf om een externe repository te openen. Als je naar VSCode.dev gaat, zie je een knop "Open Remote Repository":
Je kunt ook de opdrachtpalet gebruiken. De opdrachtpalet is een invoerveld waarin je een woord kunt typen dat deel uitmaakt van een opdracht of actie om de juiste opdracht te vinden en uit te voeren. Gebruik het menu linksboven, selecteer vervolgens View, en kies daarna Command Palette, of gebruik de volgende sneltoets: Ctrl-Shift-P (op MacOS is dat Command-Shift-P).
Wanneer het menu opent, typ je open remote repository, en selecteer je de eerste optie. Meerdere repositories waar je deel van uitmaakt of die je onlangs hebt geopend, worden weergegeven. Je kunt ook een volledige GitHub-URL gebruiken om er een te selecteren. Gebruik de volgende URL en plak deze in het veld:
https://github.com/microsoft/Web-Dev-For-Beginners
✅ Als het succesvol is, zie je alle bestanden van deze repository geladen in de teksteditor.
2. Met de URL
Je kunt ook direct een URL gebruiken om een repository te laden. Bijvoorbeeld, de volledige URL voor de huidige repository is https://github.com/microsoft/Web-Dev-For-Beginners, maar je kunt het GitHub-domein vervangen door VSCode.dev/github en de repository direct laden. De resulterende URL zou zijn https://vscode.dev/github/microsoft/Web-Dev-For-Beginners.
Bestanden bewerken
Zodra je de repository in de browser/vscode.dev hebt geopend, is de volgende stap het maken van updates of wijzigingen aan het project.
1. Een nieuw bestand maken
Je kunt een bestand maken in een bestaande map of in de hoofdmap. Om een nieuw bestand te maken, open je een locatie/map waar je het bestand wilt opslaan en selecteer je het pictogram 'Nieuw bestand ...' op de activiteitsbalk (links), geef het een naam en druk op enter.
2. Een bestand bewerken en opslaan in de repository
Het gebruik van vscode.dev is handig wanneer je snel updates wilt maken aan je project zonder software lokaal te laden.
Om je code bij te werken, klik je op het pictogram 'Explorer', ook te vinden op de activiteitsbalk, om bestanden en mappen in de repository te bekijken.
Selecteer een bestand om het te openen in het codegebied, maak je wijzigingen en sla op.
Wanneer je klaar bent met het bijwerken van je project, selecteer je het pictogram source control, dat alle nieuwe wijzigingen bevat die je hebt aangebracht in je repository.
Om de wijzigingen te bekijken die je hebt aangebracht, selecteer je de bestanden in de map Changes in de uitgebreide activiteitsbalk. Dit opent een 'Working Tree' waarin je visueel de wijzigingen kunt zien die je hebt aangebracht in het bestand. Rood geeft een verwijdering aan, terwijl groen een toevoeging aangeeft.
Als je tevreden bent met de wijzigingen die je hebt aangebracht, beweeg je over de map Changes en klik je op de knop + om de wijzigingen te stage-en. Stage-en betekent simpelweg dat je je wijzigingen voorbereidt om ze te committen naar GitHub.
Als je echter niet tevreden bent met sommige wijzigingen en ze wilt verwijderen, beweeg je over de map Changes en selecteer je het pictogram undo.
Typ vervolgens een commit message (Een beschrijving van de wijziging die je hebt aangebracht in het project), klik op het check-pictogram om te committen en je wijzigingen te pushen.
Wanneer je klaar bent met werken aan je project, selecteer je het pictogram hamburgermenu linksboven om terug te keren naar de repository op github.com.
Extensies gebruiken
Het installeren van extensies in VSCode stelt je in staat om nieuwe functies en opties voor een aangepaste ontwikkelomgeving toe te voegen aan je editor om je ontwikkelworkflow te verbeteren. Deze extensies helpen je ook ondersteuning toe te voegen voor meerdere programmeertalen en zijn vaak generieke extensies of taalgebaseerde extensies.
Om door de lijst van alle beschikbare extensies te bladeren, klik je op het pictogram Extensies op de activiteitsbalk en begin je de naam van de extensie te typen in het tekstveld met het label 'Search Extensions in Marketplace'.
Je ziet een lijst met extensies, elk met de naam van de extensie, de naam van de uitgever, een korte beschrijving, het aantal downloads en een sterbeoordeling.
Je kunt ook alle eerder geïnstalleerde extensies bekijken door de map Installed uit te vouwen, populaire extensies die door de meeste ontwikkelaars worden gebruikt in de map Popular en aanbevolen extensies voor jou, gebaseerd op gebruikers in dezelfde werkruimte of op je recent geopende bestanden, in de map Recommended.
1. Extensies installeren
Om een extensie te installeren, typ je de naam van de extensie in het zoekveld en klik je erop om aanvullende informatie over de extensie te bekijken in het codegebied zodra deze verschijnt in de uitgebreide activiteitsbalk.
Je kunt op de blauwe install-knop klikken in de uitgebreide activiteitsbalk om te installeren of de install-knop gebruiken die verschijnt in het codegebied zodra je de extensie selecteert om aanvullende informatie te laden.
2. Extensies aanpassen
Na het installeren van de extensie moet je mogelijk het gedrag aanpassen en personaliseren op basis van je voorkeuren. Om dit te doen, selecteer je het pictogram Extensies, en deze keer verschijnt je extensie in de map Installed, klik op het tandwielpictogram en navigeer naar Extensions Setting.
3. Extensies beheren
Na het installeren en gebruiken van je extensie biedt vscode.dev opties om je extensie te beheren op basis van verschillende behoeften. Bijvoorbeeld, je kunt ervoor kiezen om:
-
Uitschakelen: (Je schakelt een extensie tijdelijk uit wanneer je deze niet meer nodig hebt, maar niet volledig wilt verwijderen)
Selecteer de geïnstalleerde extensie in de uitgebreide activiteitsbalk > klik op het tandwielpictogram > selecteer 'Disable' of 'Disable (Workspace)' OF Open de extensie in het codegebied en klik op de blauwe Disable-knop.
-
Verwijderen: Selecteer de geïnstalleerde extensie in de uitgebreide activiteitsbalk > klik op het tandwielpictogram > selecteer 'Uninstall' OF Open de extensie in het codegebied en klik op de blauwe Uninstall-knop.
Opdracht
Maak een cv-website met vscode.dev
Review & Zelfstudie
Lees meer over VSCode.dev en enkele van de andere functies ervan.
Disclaimer:
Dit document is vertaald met behulp van de AI-vertalingsservice Co-op Translator. Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.