Visual Studio Code met arduino


VS-Code gebruiken voor het maken en uploaden van Arduino-sketches.

Leer hoe je de populaire Visual Studio Code IDE kunt gebruiken om Arduino-projecten te ontwikkelen en jouw sketches rechtstreeks naar Arduino-borden kunt uploaden, zonder Arduino IDE te gebruiken.

Naar een idee van: VISHNU MOHANAN.

Visual Studio Code (VS Code) is een zeer populaire Integrated Development Environment (IDE) voor algemeen gebruik.
Een IDE is een software (of ontwikkelpakket) die een teksteditor, programmeerinterface, debug module en projectbeheer op één plek integreert.
Het open-sourceproject wordt geleid door Microsoft en draait op alle besturingssystemen.
Wat VS Code tot de favoriete keuze van veel ontwikkelaars maakt, is de snelheid, de aanpassingen en de beschikbaarheid van geweldige extensies die de mogelijkheden van de software uitbreiden.
Een van die extensies is de Arduino Extension die door Microsoft zelf is ontwikkeld.
Gebruik parallel GEEN PlatformIO, dat gaat niet goed.

In deze tutorial leren je hoe we VS Code en zijn extensies kunnen gebruiken om Arduino-projecten te ontwikkelen en deze rechtstreeks naar jouw Arduino-boards te uploaden, zonder de Arduino IDE te gebruiken.

Hier een link naar de documentatie van VS Code.

Inhoud:

  1. Waarom VS Code voor Arduino gebruiken?
  2. Het installeren van VS Code
  3. De Werkplaats (workspace)
  4. Installeren van de Arduino Extensie
  5. Openen van een Arduino Sketch
  6. Compileren en Uploaden
  7. Tips en Tricks
  8. Aanbevolen Extensies voor VS Code
  9. Links
  10. Tevreden?

1. Waarom VS Code voor Arduino gebruiken?.

De Arduino IDE v1.8 heeft zeer beperkte mogelijkheden in termen van functies die nodig zijn voor een moderne IDE. Maar dat is een keuze. Arduino's doel is om technologie minder afschrikwekkend te maken voor niet-tech-gerelateerde mensen. Eenvoud en gebruiksgemak staan dus voorop. Arduino ontwikkelt een nieuwere en veel capabelere IDE versie 2, en deze bevindt zich op het moment van schrijven van dit artikel in release modus. Dus terwijl dat het verder in de maak is, kunnen we de modernste VS Code IDE met zijn rijke functies gebruiken om Arduino-projecten te ontwikkelen. Als je geen andere IDE's dan Arduino IDE hebt gebruikt, is dit een goede plek om te leren hoe je moet beginnen en wat je kunt bereiken met VS Code. Enkele van de geweldige functies van VS Code zijn,

  • Gratis en open source: je hoeft niet te betalen voor het downloaden en verkrijgen van updates.
  • Cross-platform: VS Code draait op bijna alle platforms en u krijgt naadloze updates.
  • Extreem snel en lichtgewicht: Hoewel VS Code grotendeels in Javascript en Typescript is geschreven, werkt het snel op uw computer en verbruikt het minder bronnen.
  • Bijna oneindige aanpassing: VS Code gebruikt op tekst gebaseerde JSON-bestanden voor configuratie en bijna elke functie van VS Code kan worden aangepast door de JSON-instellingenbestanden bij te werken.
  • Geweldige extensies: VS Code heeft een marktplaats voor extensies/plug-ins die zijn ontwikkeld door zowel Microsoft als andere ontwikkelaars. Extensies breiden de mogelijkheden van VS Code uit. De onderliggende webtechnologieën die voor VS Code worden gebruikt, maken het eenvoudig om krachtige extensies te ontwikkelen.
  • Mooie thema's en pictogrammen: VS Code is qua uiterlijk in hoge mate aanpasbaar; van lettertypen tot iconen. Thema's en pictogrampakketten kunnen worden gedownload van de extensiemarktplaats.
  • Geïntegreerde consoles/terminals: u hoeft het VS Code-venster niet te verlaten om uw consoletoepassingen zoals Powershell uit te voeren. Terminals zijn een geïntegreerd kenmerk van VS Code en u kunt meerdere terminals tegelijkertijd gebruiken.
  • Geïntegreerd Git-versiebeheer: versiebeheer van uw projecten is eenvoudig met VS Code.
  • Geïntegreerde Github-synchronisatie: U kunt zich aanmelden met uw GitHub-account en uw projecten push/pull vanuit GitHub.
  • Rich Text Editor: De teksteditor wordt geleverd met krachtige bewerkingsfuncties waarmee u items veel sneller kunt typen, kopiëren, plakken, dupliceren, zoeken en vervangen dan met conventionele teksteditors. VS Code kan selectief syntaxisaccentuering gebruiken, afhankelijk van het type bestand dat is geopend.
  • Code-completion: VS Code kan functienamen, variabelen, klassenamen, trefwoorden, enz. voorstellen terwijl u begint te typen. Als u een suggestie kiest die een fragment is, maakt VS Code automatisch de basisconstructie/sjabloon voor dat zoekwoord. Een switch-trefwoord maakt bijvoorbeeld een nieuwe switch-constructie met haakjes en rechter inspringingen.
  • Code IntelliSense: VS Code kan uw projectafhankelijkheden scannen, lokaliseren waar ze zijn en codereferenties vinden van al die bestanden. U kunt de muisaanwijzer op een item plaatsen om de waarde of referentie ervan te zien en + om de referentie te openen.

