• Szerző: Sallai András
• Copyright © 2020, Sallai András
• Szerkesztve: 2023, 2024
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

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:

• VSCode

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.

Ha telepítve van a Chocolatey csomagkezelő, telepíthető így:

choco install vscode

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.

• https://code.visualstudio.com/docs/

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

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

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

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:

• https://github.com/oktat/vscode-exapi-snippets.git

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.

.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…

• 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

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

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

• https://code.visualstudio.com/docs/editor/userdefinedsnippets (2023)
• https://github.com/microsoft/vscode-extension-samples (2023)