Using VSCode as IDE? [with tutorial for Windows]

Development Coding synfig
,
1

I just like the simple, lightweight and extensible nature of VSCode. Mostly whatever I have learnt (Flutter, Python, Web development, PHP) I always have used it. So VSCode is lot natural to me.

New tools like GitHub Copilot are available as VSCode extensions, through which one can leverage these AI tools to work more productively.

I was wondering if anyone has used VSCode as their IDE for Synfig development, what features I would miss than using Netbeans IDE or QTCreator ?

vscode_vscodium
vscode_vscodium312Ă—177 7.88 KB

2

Probably none.

Neither Netbeans nor Qt Creator are specific for Gtk/gtkmm/Synfig Studio at all.

So, go forward and, if not trivial and if you want, record how to set it up/use it for Synfig Studio in the dev-docs :slight_smile:

3

I was about to say that too xD. Personally, I prefer Qt Creator as I’m more used to it (it’s really great when working on qt applications).

But yes when it comes to using it for Synfig it feels like an advanced text editor lol. I build, run, and debug from the terminal independently of the IDE, although I’m sure you can configure Qt Creator to build, run, and debug as well if you’d like.

4

Yes, I do it :slight_smile: Via Autotools. But I’m maso.

5

oh god, I can’t Imagine xD.

6

Uhmm… Uhmmm…
Lightweight!

Perhaps my eyes can’t see properly :slightly_smiling_face:

I use a very well supported, heavy to run (you might need 2 4090s), and with a very cool gui application. It’s notepad :skull:
I don’t know why people hate it, i can color each letter differently atleast.

7

Notepad has nothing “Integrated” like in an IDE, does not syntax coloring and doesn’t help to detect errors.
And compared to other IDEs, it is quite lightweight (if no hundreds of extensions activated at a time)

8

I know :sweat_smile:
I was just joking around :stuck_out_tongue:

Otherwise in reality, I use either builder in zorin os education or vscode everywhere else.

9

Using VSCode as IDE for Synfig Development on Windows

Step 1: Setup Environment

Setup your environment as described here:

This includes:

  • Installing and setting up MSYS2
  • Cloning the repository
  • Running the setup script

Step 2: Build Synfig

Follow the build instructions here:

The default build directory is:

cmake-build/

This directory contains all generated build files (Ninja files, binaries, cache, etc.).
It is safe to delete this folder anytime to reset the build.

Once you are able to successfully build Synfig, proceed to VSCode setup.

Step 3: Install Required Extensions

Install one of the following:

Option 1: C/C++

Option 2: Extension Pack (Recommended)

Step 4: Select CMake Kit

When opening the synfig.git repo for the first time, VSCode will prompt you to select a CMake Kit.

Choose a kit that uses the MinGW64 compiler from MSYS2.

It should point to:

C:\msys64\mingw64\bin\gcc.exe

Example:

GCC (MinGW64)

Avoid selecting kits that point to:

  • MSYS environment
  • UCRT toolchains

Step 5: Configure CMake Arguments

If you encounter issues during CMake configuration, add:

VSCode → Settings → CMake: Configure Args

-DMSYS=1
-DCMAKE_EXPORT_COMPILE_COMMANDS=ON //optional for IntelliSense see Step 6

Step 6: IntelliSense Setup using compile_commands.json

To enable accurate IntelliSense, ensure the following flag is used:

-DCMAKE_EXPORT_COMPILE_COMMANDS=ON

After running CMake, the file will be generated at:

cmake-build/compile_commands.json

This allows VSCode to correctly understand:

  • Include directories
  • Compilation flags
  • File dependencies

If IntelliSense does not update:

  • Restart VSCode, or
  • Run:
C/C++: Reset IntelliSense Database

Step 7: Configure c_cpp_properties.json

Once compile_commands.json is generated, configure:

{
    "configurations": [
        {
            "name": "Win32",
            "defines": [
                "_DEBUG",
                "UNICODE",
                "_UNICODE"
            ],
            "compileCommands": "C:/msys64/home/username/synfig.git/cmake-build/compile_commands.json",
            "compilerPath": "C:\\msys64\\mingw64\\bin\\gcc.exe",
            "cStandard": "c11",
            "cppStandard": "gnu++14",
            "intelliSenseMode": "clang-x64"
        }
    ],
    "version": 4
}

Step 8: Configure Debugger (launch.json)

{
    "name": "[MSYS2] Debug Synfig Studio",
    "type": "cppdbg",
    "request": "launch",
    "program": "${workspaceFolder}/cmake-build/output/Debug/bin/synfigstudio.exe",
    "args": [],
    "stopAtEntry": false,
    "cwd": "${workspaceFolder}",
    "environment": [],
    "externalConsole": true,
    "MIMode": "gdb",
    "miDebuggerPath": "C:\\msys64\\mingw64\\bin\\gdb.exe",
    "setupCommands": [
        {
            "description": "Enable pretty-printing for gdb",
            "text": "-enable-pretty-printing",
            "ignoreFailures": true
        }
    ]
}

You can now:

  • Run the debugger
  • Add breakpoints
  • Inspect variables

Step 9: Using VSCode CMake Commands

You can run build and debug commands directly from VSCode:

Open Command Palette (Ctrl + Shift + P) and use:

  • CMake: Configure
  • CMake: Build
  • CMake: Debug

If you encounter issues or have suggestions for improvement, feel free to share them so this guide can be refined further. And then after some validations from new users, we can add it to the official wiki.
And maybe these tasks.json and c_cpp_properties.json can be commited to the code so that new developers can have out the box setup, smoothing their onboarding experience.

1 Like
10

You can additionally use clangd extension in VSCode that would speed up stuff like finding references, it also supporting viewing heirarchy for classes/struct, which can be useful.

1 Like