2. Het installeren van VS Code.

Download eerst VS Code voor het besturingssysteem van jouw voorkeur om aan de slag te gaan. Wij hebben VS Code geïnstalleerd binnen een Windows 10 64-bit Home, VMware.

Download

Voer het installatieprogramma uit en kies een pad op uw systeem. Standaard wordt VS Code geïnstalleerd onder
.
Meer informatie over installeren vindt u hier.
Na installatie start u VS Code vanaf uw bureaublad of het hoofdmenu. U wordt verwelkomd met de aan de slag-pagina. Het scherm dat u ziet, kan verschillen van het onze omdat we het uiterlijk en de functionaliteiten van onze VS-code hebben aangepast.

VS-Code-Arduino-Get-Started.png

De basisindeling is als volgt,

VS-Code-Arduino-Basic-Layout.png

VS Code wordt geleverd met een eenvoudige en intuïtieve lay-out die de beschikbare ruimte voor de editor maximaliseert, terwijl er voldoende ruimte overblijft om te bladeren en toegang te krijgen tot de volledige context van uw map of project. De gebruikersinterface is verdeeld in vijf gebieden:

  • Editor - Het belangrijkste gebied om uw bestanden te bewerken. U kunt verticaal en horizontaal zoveel editors naast elkaar openen als u wilt.
  • Side Bar - Bevat verschillende weergaven zoals de Verkenner om u te helpen terwijl u aan uw project werkt.
  • Status Bar - Informatie over het geopende project en de bestanden die u bewerkt.
  • Activity Bar - Helemaal aan de linkerkant, hiermee kunt u schakelen tussen weergaven en krijgt u extra contextspecifieke indicatoren, zoals het aantal uitgaande wijzigingen wanneer Git is ingeschakeld.
  • Panels - U kunt verschillende panelen onder het editorgebied weergeven voor uitvoer- of foutopsporingsinformatie, fouten en waarschuwingen, of een geïntegreerde terminal. Paneel kan ook naar rechts worden verplaatst voor meer verticale ruimte.
  • Action Buttons - Hiermee kunt u verschillende taken uitvoeren die door de extensies worden geleverd.
Elke keer dat u VS Code start, wordt het geopend in dezelfde staat waarin het zich bevond toen u het voor het laatst sloot. De map, lay-out en geopende bestanden blijven behouden. Open bestanden in elke editor worden weergegeven met kopteksten met tabbladen (tabbladen) bovenaan het editorgebied.

3. De Werkplaats (workspace).

In VS Code verwijst een workspace naar een map waarin uw projectbestanden zijn opgeslagen. Wanneer u een map opent, worden alle bestanden en mappen in die hoofdmap weergegeven in de bestandsverkenner op de zijbalk. U kunt nieuwe bestanden maken en bestanden verwijderen of hernoemen rechtstreeks vanuit de zijbalk. VS Code maakt automatisch een map met de naam om configuratiebestanden en tijdelijke bestanden op te slaan.

