Qt for VS Code, the TL;DR version Using VS Code IDE to work on Qt project

25.10.2023 Nicolas Arnaud-Cormos and Sérgio Martins No comments

Our colleague Alessandro Ambrosano created a series of blogs (parts 1, 2, and 3) that explain how to get Visual Studio Code configured for Qt development. In that series, Alessandro covers all the details you need to get your VS Code environment configured exactly the way you want it. But there’s a lot there to read.

What if you’re short on time… or attention span? Then you want this blog. We’ve created the fastest way to get going for Qt developers who want to use the world’s best C++ UX framework with the powerful VS Code IDE. By putting most of the necessary ingredients into CMake, it really trims down what’s necessary to get things working. We’ve tested this basic setup on Windows, Mac, and Linux computers. (And if you need to tweak anything further, just go back and read Alessandro’s blogs for more info.)

Although there are a few steps here, there really isn’t much to do. We’ve just broken it down into all the individual bits with screen shots so you can follow along. We’ve also provided two ways to do this – one starting from a script, and one starting directly in the VS Code IDE. We’re going to explain the IDE-only version here, but the code and instructions in our Git repository supports both methods, so check out https://github.com/KDABLabs/blog-vscode-template.git if you prefer launching VS Code from a script.

If you are really in a hurry, check out https://github.com/KDABLabs/blog-vscode-template.git and read the readme for the platform you are working on. Just copy the files in your project and you are good to go/

Let’s go!

Prerequisites

We’re going to assume that you’ve already got VS Code and Qt If not, go take care of that now and come back when you’re done.

If you’re using Windows, you’ll need to add an environment variable that points to Qt and to make sure that Qt is in your path. You can do this in a VS Code launch script as we explain in README-Windows.md in our repo. Depending on what version of Qt you’re using, the command-line version of what you need will be something like this:

set QTDIR=C:\Qt\6.5.1\msvc2019_64\
set PATH=%PATH%;%QTDIR%\bin

If you prefer, you can also set these variables on a system-wide basis. This might be easier if you intend on launching VS Code from the GUI instead of the command-line. In this case, click “Start”, type “environment properties”, and when the System Properties window comes up, click Environment Variables. Then:

• Create a new variable called QTDIR set to C:\Qt\6.5.1\msvc2019_64\
• Add C:\Qt\6.5.1\msvc2019_64\bin to the end of the existing PATH variable.

Steps

• Create a test directory. For the sake of this example, we’re using a Mac and a test directory called ~/Development/VSCode. Replace this with whatever makes sense for your environment, and cd into this directory.

• • To check out our example project, type

git clone https://github.com/KDAB/blog-vscode-template.git

• • In a command shell, change into the blog-vscode-template directory and start VS Code:

cd blog-vscode-template
code .

• You should see VS Code pop up. If you get a dialog that says “

Do you trust the authors of the files in this folder?

• ”, click “Yes, I trust the Authors”

Troubleshooting tip: if VS Code doesn’t run and you get an error about “code: command not found” you probably don’t have VS Code in your PATH. You can easily fix this by running VS Code from the app launcher. Then, hit either Ctrl+Shift+P (for Windows/Linux) or Cmd+Shift+P (for Mac), type “shell command” in the search box, and then pick “Install ‘code’ command in PATH”.) Then start step 4 over at the beginning.

• If you are using MacOS or Linux, examine the CMakeUserPresets.json file and make sure the CMAKE_PREFIX_PATH variable has the correct path to the correct Qt platform. Because Qt can be installed in different locations, this might be different for different developers so this file wouldn’t normally be checked into Git. (We’ve done it here for the purposes of this blog.) To ensure that it will preserve any tweaks you make for your specific machine and that it won’t be deleted from your setup, add CMakeUserPresets.json to your .gitignore. (You’ll want to .gitignore this file no matter what anyway)

• • Wait for a moment, and VS Code will find that we’ve configured some recommended extensions for this workspace; it will prompt you to install them. Click “Install”, and VS Code will then start installing extensions for C/C++, CMake Tools, CMake, and clangd. Wait for those to complete installing before going on to the next step.

• Once the extensions have completed installing, you’ll be asked “Do you want to configure project VSCode?” Answer “Yes”.

• • Now you need to select a configure preset. This is necessary to get CMake to create the compile-commands.json Without that file, the code completion, code hints, and content assist features in the C++ extension don’t work properly.

On the bottom status bar if you see “No Configure Preset Selected”, then click that text and then pick the debug variant appropriate for your platform, per the following table. You can change the existing configuration if one is set too.

A couple notes on our naming structure:

• • the command-line version expect the environment variables (compiler, Qt) to be set properly before launching VS Code
  • we don’t hardcode the Qt version in the Microsoft presets like the other platforms do because it’s already set via an environment variable

After a few moments, you’ll see a compile-commands.json file get populated in the workspace directory. This step also builds the binary file.

That’s it – we’re done! If you click on the Run icon, you should see the app screen with our new Qt app.

The C++ autocomplete and link following features should be working as well since we’re using the clangd extension. Using the more common Microsoft C++ extension is an option as well. There are pros and cons to each – something we will cover in detail in our next blog.