Qt und QML bieten ein leistungsstarkes Framework zur Entwicklung moderner, plattformübergreifender Anwendungen mit einer eleganten und reaktionsschnellen Benutzeroberfläche. Während Qt Creator die Standard-IDE für die
Qt-Entwicklung ist, bevorzugen viele Entwickler Visual Studio Code (VS Code) aufgrund seiner Leichtigkeit, Flexibilität und des umfangreichen Erweiterungs-Ökosystems.
Die Einrichtung von Qt und Qt Quick in VS Code erfordert jedoch etwas zusätzliche Konfiguration im Vergleich zur Nutzung von Qt Creator. Von der Installation der erforderlichen Tools und Erweiterungen bis hin zur Konfiguration von CMake, IntelliSense sowie Build- und Debug-Einstellungen gibt es einige wichtige Schritte, um eine reibungslose Entwicklungsumgebung zu gewährleisten.
In diesem Leitfaden führen wir Sie durch den Prozess der Integration von Qt und QML mit VS Code und behandeln dabei folgende Themen:
- Installation von WSL
- Installation von Qt und Abhängigkeiten innerhalb von WSL
- Einrichtung von Visual Studio Code und nützlichen Erweiterungen
- Erstellen und Kompilieren eines Beispielprojekts
Egal, ob Sie ein erfahrener Qt-Entwickler sind, der eine Alternative zu Qt Creator sucht, oder ein Neuling, der Qt mit VS Code erkunden möchte – dieses Tutorial bietet Ihnen alles, was Sie für einen effizienten Einstieg benötigen.
WSL – Was ist das, und warum WSL verwenden?
WSL (Windows Subsystem for Linux) ist eine Kompatibilitätsschicht, die es ermöglicht, eine Linux-Distribution nativ unter Windows auszuführen – ohne virtuelle Maschine oder Dual-Boot-Konfiguration. Sie stellt eine Linux-kompatible Umgebung bereit, in der Sie Linux-Befehle ausführen, Skripte starten und vollständige Linux-Distributionen wie Ubuntu, Debian oder Arch direkt aus dem Microsoft Store installieren können.
Es gibt zwei Versionen von WSL:
- WSL 1 – Verwendet eine Kompatibilitätsschicht zur Übersetzung von Linux-Systemaufrufen in Windows-Systemaufrufe.
- WSL 2 – Nutzt eine schlanke virtuelle Maschine (VM), um vollständigen Linux-Kernel-Support zu bieten – für bessere Leistung und Kompatibilität.
Bei der Verwendung von Qt, C++ und Docker kann WSL nützlich sein, um Linux-basierte Entwicklungstools direkt unter Windows auszuführen. Es erlaubt auch das Erstellen und Testen von Software in einer Linux-Umgebung, ohne Windows zu verlassen.
Visual Studio Code für die Qt- und QML-Entwicklung einrichten
WSL installieren
WSL kann über den Microsoft Store installiert werden. Öffnen Sie zuerst die Microsoft Store-App auf Ihrem Windows-System und suchen Sie im Store nach WSL. Dort finden Sie verschiedene Distributionen von WSL, wie z. B.:
- Ubuntu
- openSUSE
- Kali Linux
- Debian
- Arch
Und viele weitere – je nach Vorliebe.
In diesem Tutorial machen wir mit Ubuntu weiter, da es am beliebtesten ist und häufig in der Softwareentwicklung verwendet wird. Wie Sie sehen, belegen die ersten drei Plätze bei der Suche nach WSL im Microsoft Store Ubuntu-Distributionen. Ich habe bereits Ubuntu 22.04 eingerichtet, aber wir beginnen hier von Grund auf und verwenden Ubuntu 24.04.

Öffnen Sie die Ubuntu 24.04-Seite und klicken Sie auf „Herunterladen“ – Windows wird es automatisch auf Ihrem System installieren.

Sobald die Installation abgeschlossen ist, öffnen Sie Ubuntu und richten Sie Ihren Benutzernamen und Ihr Passwort für sudo ein.

Nach der Einrichtung sind wir bereit und können mit dem Aufbau unserer Qt Quick-Anwendungsentwicklung beginnen.
Qt-Installation in WSL
Es gibt mehrere Möglichkeiten, Qt unter WSL zu installieren. Sie können es aus dem Quellcode kompilieren, wenn Sie etwas Zeit haben, oder Binärdateien von der offiziellen Qt-Seite herunterladen.
Um den neuesten Installer zu erhalten, gehen Sie zu
https://www.qt.io/download-qt-installer-oss und wählen Sie die Variante „Linux x64“.

