Hogyan készítsd el az első saját Visual Studio Code kiegészítődet?

Üdvözöllek, leendő kiegészítő fejlesztő! Készen állsz arra, hogy a Visual Studio Code élményedet a következő szintre emeld? Tudtad, hogy a VS Code nem csak egy kiváló kódszerkesztő, hanem egy rendkívül rugalmas platform is, amely lehetővé teszi, hogy saját igényeidre szabd, sőt, teljesen új funkciókkal bővítsd? Ha valaha is elgondolkodtál azon, hogyan tehetnéd hatékonyabbá a mindennapi munkádat, vagy egyszerűen csak szereted a technológia mélyebb rétegeibe belevetni magad, akkor ez a cikk neked szól! Vágjunk is bele, és nézzük meg, hogyan készítheted el az első saját Visual Studio Code kiegészítődet a nulláról a publikálásig.

Miért érdemes saját VS Code kiegészítőt fejleszteni?

A Visual Studio Code már önmagában is tele van hasznos funkciókkal, de az igazi ereje a kiterjeszthetőségében rejlik. Milliók használják nap mint nap, és mindenkinek megvannak a maga egyedi munkafolyamatai és preferenciái. Lehet, hogy hiányzik egy speciális formázási szabály, egy gyors parancs egy gyakran ismételt feladathoz, vagy egy teljesen új nyelvi támogatás. Saját kiegészítő fejlesztésével:

Optimalizálhatod a munkafolyamatodat: Automatizálhatsz unalmas feladatokat, vagy egyedi eszközöket hozhatsz létre, amelyek pontosan illeszkednek a te igényeidhez.
Hozzájárulhatsz a közösséghez: Lehet, hogy a te problémád másokat is érint, és a megoldásod rengeteg fejlesztő életét könnyítheti meg.
Tanulhatsz és fejlődhetsz: A kiegészítő fejlesztés kiváló módja annak, hogy elmélyítsd a JavaScript/TypeScript tudásodat, és megismerkedj a modern API-k használatával.
Testreszabhatóság: A VS Code-ot a saját képedre formálhatod, olyan funkciókkal, amelyek máshol nem elérhetők.

A lehetőségek szinte végtelenek, és az első lépés megtétele sokkal könnyebb, mint gondolnád.

Előfeltételek: Mire lesz szükséged?

Mielőtt belevetnénk magunkat a kódolásba, győződjünk meg róla, hogy minden szükséges eszköz rendelkezésre áll. Szerencsére nem sok mindenre lesz szükségünk:

Visual Studio Code: Ez magától értetődő, de fontos, hogy a legfrissebb verzió legyen telepítve.
Node.js és npm: A VS Code kiegészítők fejlesztése Node.js alapú, így szükséged lesz a Node.js futtatókörnyezetre és az npm csomagkezelőre. Ezeket egyben tudod telepíteni a hivatalos Node.js weboldalról. Ellenőrizd a telepítést a node -v és npm -v parancsokkal a terminálban.
Alapvető JavaScript vagy TypeScript ismeretek: A legtöbb VS Code kiegészítő TypeScript nyelven íródik, ami egy erősen típusos JavaScript szuperhalmaz. Ha ismersz JavaScriptet, a TypeScript-re való áttérés nem okoz majd nagy gondot.

Ha ezekkel megvagy, készen állsz a folytatásra!

A fejlesztési környezet előkészítése: Generátor telepítése

Ahhoz, hogy ne a nulláról kelljen minden egyes kiegészítő projektet felépíteni, a Microsoft fejlesztett egy nagyszerű eszközt, a Yeoman generátort. Ez automatikusan létrehozza a kiegészítő alapvető fájlstruktúráját és a szükséges konfigurációkat. Telepítsd a Yeoman-t és a VS Code kiegészítő generátorát globálisan az alábbi npm paranccsal:

npm install -g yo generator-code

Ez a parancs telepíti a yo parancssori eszközt és a generator-code csomagot, ami a VS Code kiegészítő sablonokat tartalmazza.

Az első kiegészítő generálása