In Windows kunt u met de rechtermuisknop op een lege ruimte in een map in de bestandsverkenner klikken om het contextmenu te openen en de optie optie gebruiken om een map als werkruimte te openen. U kunt ook een map openen vanuit het menu Bestand. Standaard wordt de map geopend in het bestaande venster als de VS-code al is geopend. Om de nieuwe werkruimte in een ander venster te openen, houdt u gewoon de knop ingedrukt wanneer u op de contextmenu-optie klikt.

Open-VS-Code-from-Context-Menu.png
Open with Code

4. Installeren van de Arduino Extensie.

De Arduino-extensie is ontwikkeld door Microsoft. U kunt het installeren vanaf de extensiemarktplaats. Start VS Code en zoek in het menu ( + + ) naar "Arduino". Installeer de Arduino-extensie. Start na installatie de IDE opnieuw. De Arduino-extensie wordt gebruikt om te werken met Arduino IDE- of Arduino-CLI- installaties (command-line version) op een systeem. Maar Microsoft heeft onlangs de ondersteuning voor de Arduino IDE laten vallen en dat betekent dat u Arduino-CLI moet installeren om de extensie te laten werken.

Het installeren van de Arduino-CLI is heel eenvoudig en zowel de Arduino IDE- als de CLI-versie kunnen zonder problemen naast elkaar in een systeem bestaan. Download eerst het geschikte Arduino-CLI-installatieprogramma van de officiële pagina. We gebruikten de 64-bits Windows exe. Hiermee download je gewoon een ZIP met het exe-bestand dat je moet verplaatsen naar een andere schijf, zoals de -schijf. Als je in plaats daarvan het MSI-installatieprogramma gebruikt, kun je de installatiemap kiezen.

Eenmaal geïnstalleerd, kunt je naar de installatiemap gaan en de toepassing uitvoeren vanaf de opdrachtregel met het volgende. Het voorvoegsel ".\" is nodig om een uitvoerbaar bestand uit te voeren vanuit de hoofdmap in Powershell.

							.\arduino-cli help core
						
In ons geval hebben we de Windows Terminal-toepassing geïnstalleerd en daarom kunnen we de terminal vanuit elke map starten met behulp van het contextmenu van de bestandsverkenner. Om de arduino-cli overal op uw systeem uit te voeren, voegt u eenvoudig de installatiemap toe aan de omgevingsvariabele.

Arduino-CLI-Help-Command-in-Windows-Terminal-Powershell.png
De opdracht uitvoeren.

De Arduino-CLI bestaat uit een enkel uitvoerbaar bestand. U kunt zich dus afvragen waar de configuratiebestanden, platforms en bibliotheken zijn. Standaard gebruikt Arduino-CLI drie mappen voor zijn functionaliteiten:
  1. - voor het opslaan van alle configuraties en platformbestanden.
  2. - voor het downloaden van installatiepakketten, libraries, enz.
  3. - waar libraries en sketches worden opgeslagen.
Je kunt de locaties van de drie mappen bepalen door de opdracht configuratiedump uit te voeren (Configuration dump command).

							PS C:\Users\YourUserName> arduino-cli config dump
							board_manager:
  								additional_urls: []
							daemon:
  								port: "50051"
							directories:
  								data: C:\Users\YourUsername\AppData\Local\Arduino15
  								downloads: C:\Users\YourUsername\AppData\Local\Arduino15\staging
  								user: D:\Code\Arduino
							library:
  								enable_unsafe_install: true
							logging:
  								file: ""
  								format: text
  								level: info
							metrics:
  								addr: :9090
  								enabled: true
							output:
  								no_color: false
							sketch:
  								always_export_binaries: false
							updater:
  								enable_notification: true
							
						
De map is dezelfde als de Arduino IDE-map waar al uw platform en configuraties worden opgeslagen. Je kunt het dus houden zoals het is. De map kan ook hetzelfde worden gehouden. Maar de directory moet mogelijk worden gewijzigd als u uw reeds geïnstalleerde bibliotheken en gemaakte sketches wilt gebruiken. Om dat te doen, moet u een configuratiebestand maken dat specifiek is voor de Arduino-CLI. Dit kan door het volgende commando.
							.\arduino-cli config init
						
