|
|
| (21 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==
| |
| | |
| We work on a project in VSCode by opening it as a folder:
| |
| | |
| * <code>File</code> -> <code>Open Folder</code>
| |
| * Navigate to <code>~/kde/src/dolphin</code> and press <code>OK</code>
| |
| | |
| {{Info|Along the bottom of the window are buttons to configure, build, run, debug, etc.}}
| |
