Get Involved/development/IDE configuration/Visual Studio Code: Difference between revisions
Workspace settings |
User settings |
||
Line 109: | Line 109: | ||
</nowiki>}} | </nowiki>}} | ||
=== | ===User settings=== | ||
These settings apply once to every project | 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> | {{Input|1=<nowiki> | ||
"cmake.environment": { | "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>}} | </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". | |||
==Working on a project== | ==Working on a project== |
Revision as of 00:20, 15 August 2022
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 have 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 holds settings related to a specific project in the top-level directory of that project, in a hidden directory named .vscode
.
We will use kcalc (the KDE calculator app) as an example of where to add our project configuration files:
~/kde/src/utilities/kcalc/.vscode/settings.json
Create this file. Make it have the content:
{ "cmake.buildDirectory": "${workspaceFolder}/../../build/dolphin" }
~/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:
{ "configurations": [ { "name": "Linux", "includePath": [ "${workspaceFolder}/**" ], "defines": [], "compilerPath": "/usr/bin/gcc", "cStandard": "c17", "cppStandard": "c++17", "intelliSenseMode": "${default}", "compileCommands": "${workspaceFolder}/compile_commands.json" } ], "version": 4 }
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:
{ "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", }
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:
"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"
E.g. scroll to "Cmake: Environment Environment variables to set when running CMake commands." > Add Item > Key: PATH
, Value: ~/kde/usr/bin:${env:PATH}
. 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".
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 pressOK