Hiermee wordt eenvoudig een nieuw YAML bestand in de gegevensdirectory gemaakt. Dit bestand heeft dezelfde inhoud als wanneer u de opdracht uitvoert. U kunt het bestand openen in een teksteditor en de gebruikersdirectory wijzigen in uw reeds bestaande schetsboekmap en opslaan. In ons geval is dit op D:\Code\Arduino. Om te testen of de configuratie werkt, probeert u gewoon de geïnstalleerde bibliotheken weer te geven met behulp van de volgende opdracht.
							.\arduino-cli lib list
						
Arduino-CLI-Library-List-Command.png
List the installed libraries.

De volgende stap is om de VS Code Arduino Extension te vertellen waar de Arduino-CLI zich bevindt. Dit kan worden gedaan door naar de instellingen van de Arduino-extensie te gaan en het installatiepad toe te voegen als de waarde voor optie. Herlaad daarna VS Code en u bent klaar om VS Code te gebruiken voor het compileren en uploaden van uw Arduino-projecten. Install-VS-Code-Arduino-Extension.png
Install Arduino extension.

De belangrijkste kenmerken van de Arduino-extensie van VS Code zijn:
  • IntelliSense en syntaxisaccentuering voor Arduino-sketches.
  • Verifiëeer en upload uw schetsen in Visual Studio Code.
  • Ingebouwde board- en bibliotheekmanager.
  • Ingebouwde voorbeeldlijst.
  • Ingebouwde seriële monitor.
  • "Snippets" voor sketches.
  • Automatische Arduino projectomgeving.
  • Command Palette integratie van veelgebruikte commando´s (bijv. Verifiëren, Uploaden...).
  • Geïntegreerde Arduino-foutopsporing voor ondersteunde boards.

waarschuwing.png

Het installeren van de Arduino-extensie samen met andere extensies zoals PlatformIO kan conflicten veroorzaken, aangezien deze extensies tegelijkertijd proberen de controle over de workspace en bestanden over te nemen. Daarom is het een goed idee om PlatformIO of andere conflicterende extensies op uw Arduino-werkruimte uit te schakelen. U kunt dit doen door op het kleine tandwielpictogram op de extensie te klikken en de optie Disable (Wokspace) te kiezen. U moet ook de Arduino-extensie uitschakelen wanneer u met PlatformIO-projecten werkt.

5. Openen van een Arduino Sketch.

Om de Arduino-extensie te gaan gebruiken, moet u eerst een map openen die een bestand bevat.
De Arduino-extensie wordt geactiveerd op een workspace met minimaal éEeacute;n bestand. We zullen een map met de naam blink maken in onze map en deze openen met VS Code.

VS-Code-Arduino-Blink-Folder.png
Blink sketch folder.

Wanneer je de sketch voor het eerst opent, zou de Arduino-extensie de workspace voor Arduino-projecten niet hebben geconfigureerd. Om de werkruimte te configureren, begint u met het selecteren van het bord dat u probeert te gebruiken. Zoek de knop aan de rechterkant van de statusbalk en klik erop. Aan de rechterkant wordt een nieuw tabblad geopend, waar u naar het bord kunt zoeken. Hier gebruiken we de Arduino Nano 33 IoT voor het uitvoeren van onze voorbeelden.

VS-Code-Arduino-Select-Board.png
Selecteer je bordje.

Je kunt de rode kronkelige onderstrepingen op de code zien. De kronkels worden toegevoegd door de Arduino IntelliSense en geven fouten aan. je kunt zien wat de fout is door met de muis over de tekst te gaan. Aangezien we geen syntactische of logische fouten hebben in de code die we zojuist hebben gemaakt, zullen deze kronkels verdwijnen zodra de IntelliSense correct is geconfigureerd.

Vervolgens moeten we de seriële poort kiezen waarop het bord is aangesloten. U kunt op de knop op de statusbalk klikken om een poort te selecteren uit een lijst met beschikbare poorten.

VS-Code-Arduino-Select-Serial-Port.png
Selecteer je seriële poort.

