Felhasználói eszközök

Eszközök a webhelyen


oktatas:programozas:programok:visual_studio_code

< Programok

Visual Studio Code

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:

Beszerzés

Látogassuk meg a következő weboldalt:

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

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.

.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"
    ]
}

Bővítmények készítése

Példa:

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"
  }
}
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"        
    }
}

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:

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:

.vscode/launch.json
{
    "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

.vscode/tasks.json
{
    "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 <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

oktatas/programozas/programok/visual_studio_code.txt · Utolsó módosítás: 2024/08/06 13:43 szerkesztette: admin