Most, hogy minden a helyén van, generáljuk le az első kiegészítőnket! Nyiss meg egy terminált, és navigálj abba a mappába, ahol a projektjeidet tárolni szeretnéd. Ezután futtasd a következő parancsot:

yo code

A Yeoman generátor interaktív módon fog kérdéseket feltenni neked, hogy létrehozza a projektet. A legtöbb esetben érdemes a következőket választani egy egyszerű, parancsalapú kiegészítőhöz:

What type of extension do you want to create? Válassza a New Extension (TypeScript) opciót. Ez a leggyakoribb és leginkább ajánlott kiindulási pont.
What’s the name of your extension? Adj egy rövid, egyedi nevet a kiegészítődnek (pl. my-first-extension). Ez lesz a mappa neve és a name mező a package.json-ban.
What’s the display name of your extension? Ez egy felhasználóbarát név, ami megjelenik a Marketplace-en (pl. My First VS Code Extension).
What’s the description of your extension? Írj egy rövid leírást arról, mit csinál a kiegészítőd.
Initialize a git repository? Válaszd az Igen-t, ha Git-et használsz.
Do you want to run `npm install`? Válaszd az Igen-t, hogy telepítse a szükséges függőségeket.

Miután a generátor befejezte a munkát, létrejön egy új mappa a megadott névvel. Nyisd meg ezt a mappát a VS Code-ban (File > Open Folder... vagy code . a terminálban).

A generált projekt szerkezete

Nézzük meg, mi is rejtőzik az újonnan generált mappában:

package.json: Ez a kiegészítő „személyi igazolványa”. Itt találhatók a metaadatok, függőségek és a kiegészítő funkcióinak deklarációi. A package.json a kulcs a VS Code számára, hogy felismerje és betöltse a kiegészítődet.
src/extension.ts: Ez a kiegészítő szíve. Itt lesz a TypeScript kódod, amely implementálja a kiegészítő logikáját. A VS Code ezt a fájlt (lefordítva JavaScriptre) futtatja, amikor a kiegészítő aktiválódik.
tsconfig.json: A TypeScript fordító konfigurációs fájlja. Meghatározza, hogyan fordítsa le a TypeScript fájljaidat JavaScriptre.
.vscode/launch.json: Ez a fájl a hibakeresési (debugging) konfigurációkat tartalmazza. Ennek segítségével tudod futtatni és hibakeresni a kiegészítődet egy speciális VS Code ablakban.
.vscode/tasks.json: Build scripteket tartalmaz, például a TypeScript fordításhoz.
README.md: Egy alapvető leírás a kiegészítődhöz. Ezt érdemes részletesen kitölteni a későbbi publikálás előtt.
CHANGELOG.md: A kiegészítő változásnaplója.
vsc-extension-quickstart.md: Egy gyors útmutató, amit a generátor készít, hasznos linkekkel és tippekkel.

Mélységi elemzés: a `package.json`

A package.json fájl a legfontosabb deklarációs felület. Nézzük meg a kulcsfontosságú részeit:

{
    "name": "my-first-extension",
    "displayName": "My First VS Code Extension",
    "description": "A simple 'Hello World' extension for VS Code.",
    "version": "0.0.1",
    "publisher": "YourPublisherName", // Ezt érdemes beállítani!
    "engines": {
        "vscode": "^1.80.0" // A támogatott VS Code verzió tartománya
    },
    "categories": [
        "Other"
    ],
    "activationEvents": [ // Mikor aktiválódjon a kiegészítő?
        "onCommand:my-first-extension.helloWorld"
    ],
    "main": "./out/extension.js", // A belépési pont a lefordított JS fájl
    "contributes": { // Itt deklaráljuk a kiegészítő képességeit
        "commands": [
            {
                "command": "my-first-extension.helloWorld",
                "title": "Hello World"
            }
        ]
    },
    "scripts": {
        "vscode:prepublish": "npm run compile",
        "compile": "tsc -p ./",
        "watch": "tsc -watch -p ./",
        "pretest": "npm run compile && npm run lint",
        "lint": "eslint src --ext ts",
        "test": "node ./out/test/runTests.js"
    },
    "devDependencies": {
        // ... (fejlesztési függőségek)
    }
}