Aangezien we geen externe programmer gebruiken, hoeven we geen programmer op te zetten. Je moet ook opmerken dat de statusbalk een item heeft met de naam . Dit geeft aan dat de huidige workspace een Windows 32-bits C/C++-project verwacht van de inhoud van het bestand dat we hebben geopend. Maar we hebben eigenlijk een andere configuratie nodig voor het samenstellen van Arduino-sketches.
Gelukkig kan de Arduino-extensie dit voor ons creëren. Open gewoon het met de sneltoets + + en typ "rebuild intellisense-configuratie". Zodra je het begint te typen, haalt VS Code een lijst met vergelijkbare opdrachten op, waaruit je de kunt selecteren of druk op + + . Als dat om de een of andere reden niet werkt, gebruik dan + + ) om te beginnen met het samenstellen van de sketch. Dit genereert een nieuwe Arduino-configuratie in het bestand . Laad vervolgens VS Code opnieuw.

exclamation.png

Het bouwen van de Intellisense-configuratie kan mislukken als het code compilatie proces mislukt als er fouten in uw code voorkomen. Dat betekent dat uw code foutloos moet zijn om voor de eerste keer een intellisense-configuratie te genereren.

Dit opent een nieuw paneel en begint met het afdrukken van veel tekstberichten. Wat er gebeurt, de Arduino-extensie probeert de afhankelijkheden van de Arduino-pakketten te vinden en deze te gebruiken om de IntelliSense-gegevens te bouwen. De afhankelijkheden kunnen headerbestanden, bibliotheken, bronbestanden of andere configuratiegegevens omvatten. Zodra de analyse is voltooid, maakt de Arduino-extensie een nieuwe configuratie met de naam en slaat deze op in de map . Het vorige item op de statusbalk verandert nu in . Als het niet is gewijzigd, kunt u de VS-code opnieuw starten om de wijzigingen door te voeren. De foutkronkels zullen nu ook verdwijnen.

VS-Code-Arduino-Code-Analysis-Complete.png
IntelliSense building complete.

Laten we een paar dingen uitleggen die je op verschillende plaatsen in het venster kunt zien.

  1. In het bestandsverkennermenu van de zijbalk kunt u de configuratiebestanden (JSON-bestanden) zien die zijn gemaakt door VS Code en die zich in de map bevinden. Ze worden automatisch gegenereerd en bijgewerkt door VS Code wanneer u de instellingen vanaf een andere plaats bijwerkt. Alle wijzigingen die u in deze bestanden aanbrengt, worden de volgende keer dat u de schets compileert, overschreven door VS Code.
  2. Onderaan de zijbalk staat een lijst met items die kunnen worden uitgevouwen. Dit zijn C/C++ codeverkennervensters. Onder hen zijn de . Deze lijst wordt geleverd door de Arduino-extensie en je kunt vanaf daar alle Arduino-voorbeelden openen.
    VS-Code-Arduino-Example-Sketches-List.png
    Arduino example sketches.

  3. geeft de regel en kolom van de cursorlocatie aan.
  4. geeft het aantal spaties aan dat wordt gebruikt voor automatisch inspringen.
  5. geeft aan dat het einde van de regelreeks een Linefeed-teken is.
  6. geeft de taalmodus aan. (C++)
  7. geeft het huidige bestand aan dat actief is voor compilatie. En ja, je kunt meerdere Arduino-sketches in verschillende mappen openen en je kunt kiezen welke je wilt compileren. Dit maakt het gemakkelijk om meerdere Arduino-sketches tegelijk te beheren, bijvoorbeeld wanneer je met een Arduino-bibliotheek werkt.
  8. Klikken op , zorgt ervoor dat VS Code opnieuw wordt geladen. Hiervoor moet je de Reload-extension installeren.
  9. In het gedeelte met actieknoppen zijn er twee knoppen die heten ( + ) en ( + + ). Deze knoppen worden geplaatst door de Arduino-extensie en je kunt ze gebruiken om je schetsen te compileren en te uploaden naar het geselecteerde bord.

6. Compileren en Uploaden.

Met zoveel uitleg kunnen we nu doorgaan met het compileren en uploaden van de blink sketch. Klik op de knop naar om de sketch te compileren en naar uw bord te uploaden. Het venster wordt automatisch geopend en drukt alle berichten af die tijdens het proces zijn gegenereerd.

Laten we nu een kleine Serial Call-Response sketch schrijven om de seriële monitorfunctie van VS Code te testen. We moeten de seriële poort initialiseren met de functie begin(). En kijk eens hoe VS Code de functies voorstelt zodra we Serial typen... Dit is mogelijk omdat IntelliSense weet waar deze functies zich bevinden en ze automatisch ophaalt terwijl we beginnen te typen.