Sie können den Installer manuell auf Ihrem Windows-Host herunterladen und anschließend in das WSL-Verzeichnis kopieren oder ihn direkt über das Terminal mit `wget` herunterladen. Ich entscheide mich für die zweite Variante, da ich kein Fan des manuellen Kopierens von Dateien zwischen WSL und Windows bin.
Um den Download-Link zu erhalten, klicken Sie mit der rechten Maustaste auf den Button „Qt Online Installer für Linux (x64)“ und wählen „Linkadresse kopieren“. Der direkte Link zum Paket ist nun in Ihrer Zwischenablage. Wechseln Sie in Ihr WSL-Terminal und führen Sie den folgenden Befehl aus:
wget KOPIERTER_LINK
Fügen Sie Ihren Link anstelle von KOPIERTER_LINK ein und drücken Sie Enter. Der Qt-Installer wird nun in das aktuelle Verzeichnis heruntergeladen – standardmäßig /home/%BENUTZERNAME%, auch als ~ bezeichnet.

Um den Installer auszuführen, müssen wir ihm Ausführungsrechte geben. Dafür verwenden wir den Befehl `chmod +x` auf die Installationsdatei. In meinem Fall sieht das so aus:
sudo chmod +x ./qt-online-installer-linux-x64-4.8.1.run
Mit der neuesten Version 4.8 des Installers können wir Aliase verwenden, um vorgefertigte Qt-Paketsets herunterzuladen. Dieses Paket enthält folgende Abhängigkeiten:
essential module libraries
essential module headers
essential module private headers
essential module runtime tools
essential module development tools
Qt Creator wird trotzdem installiert, aber Sie können ihn nach der Installation manuell entfernen.
Die neueste Qt-Version ist 6.8.2, also werde ich diese Version installieren. Standardmäßig wird Qt in dem Verzeichnis installiert, aus dem das Skript ausgeführt wird – in unserem Fall also „home“. Persönlich installiere ich Qt lieber unter /opt, daher werde ich unserer Installationsanweisung ein weiteres Argument hinzufügen, um den Installationspfad zu ändern. Beachten Sie, dass für die Installation in /opt die Ausführung mit sudo erforderlich ist. Das ist nicht notwendig, wenn Sie Qt im Home-Verzeichnis installieren.
sudo ./qt-online-installer-linux-x64-4.8.1.run --root /opt/Qt install qt6.8.2-essentials-dev
Wenn Sie mehr über verfügbare Optionen erfahren möchten, besuchen Sie die Qt-Dokumentation unter
https://doc.qt.io/qt-6/get-and-install-qt-cli.html
Während der Installation kann es zu einem Fehler kommen, der besagt, dass dem Installer libxkcommon-Abhängigkeiten fehlen.
./qt-online-installer-linux-x64-4.8.1.run: error while loading shared libraries: libxkbcommon-x11.so.0: cannot open shared object file: No such file or directory
Um die fehlenden Abhängigkeiten zu installieren, führen Sie einfach folgenden Befehl aus:
sudo apt install libxcb*-dev
Sobald alle Abhängigkeiten installiert sind, können wir den Installer starten. Der Installer ist interaktiv – sobald er ausgeführt wird, leitet er Sie durch den gesamten Prozess. Sie müssen sich mit Ihrem Qt-Konto anmelden und die Lizenzbedingungen akzeptieren.
Zu Beginn müssen Sie sich mit Ihrem Qt-Konto anmelden. Nach dem Login startet die Installation und fordert Sie auf, die Lizenzbedingungen zu akzeptieren.

Wenn Sie sich nicht sicher sind, welche Lizenz Sie für Ihr Projekt verwenden sollten, haben wir dazu einen separaten Artikel und bieten sogar Schulungen an. Weitere Informationen finden Sie in unserem Artikel zur
Qt-Lizenz.
Am Ende der Installation sehen Sie folgende Meldung.

