Qt Extension for Visual Studio Code

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.

How to

Get started

1. Install the Qt extension.
2. Register a Qt installation.
3. Open a folder that contains a Qt CMake project (that has a CMakeLists.txt file).
4. In Command Palette, select CMake: Select a Kit to select a kit that matches your Qt version and toolchain.
5. Select CMake: Build to build the project.

Install the Qt extension

To install the Qt extension:

1. Select the Extensions icon in the Activity Bar or press Ctrl+Shift+X.
2. In Extensions, search for Qt Official.
3. Select Install.

The CMake and CMake Tools extensions are installed automatically.

Register a Qt installation

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:

1. In Command Palette, select Qt: Register Qt Installation.
2. 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.

Scan for Qt kits

If some Qt CMake kits are missing, select Qt: Scan for Qt Kits in Command Palette.

Design a widgets-based UI

To design a widgets-based UI:

1. In Explorer, select a .ui file.
2. Select Open this file with Qt Widgets Designer.
3. Use Qt Widgets Designer to design a UI.

Debug an application

To debug an application:

1. Select Run and Debug.
2. Create a launch.json file.
3. Select Add Configuration, and then select a Qt: Debug debug configuration that matches your debugger.

Debug a Qt WebAssembly application

To debug a Qt WebAssembly application:

1. Open a launch.json file.
2. Select Add Configuration, and then select the Qt: 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.

Find Qt documentation

To find documentation for the word you select in the editor, such as a class or function name:

1. Select a word in the editor.
2. In Command Palette, select Qt: 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:

1. In Command Palette, select Qt: Documentation: Search.
2. Type a search string and press Enter.

Read Qt documentation

To go to the Qt documentation pages, select Qt: Documentation: Open Homepage in Command Palette.

Reference

Multiple kits with the same name

If you have multiple kits with the same name in different JSON files, the search order is:

1. cmake-kits.json in the .vscode folder of the workspace.
2. cmake-tools-kits.json in the local user settings folder.
3. JSON files in the cmake.additionalKits setting.

Qt Settings

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.

Recommended Settings to Use Qt with Other Extensions

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",

License

This extension can be licensed under the Qt Commercial License and the LGPL 3.0. See the text of both licenses here.