Tartalomjegyzék

< 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ő:

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

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:

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:

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:

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 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:

Gyorsbillentyűk

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:

Új fájl:

Új branch:

Visszavonás:

Változások megtekintése:

Egyesítés:

Publikálás:

The extension 'GitHub' wants to sign in using GitHub.

[Cancel] [Allow]

Klónozás:

Linkek