Abhängigkeiten installieren
Wir haben jetzt Qt mit Qt Quick auf unserem System installiert, aber um mit der Entwicklung zu beginnen, müssen wir noch zusätzliche Abhängigkeiten installieren. Diese sind auf der offiziellen Qt-Webseite aufgelistet:
https://doc.qt.io/qt-6/linux.html
Wir müssen „build-essential“ und „libgl1-mesa-dev“ installieren. Führen Sie dazu folgende Befehle im Terminal aus:
sudo apt update
sudo apt install build-essential libgl1-mesa-dev cmake ninja-build
Wenn Sie versuchen, Visual Studio Code in einem beliebigen Verzeichnis zu starten, wird es automatisch innerhalb von WSL installiert, eine WSL-Verbindung eingerichtet und auf Ihrem Windows-Host geöffnet. Führen Sie dazu den folgenden Befehl in einem Verzeichnis aus:
code
Dadurch wird der Visual Studio Code Server innerhalb von WSL installiert.
VS Code Erweiterungen
Bevor Sie mit der Entwicklung beginnen, empfehle ich die Installation einiger Erweiterungen in Visual Studio Code.
CMake Tools
Diese Erweiterung hilft Entwicklern, CMake-basierte Projekte direkt in VS Code zu konfigurieren, zu kompilieren und zu verwalten. Da wir CMake zum Erstellen von Qt- und C++-Anwendungen verwenden, vereinfacht diese Erweiterung den Workflow erheblich.
Mit dieser Erweiterung erhalten wir:
- Automatische CMake-Erkennung
- Verwaltung von Build-Konfigurationen
- Unterstützung für CMake Presets
- Integriertes Build-System
- Kit-Auswahl

Diese Erweiterung fügt auch eine praktische untere Leiste hinzu, mit der wir die App schnell konfigurieren, erstellen und starten können.

C/C++ Erweiterung
Diese Erweiterung bietet essenzielle Funktionen für die
C- und C++-Entwicklung. Sie bietet unter anderem:
- IntelliSense
- Autovervollständigung
- Debug-Tab
- Code-Navigation
- Code-Formatierung
- Syntaxhervorhebung
- Fehler- und Warnungserkennung

Qt Extension Pack
Dies ist eine Sammlung von Erweiterungen, die das Entwicklungserlebnis für Qt-Anwendungen in VS Code verbessern. Besonders bei der Arbeit mit Qt Quick-Anwendungen ist sie sehr nützlich.
Dieses Paket installiert folgende Erweiterungen gleichzeitig:
- Qt Core
- QSS Syntaxhervorhebung
- QDoc Syntaxhervorhebung
- QRC Syntaxhervorhebung
- Qt C++
- Qt-Projekte mit CMake erstellen
- C++-Typen von Qt debuggen
- Qt Qml
- QML Syntaxhervorhebung und Autovervollständigung
- QML-Linting
- Qt UI

Alle oben genannten Module bieten zudem Unterstützung für die Qt-Dokumentation.
Eine einfache QML-App schreiben
An diesem Punkt haben wir eine Entwicklungsumgebung für die Qt Quick-App-Entwicklung vorbereitet. Erstellen wir nun eine einfache QML-Anwendung.
Ich habe ein Verzeichnis für mein Projekt im Home-Verzeichnis über die Kommandozeile erstellt.
mkdir ~/QtInWSL
cd QtInWSL
Um das Projekt in Visual Studio Code zu öffnen, führen Sie einfach den Befehl `code` mit Verweis auf das Projektverzeichnis aus.
code .
Projekt-spezifische VSC-Einrichtung
Wir müssen außerdem ein Verzeichnis mit dem Namen „.vscode“ im Projektverzeichnis erstellen. In diesem Ordner speichert VS Code die projektspezifischen Konfigurationen.
Damit wir die App ausführen können, müssen wir CMake mitteilen, wo sich die Qt-Binärdateien befinden. Erstellen wir also eine Datei namens `settings.json` im Verzeichnis .vscode und geben den CMAKE_PREFIX_PATH an.
{
"cmake.configureSettings": {
"CMAKE_PREFIX_PATH": "/opt/Qt/6.8.2/gcc_64",
},
}
Wir müssen auch ein Kit auswählen, das für den Build der Anwendung verwendet wird.
Drücken Sie STRG + UMSCHALT + P in Visual Studio Code, um die Befehlspalette zu öffnen, und suchen Sie nach „CMake: Select a kit“. Wenn das Qt-Kit nicht in der Liste erscheint, suchen Sie nach Kits und wählen Sie den Pfad Ihrer Qt-Installation manuell aus.
Wie bereits erwähnt, verwenden wir Qt 6.8.2, also wählen wir dieses Kit aus der Liste.

