[[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 ===== 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)