Trying Out the Qt Extension Pack in Visual Studio Code

Fri, 13 Sep 2024 00:53:53 +0900

Getting Started with Qt Development in VSCode: How to Install the Qt Extension Pack

Hello, Kenji here. This time, I’ll introduce “how to set up a Qt development environment in Visual Studio Code (hereafter VSCode)”.

Recently, there has been an increasing demand for developing Qt applications using the lightweight and highly extensible VSCode, in addition to the official Qt Creator. For those people, I recommend the “Qt Extension Pack”. Simply by installing this extension pack, you can get the main Qt-related extensions all at once.

Target Audience

Those who want to start GUI application development using Qt
Those who want to develop in VSCode instead of Qt Creator
Those who find it troublesome to search for extensions one by one

Prerequisites

VSCode must be installed (You can download it for free from the official website)
The main Qt library must be installed (Qt Official Website)

What is the Qt Extension Pack?

The Qt Extension Pack is an extension pack for VSCode. By installing it, the following features are automatically added:

Support for .ui files (Qt Designer)
Syntax highlighting for .pro and .qrc files
C++ code completion, building, and debugging assistance for Qt
Qt Resource Browser

Installation Steps

1. Open VSCode

First, launch VSCode.

2. Open the Extensions View

Click the Activity Bar (square block icon) on the left side to show “Extensions”.

Alternatively, you can press the shortcut Ctrl + Shift + X.

3. Search for “Qt Extension Pack”

Enter the following keyword in the search bar:

1

Qt Extension Pack

4. Click the Install Button

When the target pack is displayed, click the “Install” button. This will install multiple extensions at once, such as the following:

Qt Language Support
QML Support
Qt Designer Integration
CMake Tools (Essential for CMake-based Qt development)

Supplementary Project Settings (CMake + Qt Example)

If you use Qt with CMake, the combination with the following extensions is recommended:

Also, if you put the following description in your CMakeLists.txt, integration with Qt will be smooth:

1
2


find_package(Qt6 REQUIRED COMPONENTS Widgets)
target_link_libraries(MyApp PRIVATE Qt6::Widgets)

Bonus: How to open .ui files?

.ui files can be edited in Qt Designer. In VSCode, you can right-click a .ui file → select Open with Qt Designer (requires Qt Designer to be included in the PATH environment variable).

Summary

Step	Content
1	Launch VSCode
2	Open the Extensions Panel
3	Search for “Qt Extension Pack”
4	Click the Install button

Setting up a Qt environment in VSCode is now much easier than before. It has sufficient features as a substitute for Qt Creator, and is recommended for those who want to work nimbly.

Finally

From now on, I plan to proceed with development utilizing Qt UI tools and QML in this environment. Next time, I plan to explain how to build & run a Qt Hello World app from VSCode.

See you next time!

Recommended Visual Studio Code Extensions

Wed, 29 May 2024 17:20:19 +0900

Visual Studio Code Recommended Extensions List

Category	Name	Publisher	Description
Virtual / Container Management	Remote Development	Microsoft	Supports remote development by connecting to virtual containers / WSL via SSH
Virtual / Container Management	Docker	Microsoft	Supports management of Docker containers
Code Management	GitHub Pull Requests	GitHub	Manage GitHub Pull Requests within VSCode
Code Management	GitHub Copilot	GitHub	Supports AI-based code completion
Code Management	Git Graph	mhutchie	Graphically displays Git branches and commits
Code Management	Git History	Don Jayamanne	Displays Git history
Browser / Web Development	Debugger for Firefox	Firefox DevTools	Use Firefox’s debugger within VSCode
Browser / Web Development	Microsoft Edge Tools for VS Code	Microsoft	Use Edge’s developer tools within VSCode
Browser / Web Development	Vue Language Features (Volar)	Vue	Supports Vue language features
Browser / Web Development	JavaScript (ES6) code snippets	charalampos karypidis	Provides JavaScript snippets
Browser / Web Development	Tailwind CSS IntelliSense	Tailwind Labs	Provides Tailwind CSS snippets
Cloud Development	AWS Toolkit	Amazon Web Services	Supports AWS development
Cloud Development	Azure Tools	Microsoft	Supports Azure development
Cloud Development	Google Cloud Tools	Google Cloud	Supports Google Cloud development
Database	MySQL	Jun Han	Supports MySQL development
Database	SQL Server (mssql)	Microsoft	Supports SQL Server development
Database	PostgreSQL	Chris Kolkman	Supports PostgreSQL development
Embedded	PlatformIO	PlatformIO	Supports PlatformIO development
Embedded	Arduino	Microsoft	Supports Arduino development
Embedded	WorkBench	Particle	Particle’s development environment, supporting IoT development including firmware, libraries, and cloud integration
C/C++	C/C++ Extension Pack	Microsoft	Supports C/C++ development
C/C++	C/C++ Runner	franneck94	Runs C/C++ code (supports gcc, msvc, cuda nvcc compilers)
C/C++	Cortex-Debug	marus25	Supports debugging of Cortex-A/R/M microcontrollers
Python	Python Extension Pack	Microsoft	Supports Python development
Python	Jupyter	Microsoft	Supports Jupyter Notebook development
Utility / UI Extension	Markdown All in One	Yu Zhang	Supports Markdown writing
Utility / UI Extension	Hex Editor	Microsoft	Edits binary files
Utility / UI Extension	vscode-pdf	tomoki1207	Displays PDF files
Utility / UI Extension	Rainbow CSV	mechatroner	Displays CSV files colorfully
Utility / UI Extension	Draw.io Integration	Henning Dieterichs	Use Draw.io within VSCode
Utility / UI Extension	Japanese Language Pack for Visual Studio Code	Microsoft	Japanese localization pack
Utility / UI Extension	Live Share	Microsoft	Supports real-time collaborative work

Visual Studio Code on kenji.blog