Projektdateien
Das grundlegende Projekt besteht aus der Datei CMakeLists.txt, einer main.cpp-Datei und einer QML-Datei, die als Einstiegspunkt für die Benutzeroberfläche dient (z. B. Main.qml).
Sobald die Dateien erstellt sind, können wir sie mit Inhalt füllen.
Unten finden Sie den Code, den ich für diesen Blogbeitrag verwendet habe.
CMakeLists.txt
cmake_minimum_required(VERSION 3.16)
project(QtInWSL VERSION 0.1 LANGUAGES CXX)
set(CMAKE_CXX_STANDARD_REQUIRED ON)
find_package(Qt6 REQUIRED COMPONENTS Quick)
qt_standard_project_setup(REQUIRES 6.8.2)
qt_add_executable(appQtInWSL
main.cpp
)
qt_add_qml_module(appQtInWSL
URI QtInWSL
VERSION 1.0
QML_FILES
Main.qml
)
target_link_libraries(appQtInWSL
PRIVATE Qt6::Quick
)
include(GNUInstallDirs)
install(TARGETS appQtInWSL
BUNDLE DESTINATION .
LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
)
main.cpp
#include
#include
int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
QObject::connect(&engine, &QQmlApplicationEngine::objectCreationFailed,
&app, []() { QCoreApplication::exit(-1); },
Qt::QueuedConnection);
engine.loadFromModule("QtInWSL", "Main");
return app.exec();
}
Main.qml
import QtQuick
Window {
width: 640
height: 480
visible: true
color: "#09100f"
title: qsTr("Hello World")
Text {
anchors.centerIn: parent
font {
pixelSize: 24
bold: true
}
color: "white"
text: "Hello from Scythe Studio"
}
}
Mit diesem Setup wird alles korrekt erkannt – inklusive vollständiger QML-Syntaxhervorhebung und Autovervollständigung.

Sobald die App kompiliert und ausgeführt wird, sehen wir die Ausgabe 🙂

Qt Creator oder Visual Studio Code
Bei der Entwicklung von Qt-Anwendungen sind zwei beliebte Optionen für eine integrierte Entwicklungsumgebung (IDE)
Qt Creator und
Visual Studio Code (VSC). Beide sind ausgezeichnete Tools, richten sich jedoch an unterschiedliche Anforderungen. Im Folgenden vergleichen wir beide und erläutern, warum Visual Studio Code eine hervorragende Wahl für die Qt-QML-Entwicklung unter WSL ist.
Qt Creator
- Qt Creator ist die offizielle IDE von The Qt Company und wurde speziell für die Qt-Entwicklung entwickelt. Sie bietet:
- Eine vollständig integrierte Entwicklungsumgebung mit eingebauter Qt-Unterstützung
- Einen QML-Designer zur visuellen UI-Erstellung
- Einen integrierten Debugger und Profiler, optimiert für Qt-Anwendungen
- Automatische Projektkonfiguration für qmake und CMake
Microsoft Visual Studio Code (VSC)
- Visual Studio Code ist ein leichtgewichtiger, hochgradig anpassbarer Code-Editor von Microsoft. Er bietet:
- Ein leistungsstarkes Erweiterungssystem für verschiedene Programmiersprachen
- Integrierte Git-Unterstützung
- Umfassende Debugging-Funktionen mit GDB-Support
- Anpassbare Arbeitsbereiche, Themes und Tastenkürzel
- Nützliche Erweiterungen – man kann sogar eigene sehr einfach erstellen
- Eingebaute Terminals
- Unterstützung für viele Sprachen (z. B. Java, Python, Objective-C)
|
Qt Creator |
Visual Studio Code |
Qt-Unterstützung |
Eingebaute Qt-Tools, QML-Designer und Debugger |
Manuelle Einrichtung mit Erweiterungen erforderlich |
Leichtgewichtigkeit |
Ressourcenintensiver |
Leichtgewichtig, läuft reibungslos in WSL |
CMake-Integration |
Native Unterstützung für CMake & qmake |
CMake Tools-Erweiterung erforderlich |
Debugging |
Integrierter Qt-Debugger mit QML-Unterstützung |
GDB-basiertes Debugging über WSL |
Versionskontrolle |
Grundlegende Git-Integration |
Erweiterte Git-Funktionen mit Erweiterungen |
WSL-Kompatibilität |
Läuft in WSL, benötigt aber GUI-Weiterleitung |
Native Unterstützung für WSL über Remote-WSL-Erweiterung |