name, displayName, description, version: Alapvető metaadatok.
publisher: Nagyon fontos! Ez az azonosító lesz, amit a Marketplace-en használsz. Még ha nem is publikálod, érdemes valami egyedit megadni (pl. a GitHub felhasználónevedet).
engines.vscode: Meghatározza, mely VS Code verziókkal kompatibilis a kiegészítőd.
categories: Segít a felhasználóknak megtalálni a kiegészítődet a Marketplace-en.
activationEvents: Ez mondja meg a VS Code-nak, hogy mikor töltse be és aktiválja a kiegészítődet. A "onCommand:..." azt jelenti, hogy akkor aktiválódik, ha a felhasználó lefuttatja a megadott parancsot. Más lehetőségek is vannak (pl. fájl megnyitásakor, VS Code indításakor).
main: Ez mutat a lefordított JavaScript belépési pontjára (általában out/extension.js).
contributes: Ez a legfontosabb rész! Itt deklarálhatod, hogy milyen képességeket kínál a kiegészítőd. Ide tartoznak a parancsok, billentyűparancsok, menüpontok, konfigurációk, nyelvi támogatás, és még sok más.
- contributes.commands: Itt deklaráljuk a kiegészítőnk által biztosított parancsokat. Minden parancsnak van egy egyedi command azonosítója (ezt használjuk az activationEvents-ben és a kódban), és egy title-je, ami megjelenik a parancspalettán.

A kiegészítő logikája: a `extension.ts`

Most, hogy deklaráltuk a kiegészítőnk képességeit a package.json-ban, ideje implementálni a logikát a src/extension.ts fájlban. A generátor már létrehozott egy alap „Hello World” mintát:

import * as vscode from 'vscode';

// Ez a függvény aktiválódik, amikor a kiegészítőd aktiválódik.
// Az 'activationEvents'-ben definiált események hívják meg.
export function activate(context: vscode.ExtensionContext) {

    // Használja a konzolt (Developer Tools -> Console) a diagnosztikai adatokhoz
    console.log('Congratulations, your extension "my-first-extension" is now active!');

    // A parancs implementációját itt adjuk meg.
    // A 'commandId' meg kell egyezzen a package.json-ban deklarált 'command' azonosítóval.
    let disposable = vscode.commands.registerCommand('my-first-extension.helloWorld', () => {
        // Itt van a logika, ami a parancs futtatásakor végrehajtódik.
        vscode.window.showInformationMessage('Hello World from My First VS Code Extension!');
    });

    context.subscriptions.push(disposable);
}

// Ez a függvény aktiválódik, amikor a kiegészítő inaktiválódik.
export function deactivate() {}

import * as vscode from 'vscode';: Ez importálja a VS Code API-t, ami hozzáférést biztosít a szerkesztő összes funkciójához (ablakok, dokumentumok, parancsok stb.).
activate(context: vscode.ExtensionContext): Ez a függvény akkor fut le, amikor a kiegészítőd aktiválódik (a package.json activationEvents-jében definiált események alapján). Minden erőforrást itt kell inicializálni. A context objektum hasznos a kiegészítő élettartamának kezeléséhez (pl. eldobható objektumok hozzáadásához).
vscode.commands.registerCommand(...): Ez a függvény regisztrálja a parancsunkat a VS Code számára. Az első argumentum a package.json-ban deklarált parancs azonosítója (my-first-extension.helloWorld). A második argumentum egy callback függvény, amely akkor fut le, amikor a felhasználó meghívja a parancsot.
vscode.window.showInformationMessage(...): Ez a VS Code API függvény egy egyszerű információs üzenetet jelenít meg a VS Code ablakának alján.
context.subscriptions.push(disposable);: Fontos, hogy a regisztrált parancsot (vagy bármilyen más eldobható erőforrást) hozzáadd a context.subscriptions-hoz. Ez biztosítja, hogy amikor a kiegészítő deaktiválódik, az erőforrásaidat megfelelően takarítsa fel a rendszer.
deactivate(): Ez a függvény akkor fut le, amikor a kiegészítőd deaktiválódik (pl. a VS Code bezárásakor, vagy ha a felhasználó letiltja a kiegészítőt). Itt kell felszabadítani azokat az erőforrásokat, amelyekre már nincs szükség, vagy amik nem voltak automatikusan felszabadítva.

