Get Involved/development/IDE configuration/Visual Studio Code

Microsoft Visual Studio Code (VSCode) is a popular cross-platform, general-purpose, open source IDE. Thanks to its powerful extensions ecosystem it supports many languages as well as deep customization options for themes, fonts, keyboard controls, and more.

Installing

VSCode is available as a deb, rpm, portable, and in the Arch User Repository.

https://code.visualstudio.com/Download

Extensions

Once VSCode is installed we need some extensions to enable support for the languages to work on KDE projects.

C/C++ Extension Pack - Enables support for C++ and CMake.

Qt tools - Enables some Qt support.

QML - Enables syntax highlighting for QML.

Optional:

Zeal is an application that allows browsing documentation offline.

Dash is a VSCode extension that enables a hotkey (Ctrl + H) to instantly open the item under the cursor in Zeal.

These paired together make looking up documentation while working on code very quick and easy.

kdesrc-build configuration

Needed to enable Language Server Protocol support:

In ~/.config/kdesrc-buildrc ensure these two options are in the global section and set to true:

    compile-commands-linking true
    compile-commands-export true

Other recommended settings:

global
...
    cmake-options -DCMAKE_BUILD_TYPE=Debug
    directory-layout invent
...
end global

Configuration

We will use kcalc (the KDE calculator app) as an example. Build kcalc:

kdesrc-build kcalc

Either open VSCode, from the VSCode main menu > File > Open Folder... [Ctrl+K Ctrl+O] > select ~/kde/src/utilities/kcalc/.

Or, in a terminal,

cd ~/kde/src/utilities/kcalc
code .

The directory opened in VSCode is also known as the VSCode workspace folder.

VSCode holds settings related to specific projects in the top-level project directory, in a hidden .vscode folder.

We will use kcalc (the KDE calculator app) as an example of where to add our project configuration files:

settings.json

This config specifies the correct build directory.

Create the file settings.json at ~/kde/src/dolphin/.vscode/settings.json

Add the following to the new file:

{
    "cmake.buildDirectory": "${workspaceFolder}/../../build/dolphin"
}

c_cpp_properties.json

This config enables the correct settings to support C++, CMake & IntelliSense.

Create the file c_cpp_properties.json at ~/kde/src/dolphin/.vscode/c_cpp_properties.json

Add the following to the new file:

{
    "configurations": [
        {
            "name": "Linux",
            "includePath": [
                "${workspaceFolder}/**"
            ],
            "defines": [],
            "compilerPath": "/usr/bin/gcc",
            "cStandard": "c17",
            "cppStandard": "c++17",
            "intelliSenseMode": "${default}",
            "compileCommands": "${workspaceFolder}/compile_commands.json"
        }
    ],
    "version": 4
}

VSCode User Settings

These settings apply once to every project

In VSCode open the command palette with Ctrl + Shift + P
Search for and open the user settings.json: "Preferences: Open Settings (JSON)"
Add the following block:

"cmake.environment": {
    "PATH": "~/kde/usr/bin:${env:PATH}",
    "XDG_DATA_DIRS": "~/kde/usr/share:${env:XDG_DATA_DIRS}",
    "XDG_CONFIG_DIRS": "~/kde/usr/etc/xdg:${env:XDG_CONFIG_DIRS}",
    "QT_PLUGIN_PATH": "~/kde/usr/lib/plugins:${env:QT_PLUGIN_PATH}",
    "QML2_IMPORT_PATH": "~/kde/usr/lib/qml:${env:QML2_IMPORT_PATH}",
    "QT_QUICK_CONTROLS_STYLE_PATH": "~/kde/usr/lib/qml/QtQuick/Controls.2/:${env:QT_QUICK_CONTROLS_STYLE_PATH}",
  },

Working on a project

We work on a project in VSCode by opening it as a folder:

File -> Open Folder
Navigate to ~/kde/src/dolphin and press OK

Information

Along the bottom of the window are buttons to configure, build, run, debug, etc.