QML Extension for Visual Studio: Qt Quick Syntax Highlighting and Autocompletion

Nov 21, 2023

Microsoft Visual Studio is a powerful IDE with a robust ecosystem for efficient software creation. It is widely used and beloved by software developers, especially for native development on Windows.

With the right extensions and tools, you can set up and use Visual Studio to develop your Qt and QML projects. Read this guide to learn how:

How to Develop Qt Projects with Visual Studio
QML Syntax/Tools Extension for Visual Studio
Visual Studio Code Extension for Qt Quick

How to Develop Qt Projects with Visual Studio

Visual Studio Extensions are powerful add-ons for the IDE. They expand functionality with specialized tools, templates, and features. From simplifying complex tasks to boosting productivity, extensions can significantly improve your development experience and turn Visual Studio into a personalized powerhouse for crafting exceptional software.

To get started with Qt development in Visual Studio the Qt Visual Studio Tools extension is the way to go. It adds support for Qt-enabled CMake or qmake projects, Qt project wizards and the ability to build and debug Qt and QML applications.

You can find the extension in the Visual Studio Marketplace. After installing the extension you will find a "Qt" section in the Visual Studio options:

visual-studio-qt-setup

Make sure to configure the Qt version you want to use by specifying the path to the MSVC Build Kit of your Qt installation. With this setup you can now build and run Qt projects using Visual Studio.

QML Syntax/Tools Extension for Visual Studio

To additionally add language support for QML, install the new QML Syntax/Tools Extension created by Felgo. It features QML syntax highlighting and code completion, allowing you to conveniently develop Qt Quick applications with Visual Studio:

visual-studio-qml-extension-1

Follow these steps to install the QML Syntax/Tools Extension:

1) Open Visual Studio

2) Select the Extensions menu item and choose Manage Extensions

3) Search for ‘Felgo’ and choose the 'QML Syntax/Tools' extension from the list

4) Click ‘Download’ to add the extension

visual-studio-install-qml-extension

That’s all, you now have support for QML code with syntax highlighting and auto-completion!

Visual Studio Code Extension for Qt Quick

If you prefer you can also use Visual Studio Code instead of Visual Studio for your Qt/QML development. The QML Syntax/Tools Extension is available for both IDEs to provide you with QML syntax highlighting and autocompletion. You can find the Visual Studio Code variant in the Marketplace here.

For development with Qt Creator, download the full Felgo SDK to get everything you need. It includes Qt, the Qt Creator IDE, the Felgo SDK, as well as the QML Hot Reload tool for efficient development.