A kiegészítő futtatása és hibakeresése

Most, hogy van egy működő kiegészítőnk (még ha csak egy egyszerű „Hello World” is), futtassuk és teszteljük!

Nyisd meg a kiegészítő projektet a VS Code-ban.
Nyomd meg az F5 billentyűt (vagy válaszd a Run > Start Debugging menüpontot).
Ez megnyit egy új VS Code ablakot, az úgynevezett Extension Development Host-ot. Ez egy teljesen elkülönített környezet, ahol a kiegészítőd fut.
Ebben az új ablakban nyisd meg a parancspalettát (Ctrl+Shift+P vagy Cmd+Shift+P).
Kezdj el gépelni Hello World, és látni fogod a kiegészítőd parancsát: Hello World from My First VS Code Extension.
Válaszd ki a parancsot, és egy információs üzenetnek kell megjelennie az ablak alján.

A hibakeresés is rendkívül egyszerű. Helyezz el egy töréspontot (breakpointet) a src/extension.ts fájlban, a vscode.window.showInformationMessage sor elé. Futtasd újra az F5-tel, és amikor a parancs aktiválódik, a végrehajtás megáll a törésponton. Ekkor átlépkedhetsz a kódon, ellenőrizheted a változók értékét, és nyomon követheted a kód működését, pont úgy, mint bármely más alkalmazásnál.

Továbbfejlesztés: Mit tehetünk még?

A „Hello World” csak a kezdet! A VS Code API hatalmas, és rengeteg lehetőséget kínál:

Parancsok és menüpontok: Hozhatsz létre komplexebb parancsokat, amelyek fájlokat módosítanak, API hívásokat indítanak, vagy interakcióba lépnek más VS Code funkciókkal.
Snippettek: Gyors kódrészleteket adhatsz hozzá, amelyek megkönnyítik a gyakran használt kódblokkok beillesztését.
Kulcskötések (Keybindings): Egyedi billentyűparancsokat rendelhetsz a kiegészítőd parancsaihoz.
Konfiguráció (Settings): Lehetővé teheted a felhasználóknak, hogy testreszabják a kiegészítőd működését a VS Code beállításai között.
Webview-ok: Teljesen egyedi felhasználói felületet hozhatsz létre HTML, CSS és JavaScript segítségével a VS Code ablakon belül.
Nyelvi szerkesztő funkciók: Hozzáadhatsz szintaxiskiemelést, automatikus kiegészítést (IntelliSense), hibajelzéseket, refactoring eszközöket egy adott nyelvhez.
Fájlkezelés és munkaterület-manipuláció: Hozzáférhetsz a VS Code aktuális munkaterületéhez, és módosíthatod a fájlokat.

Javaslom, hogy fedezd fel a VS Code API dokumentációt, hogy lásd, milyen hatalmas lehetőségek rejlenek benne.

A kiegészítő publikálása a Marketplace-re

Ha elkészültél a kiegészítőddel és szeretnéd megosztani a világgal, publikálhatod a Visual Studio Code Marketplace-en. Ez egy nagyszerű módja annak, hogy más fejlesztők is megtalálják és használják a munkádat.

Előfeltételek a publikáláshoz:

