How to configure VSCode for GTK3 for intellisense / build / debug and g++

I'm using

• g++
• GTK3
• VSCode

How do I get the following to work:

• Intellisense / code completion for gtk
• Buiding inside VSCode
• Debugging with VSCode

Problem:

VSCode does not find includes - especially #include <gtk/gtk.h> is red in source.

The important thing to note is, that you need to tell VSCode the include paths and compiler flags to work properly.

• First step: Open the target folder in VSCode.
• Now you should have a new hidden folder .vscode in there. Open it.
• You want to apply the output of pkg-config --cflags gtk+-3.0 and pkg-config --libs gtk+-3.0 to their respective configs.

Make intellisense / code completion work

• Create a file .vscode/c_cpp_properties.json.

• Add the following content.

  {
      "env": {
          "myDefaultIncludePath": [
              "${workspaceFolder}",
              "${workspaceFolder}/include"
          ],
          "myCompilerPath": "/usr/local/bin/g++"
      },
      "configurations": [
          {
              "name": "include paths",
              "intelliSenseMode": "g++-8",
              "includePath": [
  
                  "/usr/include/gtk-3.0",
                  "/usr/include/at-spi2-atk/2.0",
                  "/usr/include/at-spi-2.0",
                  "/usr/include/dbus-1.0",
                  "/usr/lib/x86_64-linux-gnu/dbus-1.0/include",
                  "/usr/include/gtk-3.0",
                  "/usr/include/gio-unix-2.0",
                  "/usr/include/cairo",
                  "/usr/include/libdrm",
                  "/usr/include/pango-1.0",
                  "/usr/include/harfbuzz",
                  "/usr/include/pango-1.0",
                  "/usr/include/fribidi",
                  "/usr/include/atk-1.0",
                  "/usr/include/cairo",
                  "/usr/include/pixman-1",
                  "/usr/include/freetype2",
                  "/usr/include/libpng16",
                  "/usr/include/gdk-pixbuf-2.0",
                  "/usr/include/libmount",
                  "/usr/include/blkid",
                  "/usr/include/uuid",
                  "/usr/include/glib-2.0",
                  "/usr/lib/x86_64-linux-gnu/glib-2.0/include"
  
              ],
              "compilerPath": "/usr/local/bin/g++",
              "cStandard": "c11",
              "cppStandard": "c++17",
              "browse": {
                  "path": [
                      "${workspaceFolder}"
                  ],
                  "limitSymbolsToIncludedHeaders": true,
                  "databaseFilename": ""
              }
          }
      ],
      "version": 4
  }
  

• Note, that the content of "includePath" is the output of pkg-config --cflags gtk+-3.0 without the preceeding -Is and with double quotes and commas. You may have to adjust the values according the output of your machine

Make building work

You want to create a new task inside .vscode/tasks.json with the following content:

    {
      "type": "shell",
      "label": "gcc debug build active file - with GTK",
      "command": "/usr/bin/gcc",
      "args": [          
          "-g",

                "-pthread",
                "-I/usr/include/gtk-3.0",
                "-I/usr/include/at-spi2-atk/2.0",
                "-I/usr/include/at-spi-2.0",
                "-I/usr/include/dbus-1.0",
                "-I/usr/lib/x86_64-linux-gnu/dbus-1.0/include",
                "-I/usr/include/gtk-3.0",
                "-I/usr/include/gio-unix-2.0",
                "-I/usr/include/cairo",
                "-I/usr/include/libdrm",
                "-I/usr/include/pango-1.0",
                "-I/usr/include/harfbuzz",
                "-I/usr/include/pango-1.0",
                "-I/usr/include/fribidi",
                "-I/usr/include/atk-1.0",
                "-I/usr/include/cairo",
                "-I/usr/include/pixman-1",
                "-I/usr/include/freetype2",
                "-I/usr/include/libpng16",
                "-I/usr/include/gdk-pixbuf-2.0",
                "-I/usr/include/libmount",
                "-I/usr/include/blkid",
                "-I/usr/include/uuid",
                "-I/usr/include/glib-2.0",
                "-I/usr/lib/x86_64-linux-gnu/glib-2.0/include",

          "${file}",

                "-lgtk-3",
                "-lgdk-3",
                "-lpangocairo-1.0",
                "-lpango-1.0",
                "-latk-1.0",
                "-lcairo-gobject",
                "-lcairo",
                "-lgdk_pixbuf-2.0",
                "-lgio-2.0",
                "-lgobject-2.0",
                "-lglib-2.0",

          "-o",
          "${fileDirname}/${fileBasenameNoExtension}"
      ],
      "options": {
          "cwd": "/usr/bin"
      },
      "problemMatcher": [
          "$gcc"
      ],
      "group": {
          "kind": "build",
          "isDefault": true
      }
    } 

• Note the two more indented parts within args.
• The top one is again the output of pkg-config --cflags gtk+-3.0. (This time with the -Is, though.)
• The bottom part is the output of pkg-config --libs gtk+-3.0 (quoted and commated)
• You might need to adjust these values as well, according to the actual output of the commands on your machine

Make debugging work

You want to create a new configuration inside the .vscode/launch.json file. On my setup vscode kept using the wrong configuration, so I deleted the others. Below is the full content of the file with only one configuration.

    {
      // Use IntelliSense to learn about possible attributes.
      // Hover to view descriptions of existing attributes.
      // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
      "version": "0.2.0",
      "configurations": [

          {
              "name": "debug with gdb (no build)",
              "type": "cppdbg",
              "request": "launch",
              "program": "${fileDirname}/${fileBasenameNoExtension}",
              "args": [],
              "stopAtEntry": false,
              "cwd": "${workspaceFolder}",
              "environment": [],
              "externalConsole": false,
              "MIMode": "gdb",
              "setupCommands": [
                  {
                      "description": "Enable pretty-printing for gdb",
                      "text": "-enable-pretty-printing",
                      "ignoreFailures": true
                  }
              ],
              "preLaunchTask": "",
              "miDebuggerPath": "/usr/bin/gdb"
          }
      ]
    }