Get Involved/development/IDE configuration/Visual Studio Code: Difference between revisions
directory-layout invent |
No edit summary |
||
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. | |||
==Installing== | |||
VSCode is available as a deb, rpm, portable, and in the Arch User Repository. | VSCode is available as a deb, rpm, portable, and in the Arch User Repository. | ||
Line 10: | Line 7: | ||
https://code.visualstudio.com/Download | 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. | Once VSCode is installed we need some extensions to enable support for the languages to work on KDE projects. | ||
Line 29: | Line 25: | ||
These paired together make looking up documentation while working on code very quick and easy. | 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: | Needed to enable [https://en.wikipedia.org/wiki/Language_Server_Protocol Language Server Protocol] support: | ||
Line 52: | Line 47: | ||
</nowiki>}} | </nowiki>}} | ||
==Configuration== | |||
VSCode holds settings related to specific projects in the top-level project directory, in a hidden <code>.vscode</code> folder. | VSCode holds settings related to specific projects in the top-level project directory, in a hidden <code>.vscode</code> folder. | ||
Line 58: | Line 53: | ||
We will use kcalc (the KDE calculator app) as an example of where to add our project configuration files: | 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. | This config specifies the correct build directory. | ||
Line 72: | Line 67: | ||
</nowiki>}} | </nowiki>}} | ||
===c_cpp_properties.json=== | |||
This config enables the correct settings to support C++, CMake & IntelliSense. | This config enables the correct settings to support C++, CMake & IntelliSense. | ||
Line 100: | Line 95: | ||
</nowiki>}} | </nowiki>}} | ||
===VSCode User Settings=== | |||
These settings apply once to every project | These settings apply once to every project | ||
Line 120: | Line 115: | ||
</nowiki>}} | </nowiki>}} | ||
==Working on a project== | |||
We work on a project in VSCode by opening it as a folder: | We work on a project in VSCode by opening it as a folder: |
Revision as of 23:42, 14 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
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 pressOK