< Programok

Visual Studio Code

Szerző: Sallai András

Copyright © 2020, Sallai András

Szerkesztve: 2023, 2024

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

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.

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

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

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:

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

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

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)