|
|
| (24 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 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 <code>.vscode</code>.
| |
| | |
| 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:
| |
| | |
| {{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>}}
| |
| | |
| ===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:
| |
| | |
| | |
| {{Input|1=<nowiki>
| |
| "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}",
| |
| },
| |
| </nowiki>}}
| |
| | |
| ==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.}}
| |
