|
|
| (18 intermediate revisions by 7 users not shown) |
| Line 1: |
Line 1: |
| 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.
| | Moved to https://develop.kde.org/docs/getting-started/building/ide/visual-studio-code/ |
| | |
| ==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.
| |
| | |
| # [https://marketplace.visualstudio.com/items?itemName=ms-vscode.cpptools-extension-pack C/C++ Extension Pack] - Enables support for C++ and CMake.
| |
| | |
| # [https://marketplace.visualstudio.com/items?itemName=tonka3000.qtvsctools Qt tools] - Enables some Qt support.
| |
| | |
| # [https://marketplace.visualstudio.com/items?itemName=bbenoist.QML QML] - Enables syntax highlighting for QML.
| |
| | |
| Optional:
| |
| | |
| [https://zealdocs.org/ Zeal] is an application that allows browsing documentation offline.
| |
| | |
| [https://marketplace.visualstudio.com/items?itemName=deerawan.vscode-dash 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 [https://en.wikipedia.org/wiki/Language_Server_Protocol Language Server Protocol] support:
| |
| | |
| In <code>~/.config/kdesrc-buildrc</code> ensure these two options are in the global section and set to true:
| |
| | |
| {{Input|1=<nowiki>
| |
| compile-commands-linking true
| |
| compile-commands-export true
| |
| </nowiki>}}
| |
| | |
| Other recommended settings:
| |
| | |
| {{Input|1=<nowiki>
| |
| global
| |
| ...
| |
| cmake-options -DCMAKE_BUILD_TYPE=Debug
| |
| directory-layout invent
| |
| ...
| |
| end global
| |
| </nowiki>}}
| |
| | |
| ==Configuration==
| |
| | |
| We will use kcalc (the KDE calculator app) as an example.
| |
| Build kcalc:
| |
| | |
| {{Input|1=<nowiki>
| |
| kdesrc-build kcalc
| |
| </nowiki>}}
| |
| | |
| Either open VSCode, from the VSCode main menu > File > Open Folder... [Ctrl+K Ctrl+O] > select <code>~/kde/src/utilities/kcalc/</code>.
| |
| | |
| Or, in a terminal,
| |
| | |
| {{Input|1=<nowiki>
| |
| cd ~/kde/src/utilities/kcalc
| |
| code .
| |
| </nowiki>}}
| |
| | |
| The directory opened in VSCode is also known as the VSCode workspace folder.
| |
| | |
| VSCode has two sets of settings: "User" settings (e.g. ~/.config/Code/User/settings.json) and "Workspace" settings (e.g. ~/kde/src/utilities/kcalc/.vscode/settings.json). You can see these in VSCode main menu > File > Preferences > Settings Ctrl+Comma > at the top there are two tabs: "User" and "Workspace"
| |
| | |
| VSCode stores settings related to a specific project in the top-level directory of that project, in a hidden directory named <code>.vscode</code>.
| |
| | |
| ===~/kde/src/utilities/kcalc/.vscode/settings.json===
| |
| | |
| Create this file. Make it have the content:
| |
| | |
| {{Input|1=<nowiki>
| |
| {
| |
| "cmake.buildDirectory": "${workspaceFolder}/../../build/dolphin"
| |
| }
| |
| </nowiki>}}
| |
| | |
| ===~/kde/src/utilities/kcalc/.vscode/c_cpp_properties.json===
| |
| | |
| This config enables the correct settings to support C++, CMake & IntelliSense.
| |
| | |
| Create this file. Make it have the content:
| |
| | |
| {{Input|1=<nowiki>
| |
| {
| |
| "configurations": [
| |
| {
| |
| "name": "Linux",
| |
| "includePath": [
| |
| "${workspaceFolder}/**"
| |
| ],
| |
| "defines": [],
| |
| "compilerPath": "/usr/bin/gcc",
| |
| "cStandard": "c17",
| |
| "cppStandard": "c++17",
| |
| "intelliSenseMode": "${default}",
| |
| "compileCommands": "${workspaceFolder}/compile_commands.json"
| |
| }
| |
| ],
| |
| "version": 4
| |
| }
| |
| </nowiki>}}
| |
| | |
| ===User settings===
| |
| | |
| These settings apply once to every project.
| |
| | |
| In VSCode open the command palette with Ctrl + Shift + P > "Preferences: Open User Settings (JSON)". On my machine the file has the content:
| |
| | |
| {{Input|1=<nowiki>
| |
| {
| |
| "editor.wordWrap": "on",
| |
| "cmake.environment": {
| |
| "PATH": "~/kde/usr/bin:${env:PATH}",
| |
| "LD_LIBRARY_PATH": "~/kde/usr/lib/x86_64-linux-gnu:${env:LD_LIBRARY_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}",
| |
| },
| |
| "cmake.generator": "Unix Makefiles",
| |
| "cmake.installPrefix": "~/kde/usr",
| |
| }
| |
| </nowiki>}}
| |
| | |
| Or, alternatively, from VSCode main menu > File > Preferences > Settings Ctrl+Comma > User > Extensions > CMake Tools > scroll through the list and make sure that you keep the defaults, plus you configure the following:
| |
| | |
| {{Input|1=<nowiki>
| |
| "cmake.environment": {
| |
| "PATH": "~/kde/usr/bin:${env:PATH}",
| |
| "LD_LIBRARY_PATH": "~/kde/usr/lib/x86_64-linux-gnu:${env:LD_LIBRARY_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}"
| |
| }
| |
| | |
| "cmake.generator": "Unix Makefiles"
| |
| | |
| "cmake.installPrefix": "~/kde/usr"
| |
| </nowiki>}}
| |
| | |
| E.g. scroll to "Cmake: Environment Environment variables to set when running CMake commands." > Add Item > Key: <code>PATH</code> , Value: <code>~/kde/usr/bin:${env:PATH}</code>. Then, while you hover with the mouse over this settings, or wile you edit this setting, on the left hand side of "Cmake: Environment" a "gear" icon will appear > click on it > Copy Settings as JSON > make sure that the contents of the clipboard is equal to the JSON snippet from above, for "cmake.environment".
| |
| | |
| After you finish configuring VSCode, close all VSCode windows.
| |
| | |
| ==Working on a project==
| |
| | |
| If there is a file <code>~/kde/src/utilities/kcalc/CMakePresets.json</code> please delete it. Because it makes it really hard to use the correct CMake build configuration in VSCode. Deleting this file should be temporary. Be careful not to git commit this deleted file. E.g. do not stage to commit the deleted file <code>CMakePresets.json</code>.
| |
| | |
| Open the kcalc project (i.e. the git work directory, i.e. the directory where kdesrc-build has git cloned the git repository of kcalc) <code>~/kde/src/utilities/kcalc</code>.
| |
| | |
| In VSCode, in the bottom status bar:
| |
| * In the button "Click to select the current build variant" the CMake build configuration selected should be "Debug". I.e. the button should say "CMake: [Debug]: Ready".
| |
| * Ignore the button "No active kit" with tooltip "Click to change the active kit". Or select the "gcc" from your Linux distribution.
| |
| * In the right hand side there should be a button "Linux" with tooltip "C/C++ Configuration".
| |
| * In the button "Set the default build target", select your preferred CMake target, in our case "kcalc". In the button "Select the target to launch" select one of the executables which are created using CMake targets, in our case "kcalc".
| |
| * Ctrl+Shift+P > "CMake: Configure". It should say <code>[proc] Executing command: /usr/bin/cmake --no-warn-unused-cli -DCMAKE_EXPORT_COMPILE_COMMANDS:BOOL=TRUE -DCMAKE_BUILD_TYPE:STRING=Debug -DCMAKE_INSTALL_PREFIX:STRING=~/kde/usr -S~/kde/src/utilities/kcalc -B~/kde/build/utilities/kcalc -G "Unix Makefiles"</code> and <code>Build files have been written to: ~/kde/build/utilities/kcalc</code>.
| |
| * Press the button "Build" with gear icon with tooltip "Build the selected target: [kcalc]". It should say <code>[proc] Executing command: /usr/bin/cmake --build ~/kde/build/utilities/kcalc --config</code>.
| |
| * Press the button with the "Play" triangle icon with tooltip "Launch the selected target in the terminal window: [kcalc]". The application kcalc will start. In another terminal you can run e.g. <code>lsof | grep kcalc | grep KF5</code> and make sure that the KDE *.so files are opened from the correct directory. I.e. from <code>~/kde/usr/lib</code>, not from <code>/lib</code> or from <code>/usr</code>.
| |
| * Open the file <code>~/kde/src/utilities/kcalc/kcalc.cpp</code>, place a breakpoint inside the function <code>int main(int argc, char *argv[])</code>, which is the entry point of the process/executable kcalc. Press in the status bar the button with a ladybug icon and with tooltip "Launch the debugger for the selected target: [kcalc]". The debugger should start correctly and stop at the breakpoint.
| |