Publisher fiók létrehozása:
- Látogass el az Azure DevOps Organizations oldalra.
- Hozz létre egy ingyenes Azure DevOps szervezetet (ha még nincs).
- Miután létrejött, kattints a Create a publisher gombra a Marketplace-en. Adj egy egyedi nevet, ami megegyezik a package.json fájlban megadott publisher értékkel.
Személyes hozzáférési token (PAT) generálása:
- Az Azure DevOps szervezetedben kattints a jobb felső sarokban a felhasználói ikonodra, majd válaszd a Personal access tokens menüpontot.
- Hozzon létre egy új tokent (New Token).
- Adjon neki egy leíró nevet (pl. „VS Code Extension Publishing Token”).
- Válaszd ki a szervezetet (All accessible organizations vagy a te konkrét szervezetedet).
- A Scopes alatt válassza a Custom defined opciót.
- Keresd meg a Marketplace kategóriát, és jelöld be a Manage (kezelés) opciót.
- Hozd létre a tokent, és mentse el a megjelenő tokent egy biztonságos helyre, mert utána már nem fogod látni!
vsce eszköz telepítése:
Ez a parancssori eszköz (Visual Studio Code Extension) segít a kiegészítő csomagolásában és publikálásában. Telepítsd globálisan:
```
npm install -g vsce
```

A kiegészítő csomagolása és publikálása:

Navigálj a projekt mappájába: Győződj meg róla, hogy a kiegészítőd mappájában vagy a terminálban.
Jelentkezz be (opcionális, de ajánlott):
```
vsce login <publisher_name>
```
A rendszer kéri a PAT tokent.
Csomagolás (ellenőrzéshez):
Létrehozhatsz egy .vsix fájlt, ami a kiegészítőd telepíthető csomagja. Ezt kézzel is telepítheted a VS Code-ba (Extensions nézet -> ... menü -> Install from VSIX...).
```
vsce package
```
Ez futtatja a vscode:prepublish scriptet is a package.json-ból, ami lefordítja a TypeScript kódot.
Publikálás:
Most jöhet a publikálás a Marketplace-re. A -p kapcsolóval adhatod meg a PAT tokent, amit korábban generáltál.
```
vsce publish -p <A_GENERÁLT_PAT_TOKENED>
```
Fontos: A publikálás előtt ellenőrizd a package.json version mezőjét! Minden publikáláskor növelni kell a verziószámot (pl. 0.0.1 -> 0.0.2), különben hibát kapsz.

Gratulálunk! A kiegészítőd mostantól elérhető a Visual Studio Code Marketplace-en. Eltarthat egy kis ideig, amíg megjelenik a keresési eredmények között.

Gyakori hibák és tippek

package.json érvényessége: Győződj meg róla, hogy minden szükséges mező ki van töltve, különösen a publisher és az activationEvents.
Verziószám: Mindig növeld a verziószámot a package.json-ban, mielőtt újra publikálod.
activationEvents helyes beállítása: Csak akkor aktiváld a kiegészítőt, amikor feltétlenül szükséges, hogy ne lassítsa le a VS Code indítását.
README.md: Írj egy átfogó, jól formázott README.md fájlt. Ez lesz az első, amit a felhasználók látnak a kiegészítődről a Marketplace-en. Tartalmazzon leírást, telepítési útmutatót, használati példákat, és akár képernyőfotókat is.
Aszinkron műveletek: A VS Code API számos függvénye aszinkron. Használj async/await-et vagy Promise-eket a megfelelő kezeléshez.
Hibakezelés: Implementálj robusztus hibakezelést, hogy a kiegészítőd stabil maradjon.
Teljesítmény: Optimalizáld a kiegészítődet a jó teljesítmény érdekében. Kerüld a felesleges CPU- vagy memóriaigényes műveleteket.

Záró gondolatok

Láthatod, hogy az első Visual Studio Code kiegészítő elkészítése nem is olyan bonyolult, mint amilyennek elsőre tűnik. Ezzel az útmutatóval a kezedben már el is indultál a fejlesztés útján, és remélem, hogy inspirációt nyertél ahhoz, hogy további ötleteket valósíts meg. A VS Code közössége hatalmas és támogató, ne habozz kérdezni, ha elakadsz, vagy megosztani a munkádat, ha elkészültél vele. A te egyedi kiegészítőd lehet a következő nagy dolog, ami több ezer fejlesztő életét könnyíti meg! Sok sikert a kódoláshoz!