szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[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.


<code javascript .vscode/extensions.json>
{
    "recommendations": [
        "kvcvc.sequelize-snippets",
        "benitezdouglas.express-faster",
        "raxraj.simple-express-snippets",
        "mnick.express-snippet",
        "areatomic.express-snippet-areatomic",
        "expresssnippets.vscode-express-snippets"
    ]
}
</code>
===== Bővítmények készítése =====

Példa:

<code javascript package.json>
{
  "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"
  }
}
</code>


<code javascript snippets/snippets.json>
{
    "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"        
    }
}
</code>


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:

<code javascript .vscode/launch.json>
{
    "version": "1.0.0",
    "configurations": [
        {
            "name": "Launch Extension",
            "type": "extensionHost",
            "request": "launch",
            "runtimeExecutable": "${execPath}",
            "args": ["--extensionDevelopmentPath=${workspaceRoot}" ]
        }
    ]
}
</code>


  * 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 ====

<code javascript .vscode/tasks.json>
{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "vsce package build",
            "type": "shell",
            "command": "vsce package --out dist/",
            "problemMatcher": []
        }
    ]
}
</code>

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 <Enter>
    * 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: 
  <input type="text" ...>
  

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