Develop Qt applications with Visual Studio Code.
You can:
- Use Qt in your CMake project by selecting a generated Qt kit.
- Design Qt widgets-based UIs with Qt Widgets Designer.
- Build Qt projects with CMake.
- Debug Qt's C++ types.
- Handle Qt-specific file formats.
- Read Qt documentation.
- Install the Qt extension.
- Register a Qt installation.
- Open a folder that contains a Qt CMake project (that has a
CMakeLists.txt
file). - In
Command Palette
, selectCMake: Select a Kit
to select a kit that matches your Qt version and toolchain. - Select
CMake: Build
to build the project.
To install the Qt extension:
- Select the
Extensions
icon in theActivity Bar
or pressCtrl+Shift+X
. - In
Extensions
, search forQt Official
. - Select
Install
.
The CMake and CMake Tools extensions are installed automatically.
The Qt extension checks whether you have a Qt installation folder at the default path and offers to save it in Qt Settings. It then asks you whether you want to register the Qt versions it found.
If you installed Qt somewhere else, register your Qt installation:
- In
Command Palette
, selectQt: Register Qt Installation
. - Select the folder where you installed Qt, and then select
Select the Qt installation path
.
The command creates CMake kits for each installed Qt version.
If some Qt CMake kits are missing, select Qt: Scan for Qt Kits
in
Command Palette
.
To design a widgets-based UI:
- In
Explorer
, select a.ui
file. - Select
Open this file with Qt Widgets Designer
. - Use Qt Widgets Designer to design a UI.
To debug an application:
- Select
Run and Debug
. - Create a
launch.json
file. - Select
Add Configuration
, and then select aQt: Debug
debug configuration that matches your debugger.
To debug a Qt WebAssembly application:
- Open a
launch.json
file. - Select
Add Configuration
, and then select theQt: Debug Qt WASM with Chrome
debug configuration.
The Qt: WASM Start
task in the preLaunchTask
section checks the required
dependencies and prompts you to install them if necessary.
For multi-thread
Qt WebAssembly applications, set the following
configuration in settings.json
:
"livePreview.httpHeaders": {
"Cross-Origin-Embedder-Policy": "require-corp",
"Cross-Origin-Opener-Policy": "same-origin",
"Accept-Ranges": "bytes"
}
Otherwise, you may see the SharedArrayBuffer is not defined
error.
To find documentation for the word you select in the editor, such as a class or function name:
- Select a word in the editor.
- In
Command Palette
, selectQt: Documentation: Search for the current word
.
Qt documentation opens in Simple Browser in Visual Studio Code. To open it
in another browser, select Open Online Documentation in External Browser
in
Qt Settings.
To find any text in Qt documentation:
- In
Command Palette
, selectQt: Documentation: Search
. - Type a search string and press
Enter
.
To go to the Qt documentation pages, select Qt: Documentation: Open Homepage
in Command Palette
.
If you have multiple kits with the same name in different JSON
files, the
search order is:
cmake-kits.json
in the.vscode
folder of the workspace.cmake-tools-kits.json
in the local user settings folder.JSON
files in thecmake.additionalKits
setting.
To view and change Qt settings, select Qt: Qt Settings
in Command Palette
.
Setting | Description |
---|---|
Custom Widgets Designer Exe Path | Path to the folder where you installed Qt Widgets Designer. |
Do Not Ask for Default Qt Folder | Hides the prompt about setting the value of Qt Folder . |
Open Online Documentation in External Browser | Opens Qt documentation in the default browser. |
Qt Folder | Path to the folder where you installed Qt. |
Qmlls: Custom Exe Path | Path to the folder where you installed QML Language Server. |
Qmlls: Enabled | Turns on QML Language Server. |
Qmlls: Trace Lsp | Collects trace output from QML Language Server. |
Qmlls: Verbose Output | Shows verbose output from QML Language Server. |
To use the Qt extension with other extensions, set the following recommended
settings in settings.json
or run Qt: Set the recommended Qt Extension settings
from Command Palette
.
"cmake.options.statusBarVisibility": "visible",
This extension can be licensed under the Qt Commercial License and the LGPL 3.0. See the text of both licenses here.