VS-Code-Arduino-Function-Suggestion.png
Suggestions from IntelliSense.

Upload de volgende code en open de seriële monitor door op het stekkerpictogram in de statusbalk te drukken.

							void setup() {
  	Serial.begin(115200);
  	while(!Serial);
}
void loop() {
	if (Serial.available()) {
		String inputString = Serial.readString();
		Serial.println(inputString);
	}
}

Dat ziet er in VS Code dan als volgt uit:

SerialCode.jpg

How-to-Use-VS-Code-to-Write-and-Upload-Arduino-Sketches-Open-Serial-Monitor.png
Send any message and it will be echoed back.

De VS Code Arduino-extensie heeft nu een functionele seriële monitor die je kunt openen vanuit het paneelgedeelte. Klik gewoon op het tabblad om het te openen. Geef vervolgens het verbindingstype, de poort en de baudrate op om de communicatie te starten. U kunt elk bericht verzenden door het in het invoervak onderaan te typen en op te drukken. Elk bericht dat u verzendt, wordt teruggestuurd door het Arduino-bord. Je kunt hetzelfde ook proberen met de Arduino seriële monitor.

Arduino-Serial-Monitor.png
The simple and functional Arduino Serial Monitor.

7. Tips en Tricks.

Hieronder vindt u een lijst met tips en trucs die we kennen. U kunt ons helpen deze lijst uit te breiden als u meer trucs kent om tijd te besparen en de productiviteit te verhogen.

  • Plaats de muisaanwijzer op een item om de verklaring ervan te zien en druk op de toets terwijl u zweeft om het deel van de definitie van het item te zien.

    VS-Code-Arduino-Intellisense-Reference.png

  • + op een item opent zijn referentie. Als er meerdere referenties zijn, krijgt je er een interactieve lijst van.
  • Gebruiker Arduino IDE's functie om altijd VS Code als editor te gebruiken. Hiermee worden wijzigingen in de VC-code gesynchroniseerd met de Arduino IDE.
  • Gebruik de toetsencombinaties + / om de actieve regels omhoog of omlaag te verplaatsen.
  • Gebruik + om een cursor ergens in het bestand te plaatsen en op meerdere locaties tegelijk te typen.
  • Gebruik + / pijltoetsen om de cursor door woorden dan letters te verplaatsen. Gebruik de toets in combinatie hiermee om de regel te selecteren in plaats van alleen de cursor te verplaatsen.
  • Gebruik + om complete blokken tekst te verwijderen.
  • Gebruik + om de actieve regel naar het meest linkse niet-witruimteteken te verplaatsen. Dit helpt om de huidige regel gemakkelijk te herschrijven.
  • Gebruik + om de gehele actieve regel te selecteren.
  • Gebruik + + om een regel te wissen.
  • Gebruik + + / toetsen om de huidige regel te dupliceren.
  • Als u een hele regel wilt kopiëren, hoeft u deze niet te selecteren. Druk in plaats daarvan gewoon op + wanneer de cursor ergens op de regel staat.
  • Op dezelfde manier om een regel te verwijderen, drukt u gewoon op + . Dit kan ook worden gebruikt om snel een regel te verwijderen.
  • Druk op het scrollwiel van uw muis en sleep uw code om de code te selecteren. Dit kan ook meerdere cursors tegelijk plaatsen.
  • Gebruik om naar rechts in te springen en + om naar links in te springen.
  • Gebruik + + om naar het overeenkomende haakje te springen.
Een volledige lijst met standaardsnelkoppelingen vindt u hier in deze pdf.

8. Aanbevolen Extensies voor VS Code.

  1. Git History
  2. GitLens
  3. Insert Date String
  4. hexdump for VS Code
  5. Reload Extension

9. Links.

  1. Download VS Code
  2. VS Code Arduino Extension - Marketplace
  3. Arduino Extension - Github
  4. VS Code Shortcuts - PDF

10. Tevreden

En was ik tevreden met het resultaat?
Nee. Uiteindelijk ben ik toch weer naar PlatformIO overgestapt.
Waarom? De ondersteuning van PlatformIO wordt beter en beter en het aantal ondersteunde borjes wordt groter en groter.

Back to top