ESP-IDF in Visual Studio Code einrichten – vollständige VS Code Anleitung

Inhaltsverzeichnis

Installation VS Code
Installation der Extension Packs
ESP-IDF Setup
Neues Projekt erstellen
Neues Projekt bauen und flashen

Installation von VS Code

Im folgenden Abschnitt, integrieren wir unsere bestehnde ESP-IDF in VS Code (Visual Studio Code). Falls ihr VS Code noch nicht auf dem Rechner habt, dann könnt ihr den Code Editor auf der offiziellen VS Code Seite herunterladen, installieren und starten. Wenn das geklappt hat, dann sollte ihr folgendes Fenster sehen.

Abb. 1 – Leeres VS Code Fenster

Installation der Extension Packs in VS Code

Klickt links auf das unterste Symbol für die Erweiterung in der Aktivitätsleiste (Activity Bar).

Abb. 2 – Erweiterungsansicht

Hier werden schon einige Vorschläge bzw. Empfehlungen angezeigt, die ihr installieren könnt. Das meiste davon ist für uns uninteressant.

Gebt in der Suchleiste oben in der Erweiterungsansicht ESP-IDF ein. ESP reicht schon, damit die passenden Eintäge erscheinen.

Abb. 3 – ESP-IDF Erweiterung

Klickt auf ESP-IDF und auf install bzw. installieren. Wenn das erfolgreich war, erscheint links in der Aktivitätsleitste unter dem Erweiterungssymbol ein weiteres Symbol, nämlich das ESP-IDF Symbol.

Abb. 4 – ESP-IDF Symbol

Dann entfernt ihr nochmal den Suchtext aus der Suchleiste und es erscheinen wieder Vorschläge für Installationen. Falls das C/C++ Extension Pack nicht mit installiert wurde, dann installiert das Extension Pack. In machen Versionen der ESP-IDF Extension wurde dieses Pack mit installiert, bei der aktuellen Version scheint das nicht mehr der Fall zu sein. Wir benötigen es aber.

Abb. 5 – C/C++ Extension Pack

Mit dem C/C++ Extension Pack werden noch weitere Abhängigkeiten mit installiert, die wir ebenfalls benötigen. Das könnt ihr nach der Installation. Wenn ihr das erledigt habt, soll der Bereich unter installed etwa wie folgt aussehen.

Abb. 6 – Installierte Extension Packs

ESP-IDF Setup

jetzt klickt ihr einmal auf das ESP-IDF Symbol links in der Aktivitätsleiste und es erscheine eine Liste mit Commands.

Abb. 7 – Commands

Ganz unten Advanced ausklappen, auf „Configure ESP-IDF Extension“ klicken und ein paar Sekunden warten.

Abb. 8

Dann erscheint folgendes Fenster mit den Setup Optionen.

Abb. 9 – Setup Optionen

Wählt an dieser Stelle Express. mit Use Existing Setup gibt es immer wieder Probleme, da nicht alle Abhängigkeiten richtig mit installiert werden. Unter Express können wir dann wieder auswählen, dass wir eine bereits existierende ESP-IDF Version auf dem Rechner haben.

Abb. 10 – Express Installation

Unter „Select ESP-IDF Version“ ist schon „Find ESP-IDF in your System“ ausgewählt und weiter unten schon die richtigen Pfad zu ESP-IDF und zu den ESP-IDF Tools. Bitte prüft ob das bei euch auch so passt, indem ihr rechts auf die Ordner-Symbole klickt und kontolliert ob die Pfade stimmen. Wenn ihr – wie oben beschrieben – die ESP-IDF unter C:\ installiert habt, dann sollten die Pfade so stimmen, ansonsten passt ihr diese einfach an.

Bei einer korrekten Vorinstallation der ESP-IDF über die Kommandozeile, dürfte es an dieser Stelle keine Probleme mehr geben.

Abb. 11 – Vorhandene Installation verwenden

Abb. 12 – Pfad zu Tools

Abb. 13 – Pfad zu ESP-IDF

Jetzt können wir auf „install“ klicken und somit die Extension installieren.

Abb. 14 – Erforderliche Eingaben für die Konfiguration

Die Installation beginnt und alle erforderlichen Elemente werden installiert.

Abb. 15 – Konfiguration der ESP-IDF

Wenn alles korrekt installiert wurde, erscheint folgendes Fenster.

Abb. 16 – Konfiguration erfolgreich

Neues Projekt in VS Code erstellen

Um ein neues Projekt zu starten, klickt auf „New Project“.

Abb. 17 – New Project

In dem folgenden Fenster könnt ihr

den Projektnamen ändern,
den Zielordner für das Projekt wählen,
das Zielsystem wählen,
das Borad mit dem ihr arbeitet und
die Schnittstelle an der das Borad angeschlossen ist,
sowie eine Bibliothek für weitere Komponenten.

Abb. 18 – Neues Projekt Fenster

Ich gebe an dieser Stelle folgendes ein. Mein Projekt nennne ich einfach „ErstesProjekt“. Der Zielordner ist, wie anfangs bei der Installation des ESP-IDF in der Kommandozeile, der Ordner „esp_projekte“ unter C:\. Ihr könnt einen beliebigen Ordner wählen, soweit keine Leerzeichen vorhanden sind. Ich arbeite gerne unter C:\.

