[[oktatas:programozás:programok|< Programok]] ====== Visual Studio Code ====== * **Szerző:** Sallai András * Copyright (c) 2020, Sallai András * Szerkesztve: 2023, 2024 * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]] * Web: https://szit.hu ===== Bevezetés ===== A **Visual Studio Code** többplatformos, nyílt forráskódú kódszerkesztő program, amit a Microsoft fejleszt. Röviden **VSCode** néven szokás emlegetni. Elérhető: * macOS * Linux * Windows Intelligens kódkiegészítés, hiba keresés Git támogatás beépítve használhatjuk. Bővítmények segítségével, szinte bármilyen programozási feladathoz használható. A Java névtérben van egy bővebb leírás a Visual Studo Code-ról: * [[oktatas:programozas:java:java_fejlesztoi_koernyezet_kialakitasa:visual_studio_code|VSCode]] ===== Beszerzés ===== Látogassuk meg a következő weboldalt: * https://code.visualstudio.com/ Linuxon keressük meg a .deb Debian Ubuntu ... feliratú gombot. Rövid várakozás után, a következő állomány töltődik (2020 februári állapot): * code_1.42.1-1581432938_amd64.deb Windowson értelemszerűen a Windowsos verziót, vagy nézzük meg lentebb a choco paranccsal telepítést. ===== Telepítés ===== ==== Windows ==== Ha telepítve van a Chocolatey csomagkezelő, telepíthető így: choco install vscode ==== Debian alapú Linux ==== Letöltés után, lépjünk be abba a könyvtárba, ahova letöltöttük, majd adjuk ki a következő parancsot: dpkg -i code*.deb A Visual Studio Code rövid időn belül telepszik. Indítható a Start > Programozás menüpontból. ===== Segítség a használathoz ===== * https://code.visualstudio.com/docs/ ===== Parancssor ===== Szimpla indítás: code Indítás az aktuális könyvtárral: code . A projekt01 könyvtárral indítás: code projekt01 Segítség: code --help ===== Bővítmények telepítése .vsix csomagból ===== A bővítmények telepíthetők állományból is. A bővítmény állományok kiterjesztése: * .vsix Telepítés parancssorból: code --install-extension my-extension-0.0.1.vsix VSCode-on belül, ha az oldalsávon látjuk a .vsix fájlt: * Oldalsáv > Explorer > (Projekt nézet) * jobb egér a .vsix nevű fájlon * Install Extensison VSIX ===== Bővítmények ajánlása ===== Készítünk a projektünkbe a egy .vscode/extensions.json állományt. Írjuk le benne az ajánlott függőségeket. { "recommendations": [ "kvcvc.sequelize-snippets", "benitezdouglas.express-faster", "raxraj.simple-express-snippets", "mnick.express-snippet", "areatomic.express-snippet-areatomic", "expresssnippets.vscode-express-snippets" ] } ===== Bővítmények készítése ===== Példa: { "name": "exapi-snippets", "version": "0.0.1", "description": "exapi snippets", "displayName": "Exapi Snippets", "publisher": "andteki", "icon": "images/exapi.png", "license": "MIT", "repository": { "type": "git", "url": "https://github.com/oktat/vscode-exapi-snippets" }, "categories": [ "Snippets" ], "engines": { "vscode": "^1.22.0" }, "contributes": { "snippets": [ { "language": "javascript", "path": "snippets/snippets.json" } ] }, "scripts": { "build": "vsce package" } } { "databaseSablon": { "prefix": "db", "body": [ "Valami", "Más valami", "", "Harmadik" ], "description": "Adatbázis beszúrás" }, "modelSablon": { "prefix": "mod", "body": [ "Model lesz", "Per", "", "Harmadik" ], "description": "Model beszúrás" } } Csomag készítéshez: npm install -g vsce Csomag készítése: vsce package Csomag készítése célkönyvtárral: vsce package --out dist/ Telepítés parancssorból: code --install-extension my-extension-0.0.1.vsix VSCode-on belül: * Oldalsáv > Explorer > (Projekt nézet) * jobb egér a .vsix nevű fájlon * Install Extensison VSIX Példa: * https://github.com/oktat/vscode-exapi-snippets.git ==== Futtatás ==== A bővítményeket a fejlesztés során kipróbálhatjuk. Ehhez készítsünk egy .vscode/launch.json fájlt. Tartalma: { "version": "1.0.0", "configurations": [ { "name": "Launch Extension", "type": "extensionHost", "request": "launch", "runtimeExecutable": "${execPath}", "args": ["--extensionDevelopmentPath=${workspaceRoot}" ] } ] } * Az akciósávon "Run and debug" ikon * Ha ki van választva a "Launch Extension" a lejátszás gombra kattintunk Az előugró VSCode ablakban tetszőleges helyen nyissunk egy fájl, olyan kiterjesztéssel, amihez készült a bővítmény, majd mehet a próba. Ha javítunk a kódon, újra kell indítani az akciósávon a futtatást. ==== Csomag készítése task-kal ==== { "version": "2.0.0", "tasks": [ { "label": "vsce package build", "type": "shell", "command": "vsce package --out dist/", "problemMatcher": [] } ] } Utána menüből: * Terminal > Run Task... ===== Gyorsbillentyűk ===== * Sor duplázása * Debian GNU/Linuxon: Ctr+Shift+Alt + Num 2 * Beállítás: * File > Preferences > Keyboard shortcuts * Keresőbe: Copy Line Down * Jobb oldalt van egy billentyűzet icon: "Record Keys" * Hozzáadjuk: Ctrl+D * Kód formázás: Ctlr + Shift + I * Osztály, interfész forrásának megtekintése: F12 * Több kurzor ugyanazon szavakhoz. * A szó végére állok, de ki is jelölhetem: Ctrl + Shift + L * Ctrl + T * Beírjuk JFrame * Megmutatja milyen modulban van, milyen csomagban. * Ctrl + Shift + F10 * Hogyan van definiálva egy szimbólum: * Szövegkurzort szimbólumra állítjuk. * Példa: JFrame.EXIT_ON_CLOSE * * F12 - Konkrétan megnyitja a fájlt, ahol a szimbólum meg van határozva. * Shift+F12 - Ugrás hivatkozáshoz * Shift+Alt+F12 - Összes hivatkozás * Alt+Up - egy sor fel * Alt+Down - egy sor le * F2 - Szimbólum átnevezése * F1 - parancspanel * Ctrl+Shift+L - Minden előfordulásnál kurzor * Ctrl+D - kijelöli a következő azonos nevet ===== Lehetőségek ===== * Híváshierarchia megjelenítése * Egy metódus felett jobb egér Peek * Peek Call Hiearchy * Melyik Java-t használja: * F1 (Ctrl + Shift + P) * Intall New JDK * Oszlopkijelölés: * Alt+Shift+kattintás és kurzor * new * Beírom new és akkor lehetőségem lesz új objektumot készítenem. * Tab - lépegetés ===== HTML ===== Rövidítés: p*4>lorem tr*4>td*2>lorem Két osztály megadására példa: div.field.input Input elem típusának megadása: input:text Az eredménye: ===== Git ===== Ha megnyitottunk egy könyvtárat, kattintsunk a következőre: * Source Control * [Initialize Respository] * A bal alsó sarokban látjuk **main** nevet, ez a főűgunk. * Ág átnevezése: * F1: Git: Rename Branch... Új fájl: * Ha létrehozunk egy új fájlt, egy **U** betű jelenik meg mellette, a SOURCE CONTROL nézetben. * Ez jelezi, hogy nem követett fájlról van szó. * Vigyük a fájlnév felé az egérmutatót. * Kattintsunk a megjelenő **+** jelre. * Ekkor követett állapotba kerül. * Állományunk stage állapotban van (a színpadon van). * A commit-hoz a SOURCE CONTROL nézetben a "Message (ctrl+Enter to commit on "main") mezőben: * Írjuk be a commit szövegét. * A bevitelimező felett, kattintsunk a pipára. * Vagy alatta lévő gombon "Commit" gombra. Új branch: * F1 * Git: Create Branch... * beírjuk az új branch nevét. * Adjunk az állományunkhoz új tartalmat. * A szerkesztő bal oldalán (a gutteren) látszik * egy zöld függőleges vonal - új rész lett hozzáadva * piros nyílhegy - törölt sorokat mutatja * kék vonal - ha egy sort megváltoztattunk Visszavonás: * A SOURCE CONTROL nézetben * a fájl neve mellett * Első visszavonás a fájlon belül * Második visszavonás minden fájlra vonatkozik Változások megtekintése: * A SOURCE CONTROL nézetben kattintsunk a fájl nevére. * Egyetlen fájlban megtekintés: * Jobb felső sarokban a gomb, amit 3 gomb van: ... * Inline view Egyesítés: * SOURCE CONTROL REPOSITORIES nézet * Az utolsó ikon ... * Branch > Merge ... Publikálás: * [Publish Branch] The extension 'GitHub' wants to sign in using GitHub. [Cancel] [Allow] Klónozás: * F1 * Git: Clone * ===== Linkek ===== * https://code.visualstudio.com/docs/editor/userdefinedsnippets (2023) * https://github.com/microsoft/vscode-extension-samples (2023)