Warum Visual Studio Code für die Qt-Entwicklung unter WSL wählen?
Obwohl Qt Creator eine ausgezeichnete Wahl für die Qt-Entwicklung ist, eignet sich Visual Studio Code besser für WSL-basierte Workflows – aus folgenden Gründen:
- Native WSL-Unterstützung
- VSC integriert sich nahtlos mit WSL über die Remote – WSL-Erweiterung. So können Sie direkt in Ihrer Linux-Umgebung arbeiten – ohne zusätzlichen Aufwand.
- Qt Creator benötigt für GUI-Unterstützung einen X11-Server, was die Nutzung unter WSL etwas komplexer macht.
- Leichtgewichtig und flexibel
- Qt Creator bietet viele integrierte Funktionen, ist dadurch aber auch ressourcenintensiver.
- VSC ist leichtgewichtig, und Sie installieren nur die Erweiterungen, die Sie wirklich benötigen.
- Bessere Git- und Versionskontrollfunktionen
- VSC bietet umfangreiche Git-Unterstützung, inklusive integrierter Git-Funktionen und Erweiterungen wie GitLens.
- Qt Creator bietet nur grundlegende Git-Integration und ist bei Weitem nicht so leistungsfähig wie VSC.
- Mehr Anpassungsmöglichkeiten
- VSC erlaubt eine vollständig individualisierbare Entwicklungsumgebung – mit Themes, Tastenkombinationen und Plugins.
- Sie können es sowohl mit CMake als auch mit qmake konfigurieren – je nach Projektanforderung.
- Größeres Ökosystem
- VSC unterstützt viele Programmiersprachen und ist ideal, wenn Sie an einem Full-Stack-Projekt arbeiten, bei dem Qt nur ein Teil ist.
Wann ist Qt Creator die bessere Wahl?
Auch wenn VSC für viele Entwickler eine ausgezeichnete Wahl ist, kann Qt Creator in folgenden Fällen vorzuziehen sein:
- Reine Qt-Entwicklung – Wenn Ihr Projekt ausschließlich auf Qt basiert (C++/QML)
- QML & UI-Design – Inklusive QML Designer und Live-Vorschauen
- Nahtlose Qt-Integration – Native Unterstützung für qmake, CMake und Qt-Build-Tools
- Integriertes Qt-Debugging – QML Profiler, C++ Debugger und Speicheranalyse
- Plattformübergreifende Builds – Einfachere Einrichtung für Windows, macOS, Linux und
Embedded-Software-Entwicklung
- Bessere QML-Autovervollständigung – Syntaxhervorhebung und Property-Vorschläge
Qt-Entwicklungstools meistern
Sobald Ihre Qt-QML-Entwicklungsumgebung unter WSL und Visual Studio Code eingerichtet ist, besteht der nächste Schritt darin, die wichtigsten Qt-Tools zu beherrschen, die Entwicklung, Debugging und Bereitstellung vereinfachen. Qt bietet eine Vielzahl an Tools, die beim UI-Design, der Leistungsoptimierung und Fehlersuche helfen. In diesem Kapitel behandeln wir die wichtigsten Qt-Entwicklungstools und deren effektiven Einsatz in einer WSL-basierten Umgebung.
Dieser Blogbeitrag beschreibt den Prozess zur Einrichtung von Visual Studio Code für die Qt-Entwicklung in einer Windows Subsystem for Linux (WSL)-Umgebung. Durch diese Integration können Entwickler die Leistungsfähigkeit von Qt für die
plattformübergreifende Entwicklung nutzen und gleichzeitig einen nahtlosen Workflow in einer Linux-ähnlichen Umgebung unter Windows beibehalten.
Wenn Sie dieser Anleitung folgen, können Sie die volle Leistungsfähigkeit von Qt zum Erstellen und Bereitstellen von Anwendungen nutzen – und gleichzeitig die Vorteile von VS Code in Kombination mit der Linux-Umgebung von WSL genießen.