Zielplattform ist aktuell der ESP32 und als ESP-IDF Board wählen wir „Custom Board“, da unser Board dort nicht explizit aufgeführt ist. Alles weitere können wir so lassen.

Abb. 19 – Eingaben Neues Projekt

Dann auch „Choose Template“ klicken

Abb. 20 – Choose Template

Hier erscheint die Seite auf der ihr die Templates bzw. Vorlagen wählen könnt, auf denen euer Projekt basieren soll. Aktuell gibt es leider nicht mehr die Auswahl „Sample Project“, welches eine leere Startseite erstellt. Aber das ist uns egal, wir wählen einfach blink aus. Das Projekt, welches wir auch am Anfang bei der Installation des ESP-IDF in der Kommandozeile gewählt hatten.

Dann löschen wir dort wieder den gesamten Code und fügen unser Codebeispiel 2 aus „Erstes Programmbeispiel, die blinkende LED“ ein.

Wählt oben „ESP-IDF“ aus und dann als Template „blink“ ganz oben aus get-started.

Abb. 21

Abb. 22 – Neues Projekt erstellen auf Basis von Templates

In dem folgenden Fenster bestätigt ihr das indem ihr auf blauen Button rechts oben klickt. Unten rechts werden ihr gefragt, ob ihr das Projekt in einem neuen Fenster öffnen möchtet. Klickt auf „OK“ und es erscheint ein neues Fenster über dem aktuellen Fenster.

Abb. 23

Das obere Fenster, könnt ihr dann schließen. Das aktuelle Fenster ist jetzt unten zu sehen. Rechts in dem Fenster sind auch unsere Projektdateien aufgelistet.

Abb. 24 – Projektfenster mit Projektdateien.

Der für uns interessante Ordner ist der main-Ordner, den wir jetzt öffnen. In diesem Ordner ist unter anderem die „blink_example_main.c“ Datei. Dort klicken wir jetzt drauf und sehen sofort das Beispielprojekt. Achtet vorerst auf keine Meldungen die erscheinen und bestätigt diese nicht mit ok. Da kommen wir noch später zu.

Abb. 25 – blink_example_main.c

Markiert an dieser Stelle den gesamten Code mit strg+A und löscht ihn. Dann fügt ihr das Codebeispiel 2 aus „Erstes Programmbeispiel, die blinkende LED“ in die gleich Datei ein. Kopiert den Code per „Copy to Clipboard“, da der Code sonst nicht schön formatiert in VS Code eingefügt wird.

Abb. 26 – Unser Codebeispiel 2

Jetzt haben wir ein kleines einfaches Beispiel zum bauen und flashen.

Neues Projekt Bauen und Flashen

VS Code kann über die Kommandozeile bedient werden, oder über die Symbole unten links in der kleinen Statusleiste. Bei einigen Versionen konnte nicht direkt mit der Kommandozeile gearbeitet werden, da die aktuell sichtbare Kommandozeile nicht das ESP-IDF Terminal ist sondern die CMD. Da ist also noch kein Python integriert. Wenn ihr allerdings unten in Statusleiste auf das Symbol ESP-IDF Terminal klickt, öffnet sich das ESP-IDF Terminal und ihr könnt „idf.py“ anwenden. Wenn das ESP-IDF Terminal erfolgreich geöffnet werden konnte, dann seht ihr rechts den Eintrag ESP-IDF Terminal, wie in Abb. 27. In diesem Fenster wird immer angezeigt, was aktuell in VS Code passiert.

Hinweis: Es gibt aktuell zwei Python Installationen, einmal die von der ESP-IDF CMD, und die eigene von der ESP-IDF Extension in VS Code. Beim Klicken auf das ESP-IDF Terminal Symbol in VS Code, wird aber Python aus der ESP-IDF CMD geöffnet und nicht die aus VS Code. D.h. es kommt eine Meldung im Terminal, dass VS Code eine andere Python Installation erwartet. Das können wir erst einmal ignorieren, da es auch so funktioniert. Später können wir das noch anpassen, so dass die Meldung nicht mehr erscheint. Versucht nicht das in den settings.json zu ändern, das hat keinen Einfluss, da Python aus der export.bat gestartet wird.

Abb. 27

Abb. 28 – ESP-IDF Terminl Symbol

Wir arbeiten aber vorerst nur mit den Symbolen zum Bereinigen, Bauen und Flashen. Dafür klickt ihr einfach auf das kleine

Mülleimer Symbol zur Bereinigung, was immer erforderlich ist bei neu angelegen Projekten,
und dann auf den kleinen Schraubenschlüssel rechts daneben zum Bauen des Projektes,
und wenn das erfolgreich beendet wurde, auf den kleinen Blitz zum Flashen.

Der Status der Bereinigung, des Bauens und des Flashens wird immer rechts angezeigt. Achtet unten links in der Statusleiste darauf, dass das richtige Ziel ausgewählt ist, also der ESP32 und die richtige Com-Schnittstelle an die euer Board angeschlossen ist. In meinem Fall ist es COM5.

Abb. 29 – Fullclean