• 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

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

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