5. Hasznos VS Code-kiegészítők

A fejezet végén tudni fogod

telepíteni, letiltani és eltávolítani bővítményeket — felületről és parancssorból;
eldönteni egy bővítményről, hogy megbízható és valóban ingyenes-e;
beállítani a projekt ajánlott bővítményeit (.vscode/extensions.json);
melyek a Node.js backend-fejlesztés hasznos bővítményei, és pontosan mire valók;
melyik bővítményre nincs szükség, mert a VS Code vagy a Node már tudja azt a funkcionalitást;
miért kerüljük a freemium eszközöket, és mi az ingyenes alternatívájuk;
profilokkal külön környezetet készíteni, és megkeresni a lassulást okozó bővítményt.

HOL TARTUNK?

A 4. fejezetben már beállítottuk a szerkesztőt, és feltettük azt a négy bővítményt, ami nélkül a beállítások nem működnek: ESLint, Prettier, EditorConfig, DotENV. Most ezekre építünk: jön a többi hasznos eszköz, és — ami legalább ilyen fontos — a válogatás módszere.

1Miért fontos a válogatás?

A Marketplace-en több tízezer bővítmény van, és kezdőként csábító lehet mindet feltenni, ami hasznosnak tűnik. Ez azonban visszaüthet:

Ha túl sok bővítményed van…	Mi történik?
Lassul az indulás	Minden bővítmény betöltődik. 40 fölött ez már másodpercekben mérhető
Ütköznek egymással	Két formázó ugráltatja a kódot, két kiegészítő duplán ajánlgat
Elveszik a figyelem	Tíz különböző színes jelölés a kódban — egyik sem tűnik ki
Nő a támadási felület	Minden bővítmény kódot futtat a gépeden, és hozzáfér a fájljaidhoz

ÖKÖLSZABÁLY

Ha egy bővítményt egy hónapja nem használtál, tiltsd le. A 10–15 aktív bővítmény bőven elég; 40 fölött már érezhetően lassul a szerkesztő.

1. ábra — Felülről lefelé egyre kevésbé fontos. A legalsó réteget kerüld el.

2Bővítmények kezelése

Telepítés — három út

Felületről: Ctrl + Shift + X → keresés → Install.
Parancssorból — ha több gépre kell ugyanaz, ez a leggyorsabb:
```
code --install-extension dbaeumer.vscode-eslint
```
A parancs a bővítmény azonosítóját várja (kiadó.név), nem a megjelenő nevét. Az azonosítót a Marketplace-oldalon vagy a bővítmény adatlapján találod.
Ajánlásból: ha a projektben van .vscode/extensions.json, a VS Code a mappa megnyitásakor felajánlja a telepítést.

A fontos műveletek

Művelet	Hol?	Mikor használd?
Letiltás mindenhol	Bővítmény → Disable	Ideiglenesen nem kell, de nem akarod eldobni a beállításait
Letiltás csak ebben a projektben	Bővítmény → Disable (Workspace)	Ütközik valamivel ebben a projektben, máshol viszont jó
Eltávolítás	Bővítmény → Uninstall	Végleg nem kell
Beállítások	Fogaskerék → Extension Settings	A bővítmény saját kulcsait itt találod egy helyen
Korábbi verzió	Fogaskerék → Install Another Version…	Egy frissítés után elromlott valami
Automatikus frissítés	Kiegészítők nézet → `…` menü → Auto Update	Vizsgaidőszakban hasznos kikapcsolni: nem változik alattad a környezet

TIPP — ne távolíts el azonnal

Ha egy bővítmény „elromlik” egy frissítés után, először próbáld az Install Another Version… menüpontot: visszaállíthatsz egy korábbi, működő verziót. Sokszor pár nap múlva jön a javítás.

Az ajánlott bővítmények fájlja

Ezt a fájlt érdemes minden projektbe beletenni. Aki megnyitja a mappát, egy értesítést kap, és egyetlen kattintással telepítheti a szükséges bővítményeket:

// .vscode/extensions.json
{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "EditorConfig.EditorConfig",
    "mikestead.dotenv",
    "Prisma.prisma",
    "humao.rest-client"
  ],
  "unwantedRecommendations": []
}

Kulcs	Érték	Mit csinál?
`recommendations`	azonosítók tömbje	Ezeket ajánlja fel a VS Code a projekt megnyitásakor. Nem telepít semmit automatikusan — a döntés a felhasználóé.
`unwantedRecommendations`	azonosítók tömbje	Ezeket viszont NE ajánlja. Akkor hasznos, ha a VS Code magától javasolna egy bővítményt, amit ti szándékosan nem használtok (például egy másik formázót).

3Hogyan válassz bővítményt?

VESZÉLY — a bővítmény kódot futtat a gépeden

Egy bővítmény hozzáfér a megnyitott fájljaidhoz, futtathat parancsokat, és akár hálózati kapcsolatot is nyithat. Egy hamis, „ESLint” nevű bővítmény elolvashatja a .env fájlod tartalmát — benne az adatbázis jelszavával. A Marketplace-re bárki feltölthet bővítményt; a név és az ikon másolható.

Ezért mielőtt telepítesz, nézz meg öt dolgot az adatlapon:

2. ábra — Az öt pont egy percbe kerül, és megspórolhat egy jelszócserét.

Mit nézz meg?	Jó jel	Rossz jel
Kiadó (publisher)	Ismert cég vagy a projekt hivatalos fejlesztője	Ismeretlen név, ami egy népszerű bővítményre hasonlít
Letöltésszám	Százezres, milliós nagyságrend	Pár száz — pedig „népszerű” eszközről lenne szó
Utolsó frissítés	Hónapokon belül	2-3 éve semmi (a VS Code közben sokat változott)
Licenc és ár	MIT, Apache, „free”	„Free trial”, „Pro”, „Sign in to continue”
Forráskód (repository)	Nyilvános GitHub-link	Nincs link — nem tudod ellenőrizni, mit csinál

FIGYELEM — a typosquatting

A támadók szándékosan hasonló nevű bővítményeket töltenek fel: egy betű eltérés a névben, ugyanaz az ikon, hasonló leírás. Ezért nem a nevet keresed, hanem az azonosítót ellenőrzöd: a dbaeumer.vscode-eslint az igazi ESLint, minden más nem az.

Telepítenéd?

Hat bővítmény-adatlap. Döntsd el mindegyikről, hogy feltennéd-e a gépedre! Nem mind egyértelmű — figyelj a részletekre.

1 / 6Helyes: 0

…

4Az alapcsomag — ismétlés ELENGEDHETETLEN

Ezt a négyet a 4. fejezetben már feltettük, mert nélkülük az ottani beállítások nem működnek. Itt csak összefoglaljuk őket — mind a négy ingyenes, teljes funkcionalitással.

Bővítmény	Azonosító	Mit ad?
ESLint	`dbaeumer.vscode-eslint`	Hibajelzés gépelés közben + mentéskori automatikus javítás
Prettier	`esbenp.prettier-vscode`	Ez a formázó, amelyre a `defaultFormatter` hivatkozik
EditorConfig	`EditorConfig.EditorConfig`	A `.editorconfig` szabályainak érvényesítése
DotENV	`mikestead.dotenv`	Szintaxiskiemelés a `.env` fájlokhoz

5Adatbázis és API A KURZUSHOZ KELL

Ez a három bővítmény a következő blokkokban lesz a napi eszközöd. Mind ingyenes, fiók nélkül, korlátozás nélkül.

Prisma

Prisma.prisma kiadó: Prisma · INGYENES

A schema.prisma fájlokhoz: szintaxiskiemelés, kódkiegészítés, hibajelzés, formázás (Shift+Alt+F) és ugrás a modellek között.

Miért kell? A Prisma-séma saját nyelv, nem JavaScript. Enélkül a szerkesztő csak szürke szöveget lát: nem szól, ha elgépeled egy mező típusát vagy elfelejtesz egy relációt — a hibát majd a prisma migrate parancs közli veled, jóval később.

Ehhez érdemes a formázót is beállítani, hogy a Prisma-fájloknál a Prisma bővítménye formázzon, ne a Prettier:

// .vscode/settings.json
"[prisma]": {
  "editor.defaultFormatter": "Prisma.prisma"
}

A "[prisma]" egy nyelvspecifikus blokk — csak a .prisma kiterjesztésű fájlokra vonatkozik. Ugyanez a szerkezet működik minden más nyelvre is ("[javascript]", "[markdown]").

REST Client

humao.rest-client kiadó: Huachao Mao · INGYENES, NYÍLT FORRÁSKÓDÚ

API-kérések küldése közvetlenül a szerkesztőből, egy egyszerű .http fájlból. Nem kell külön program, nem kell fiók — és a kérések a projekttel együtt verziókezelhetők.

Miért ezt? Mert a kérések így ugyanolyan fájlok, mint a kód: bekerülnek a verziókezelőbe, a munkatársad is megkapja őket, és nem vesznek el, ha új gépre ülsz.

Egy `.http` fájl felépítése

@host = http://localhost:3000          # változó — később {{host}} néven hivatkozunk rá

### Összes termék                      # a ### választja el a kéréseket
GET {{host}}/api/products
Accept: application/json

### Bejelentkezés
# @name login                            # nevet adunk a kérésnek
POST {{host}}/api/auth/login
Content-Type: application/json

{ "email": "teszt@pelda.hu", "password": "Titok123" }

### Védett végpont — az előző válaszból vett tokennel
GET {{host}}/api/orders
Authorization: Bearer {{login.response.body.token}}

Jelölés	Mit jelent?
`###`	Kérés-elválasztó. Minden `###` után új kérés kezdődik, és a VS Code fölé kiír egy Send Request gombot
`@nev = érték`	Változó definiálása. Így a kiszolgáló címét egy helyen kell átírni, ha vált a port
`{{nev}}`	Változó behelyettesítése a kérésbe
`# @name azonosito`	Nevet ad a kérésnek, hogy a válaszára később hivatkozni lehessen
`{{login.response.body.token}}`	Hivatkozás egy korábbi válasz mezőjére. Így nem kell kézzel másolgatni a tokent minden bejelentkezés után

TIPP — ez a rész a webshopnál lesz aranyat érő

A # @name login és a {{login.response.body.token}} páros miatt egyszer jelentkezel be, és utána az összes védett végpontot ki tudod próbálni. Kézi másolgatás nélkül.

SQLTools + MySQL-illesztő

mtxr.sqltools mtxr.sqltools-driver-mysql kiadó: Matheus Teixeira · INGYENES, NYÍLT FORRÁSKÓDÚ

Adatbázis-kapcsolat a szerkesztőből: táblák böngészése, SQL-lekérdezés futtatása, eredmény táblázatban. Két bővítmény kell hozzá: az alap és a MySQL-illesztő.

Miért kell? Amikor a Prisma ír az adatbázisba, jó látni, hogy tényleg az került-e bele, amit vártál. Enélkül külön programot kellene nyitogatni.

VESZÉLY — a jelszó a beállításokba kerülhet

A kapcsolat beállításánál az SQLTools a sqltools.connections kulcs alá menti az adatokat — és ha nem figyelsz, a jelszót is. Ha ez a projekt .vscode/settings.json fájljába kerül, a jelszó bekerül a verziókezelőbe.

Megoldás: a kapcsolatot felhasználói szinten hozd létre (ne a projektben), vagy a mentéskor válaszd, hogy a jelszót ne tárolja el — ekkor csatlakozáskor kéri el.

ALTERNATÍVA, HA GRAFIKUS FELÜLET KELL

Ha az SQLTools kevés: a DBeaver Community ingyenes és nyílt forráskódú, a MySQL Workbench szintén ingyenes. Ezek önálló alkalmazások, nem VS Code-bővítmények.

6Kódminőség és kényelem ERŐSEN AJÁNLOTT

Ezek nélkül is működik minden — de sokkal kényelmetlenebbül. Mind ingyenes.

Error Lens

usernamehw.errorlens INGYENES

A hibaüzenetet a sor mellé írja ki, közvetlenül a kódba — nem kell az egeret fölé vinni, és nem kell a Problémák panelt nézegetni.

Miért éppen kezdőknek jó? Mert az aláhúzott kód önmagában nem mondja meg, mi a baj. Az Error Lensszel az üzenet ott van a szemed előtt, tehát azonnal reagálsz — nem húzod tovább a hibát öt sorral lejjebb.

Code Spell Checker

streetsidesoftware.code-spell-checker INGYENES

Elgépelt szavakat jelez a kódban, a kommentekben és a szövegekben.

Miért fontos? Mert az elgépelt változónév a JavaScriptben nem szintaktikai hiba — csak undefined lesz belőle, és fél óra hibakeresés. A klasszikusok: lenght a length helyett, vagy recieve a receive helyett.

FIGYELEM — magyar szavak

A magyar változónevek és kommentek miatt rengeteg „hibát” fog jelezni. Ne kapcsold ki emiatt: a szót egy kattintással felveheted a projekt szótárába, és onnantól elfogadja. Ez a cSpell.words kulcs alá kerül — lásd a 11. szakaszt.

Path Intellisense · npm Intellisense

christian-kohler.path-intellisense christian-kohler.npm-intellisense INGYENES

Az első a fájlútvonalakat egészíti ki importáláskor, a második a package.json-ban szereplő csomagneveket.

Miért segít éppen nálunk? Mert ESM-ben a .js kiterjesztés kötelező, és a kézzel írt útvonal könnyen elgépelhető. Ha a szerkesztő felkínálja a fájlt, a kiterjesztés is helyesen kerül a helyére.

Todo Tree

Gruntfuggly.todo-tree INGYENES

Összegyűjti a kódban elszórt TODO: és FIXME: megjegyzéseket egy fába, az oldalsávra.

Miért hasznos? Fejlesztés közben természetes, hogy otthagysz egy // TODO: ide kell még validáció megjegyzést. A gond az, hogy két hét múlva nem emlékszel, hány ilyen van és hol. Ez a bővítmény egy listába szedi őket.

Git Graph

mhutchie.git-graph INGYENES, NYÍLT FORRÁSKÓDÚ

Az ágak és a commitok grafikus megjelenítése — sokkal érthetőbb, mint a parancssori git log.

Megjegyzés: a VS Code beépített forráskezelője (Ctrl+Shift+G) a napi munkához elég. A Git Graph akkor jön jól, amikor meg akarod érteni, mi történt az ágakkal.

7Megjelenés — ízlés szerint OPCIONÁLIS

Ezek egyike sem befolyásolja a kód működését. Mind ingyenes — de ha lassú a géped, elsőként ezeket kapcsold ki.

Bővítmény	Azonosító	Mit tud?
Material Icon Theme	`PKief.material-icon-theme`	Beszédes fájl- és mappaikonok — ránézésre látod, melyik a konfigurációs fájl
indent-rainbow	`oderwat.indent-rainbow`	Színezi a behúzási szinteket; mélyen ágyazott kódnál segít
Better Comments	`aaron-bond.better-comments`	Színes kommentek típus szerint: `// !` fontos, `// ?` kérdés, `// TODO` teendő
Peacock	`johnpapa.vscode-peacock`	Ablakonként más színű keret — ha egyszerre nyitva van a backend és a frontend, nem kevered össze
Import Cost	`wix.vscode-import-cost`	Kiírja az import mellé, mekkora a behúzott csomag
markdownlint	`DavidAnson.vscode-markdownlint`	Markdown-fájlok ellenőrzése — a `README.md` írásához
Live Share	`MS-vsliveshare.vsliveshare`	Közös szerkesztés valós időben — páros feladatokhoz, segítségkéréshez

EGY GONDOLAT A SZÍNEKRŐL

Ha egyszerre használod az Error Lenst, az indent-rainbow-t és a Better Commentst, a kódod többféle színkódolást kap egyszerre. Ilyenkor egyik sem éri el a célját — pont az veszik el, amit észre kellene venned. Válassz kettőt, ne mind a hármat.

8Bővítmények, amelyekre nincs szükség

Sok — akár néhány éves — oktatóanyag olyan bővítményeket ajánl, amelyek funkcióját a VS Code vagy a Node ma már magától tudja. Ezek telepítése ma csak felesleges teher.

3. ábra — Mielőtt bővítményt telepítesz, keress rá a parancspalettában: hátha már megvan.

Amit ajánlanak	Miért nem kell?
nodemon (npm-csomag)	`node --watch` — beépített a Node 22 óta
dotenv (a legegyszerűbb esetben)	`node --env-file=.env` — beépített
Bracket Pair Colorizer	`editor.bracketPairColorization.enabled` — beépített beállítás, alapból bekapcsolva
Külön npm-script futtató	Az Explorer alján van egy NPM Scripts szakasz
Külön JSON-formázó	A VS Code beépítve formázza a JSON-t (`Shift`+`Alt`+`F`)
Külön tesztfuttató	A Node beépített tesztfuttatója: `node --test`
Külön JavaScript IntelliSense	A VS Code magja tartalmazza — TypeScript-motorral, JS-fájlokra is
Külön Git-bővítmény az alapokhoz	A forráskezelés nézet beépített (`Ctrl`+`Shift`+`G`)

Beépített vagy bővítmény?

Nyolc funkció. Döntsd el mindegyikről, hogy kell-e hozzá külön bővítmény, vagy a VS Code / Node már tudja!

1 / 8Helyes: 0

…

9Freemium és fizetős eszközök KERÜLENDŐ

Ezeket nem használjuk a kurzuson, de tudni kell róluk, mert gyakran ajánlják őket — és a Marketplace-en elsőre ingyenesnek látszanak.

MI AZ A FREEMIUM?

Az alapfunkciók ingyenesek, a fejlettebbek fizetősek. A csapda az, hogy ez telepítéskor még nem látszik: a bővítmény felkerül, működik pár napig, aztán bejelentkezést vagy előfizetést kér — addigra viszont már ráépítetted a munkamódszeredet.

Bővítmény	Mi a helyzet?	Mit használunk helyette?
Thunder Client	Korábban teljesen ingyenes API-kliens volt, azóta fizetős csomagokat vezetett be, és fiókot kérhet	REST Client vagy Bruno
Quokka.js	Van ingyenes változata, de a hasznos funkciók nagy része a fizetős „Pro”-ban van	`node --watch`, a REPL és a hibakereső
Console Ninja	Freemium: az alapok ingyenesek, a többi fizetős	A beépített hibakereső (4. fejezet)
GitLens	Az alapfunkciók ingyenesek, egyes fejlett nézetek fizetősek	Beépített forráskezelés + Git Graph
Database Client / MySQL (cweijan)	Freemium, egyes funkciók fizetősek	SQLTools + MySQL-illesztő

FIGYELEM — az árazás változik

A fenti besorolás a 2026 augusztusi állapotot tükrözi. Több, korábban teljesen ingyenes bővítmény azóta váltott fizetős csomagra — és fordítva is előfordul. Telepítés előtt mindig nézd meg a Marketplace-oldalt: ha szerepel rajta „Pro”, „Trial” vagy „Sign in”, ott lesz fizetős rész.

AZ AI-KÓDKIEGÉSZÍTŐKRŐL — TANULÓI SZEMMEL

Az AI-asszisztensek valóban gyorsítanak, de tanulás közben könnyen elveszik a lényeget: elkészül a kód, mielőtt megértenéd, miért működik. A javaslat ezen a kurzuson: az alapok tanulásakor kapcsold ki az automatikus kiegészítést, és akkor használd, amikor már meg tudod ítélni, hogy jó-e, amit ajánl. A számonkéréseken egyébként sem lesz elérhető.

10A teljes csomag egyben

Állítsd össze a saját csomagodat!

Pipáld ki, amit szeretnél — az alapcsomag és a kurzushoz szükséges bővítmények alapból be vannak jelölve. Lent két formában áll össze az eredmény: telepítő parancsokként és extensions.json fájlként.

Alapcsomag ELENGEDHETETLEN

A kurzushoz — adatbázis és API KELL

Kódminőség és kényelem AJÁNLOTT

Megjelenés ÍZLÉS SZERINT

Összefoglaló táblázat

#	Bővítmény	Azonosító	Kategória	Ár
1	ESLint	`dbaeumer.vscode-eslint`	Kódminőség	Ingyenes
2	Prettier	`esbenp.prettier-vscode`	Formázás	Ingyenes
3	EditorConfig	`EditorConfig.EditorConfig`	Formázás	Ingyenes
4	DotENV	`mikestead.dotenv`	Konfiguráció	Ingyenes
5	Prisma	`Prisma.prisma`	Adatbázis	Ingyenes
6	REST Client	`humao.rest-client`	API-teszt	Ingyenes
7	SQLTools	`mtxr.sqltools`	Adatbázis	Ingyenes
8	SQLTools MySQL-illesztő	`mtxr.sqltools-driver-mysql`	Adatbázis	Ingyenes
9	Error Lens	`usernamehw.errorlens`	Hibajelzés	Ingyenes
10	Code Spell Checker	`streetsidesoftware.code-spell-checker`	Kódminőség	Ingyenes
11	Path Intellisense	`christian-kohler.path-intellisense`	Kényelem	Ingyenes
12	npm Intellisense	`christian-kohler.npm-intellisense`	Kényelem	Ingyenes
13	Todo Tree	`Gruntfuggly.todo-tree`	Szervezés	Ingyenes
14	Git Graph	`mhutchie.git-graph`	Verziókezelés	Ingyenes

11A bővítmények beállításai

Minden bővítmény hoz magával saját beállításkulcsokat. Itt az a néhány, amit érdemes ismerned — a többit a bővítmény fogaskerék ikonjánál, az Extension Settings menüpontban találod.

Error Lens

{
  // mely súlyossági szintek jelenjenek meg a sor mellett
  "errorLens.enabledDiagnosticLevels": ["error", "warning"],

  // ne írja ki a sor mellé, csak a hullámos aláhúzás maradjon
  "errorLens.messageEnabled": true
}

Kulcs	Lehetséges értékek	Mit csinál?
`errorLens.enabledDiagnosticLevels`	tömb: `"error"`, `"warning"`, `"info"`, `"hint"`	Mely üzeneteket írja ki a sor mellé. Ha túl zsúfolt a képernyő, hagyd meg csak az `"error"` szintet — így csak az igazi hibák villognak.
`errorLens.messageEnabled`	`true` (alap) · `false`	Kiírja-e magát a szöveget a sor mellé. `false` esetén csak a sor háttérszíne jelzi a hibát.

Code Spell Checker

{
  // ezeket a szavakat fogadja el helyesnek ebben a projektben
  "cSpell.words": ["webshop", "termek", "rendeles", "prisma"],

  // ezeket a fájlokat egyáltalán ne ellenőrizze
  "cSpell.ignorePaths": ["node_modules", "package-lock.json"]
}

Kulcs	Lehetséges értékek	Mit csinál?
`cSpell.words`	szavak tömbje	A projekt saját szótára. Ide kerülnek a magyar szavak és a szakkifejezések. Nem kell kézzel írni: ha a bővítmény aláhúz egy szót, a villanykörte ikonnal (Add to workspace dictionary) egy kattintással ide teheted.
`cSpell.ignorePaths`	útvonalminták tömbje	Mit hagyjon ki teljesen. Az idegen kódot és a generált fájlokat felesleges ellenőrizni.

HOVÁ TEDD?

A cSpell.words a projekt .vscode/settings.json fájljába való: a webshop szavai a webshophoz tartoznak. Az errorLens beállításai viszont ízlés kérdése, tehát felhasználói szintre. (A döntési szabályt a 4. fejezet 3. szakaszában vettük.)

Todo Tree

{
  // mely szavakat gyűjtse össze a kommentekből
  "todo-tree.general.tags": ["TODO", "FIXME", "HACK", "KÉRDÉS"]
}

A todo-tree.general.tags egy szavak tömbje: ezeket keresi a kommentekben. Nyugodtan tehetsz bele magyar jelölést is — például // KÉRDÉS: ezt meg kell beszélni a tanárral.

REST Client — környezetek

Ha ugyanazokat a kéréseket több kiszolgálón is futtatnád (helyi gép, iskolai szerver), nem kell átírogatni a címet:

{
  "rest-client.environmentVariables": {
    "local": { "host": "http://localhost:3000" },
    "iskola": { "host": "http://192.168.1.50:3000" }
  }
}

Ezután a .http fájlban {{host}} néven hivatkozol rá, a környezetet pedig az állapotsor jobb alsó sarkában váltod. A kulcs értéke egy objektum, amelyben minden környezet neve alatt tetszőleges változók állhatnak.

VESZÉLY — tokent és jelszót ne ide tegyél

A rest-client.environmentVariables tartalma ugyanúgy a settings.json-ba kerül. Ha ez a projekt beállításfájlja, és beleírsz egy tokent vagy jelszót, az bekerül a verziókezelőbe. A címeket nyugodtan tedd ide — a titkokat ne.

12Profilok és teljesítmény

Profil: külön készlet minden munkakörhöz

A profil egy önálló beállítás- és bővítménykészlet. Ha ugyanazon a gépen frontendezel is, backendezel is, két profillal a felesleges bővítmények nem terhelnek és nem zavarnak össze.

Művelet	Parancspaletta
Új profil	Profiles: Create Profile
Váltás	Profiles: Switch Profile
Mentés fájlba	Profiles: Export Profile → `.code-profile`
Betöltés másik gépen	Profiles: Import Profile

TIPP — a fejezet G4-es feladata

Készíts egy „Node backend” profilt ennek a fejezetnek a csomagjával, és exportáld. Egy másik gépen egy lépésben visszakapod ugyanazt a környezetet — pendrive-ról vagy felhőből.

Ha lassú lett a szerkesztő

Eszköz	Parancspaletta	Mire jó?
Extension Bisect	Help: Start Extension Bisect	Felezéssel megkeresi, melyik bővítmény okozza a hibát: kikapcsolja a felét, megkérdezi, jobb lett-e, és így szűkít tovább. 30 bővítménynél 5 kérdésből megvan.
Startup Performance	Developer: Startup Performance	Kiírja, melyik bővítmény mennyi ideig indult — ezredmásodpercre pontosan.
Running Extensions	Developer: Show Running Extensions	Melyik fut éppen, és mennyi processzoridőt használ.
Reload Window	Developer: Reload Window	Újratölti a VS Code-ot a projekt bezárása nélkül. Elakadás esetén sok problémát megold.

13Gyakori problémák

Tünet	Ok	Megoldás
Telepítettem a bővítményt, de nem csinál semmit	Nem mappaként nyitottad meg a projektet, vagy hiányzik a hozzá tartozó konfigurációs fájl	Nyisd meg a mappát; ellenőrizd, van-e `eslint.config.js`, `.prettierrc` stb.
„Restricted Mode” felirat, a bővítmények nem futnak	A munkaterület nincs megbízhatónak jelölve	Ha te hoztad létre: Manage Workspace Trust → Trust
Két bővítmény ugráltatja a kódot	Két formázó van ugyanarra a fájltípusra	Állítsd be az alapértelmezettet fájltípusonként, a másikat tiltsd le
A Code Spell Checker mindent aláhúz	Magyar szavak és szakkifejezések	Vedd fel őket a `cSpell.words` listába (villanykörte ikon)
Az SQLTools nem talál MySQL-t	Csak a magot telepítetted, az illesztőt nem	Telepítsd a `mtxr.sqltools-driver-mysql` bővítményt is
A REST Client nem mutat Send Request gombot	A fájl nem `.http` vagy `.rest` kiterjesztésű	Nevezd át, vagy állítsd át a nyelvi módot: Change Language Mode → HTTP
Egy frissítés után elromlott valami	Hibás új verzió	Fogaskerék → Install Another Version… → korábbi verzió
Lassan indul a VS Code	Túl sok aktív bővítmény	Developer: Startup Performance, majd a feleslegesek letiltása

14Feladatok

Elméleti feladatok

F1⭐ alap

Melyik mire való? Párosítsd össze!

ESLint · Prettier · REST Client · Error Lens · Prisma · SQLTools · DotENV · Todo Tree

a) API-kérés küldése a szerkesztőből b) Egységes formázás mentéskor
c) Hiba kiírása a kódsor mellé d) .env szintaxiskiemelése
e) Hibás vagy gyanús kód jelzése f) schema.prisma támogatása
g) SQL futtatása a szerkesztőből h) A TODO: megjegyzések összegyűjtése

F2⭐ alap

Beépített vagy bővítmény? Melyikhez NEM kell külön bővítmény?

a) Prisma-séma kiegészítése b) Automatikus újraindítás fájlváltozáskor
c) Zárójelpárok színezése d) API-kérés .http fájlból
e) Git-változások megtekintése f) JSON-fájl formázása
g) Tesztek futtatása h) SQL futtatása a szerkesztőből

F3⭐⭐ haladó

Bővítmény-értékelés. Egy „ESLint Pro — Ultimate Linter” nevű bővítményt találsz a Marketplace-en: 340 letöltés, utolsó frissítés 3 éve, ismeretlen kiadó, nincs forráskód-link, a leírásban szerepel a „7 napos próbaidőszak”. Telepítenéd? Sorolj fel öt szempontot, amit megnéznél, és írd le, mit kockáztatsz, ha mégis feltennéd.

F4⭐⭐ haladó

Freemium. Miért probléma egy iskolai kurzuson, ha egy bővítmény fiókhoz kötött vagy fizetős csomagot igényel? Sorolj fel három érvet, és mindegyikhez mondj egy ingyenes alternatívát.

F5⭐⭐⭐ kihívás

Saját csomag. Állítsd össze a saját ajánlott csomagodat egy Node.js backend-projekthez! Legfeljebb 10 bővítmény lehet benne, mindegyiknél indokold egy mondatban, miért fér bele — és nevezz meg hármat, amit szándékosan hagytál ki és mond el miért.

Gyakorlati feladatok

G1⭐ alap

Csomag telepítése. Használd a 10. szakasz csomagépítőjét: állítsd össze a listádat, másold ki a telepítő parancsokat, és futtasd őket. Készíts képernyőképet a Kiegészítők nézetről (Ctrl+Shift+X → Installed).

G2⭐ alap

Ajánlások fájlja. Készíts a projektedben .vscode/extensions.json fájlt a saját listáddal. Zárd be és nyisd meg újra a mappát — meg kell jelennie a felajánlásnak.

G3⭐⭐ haladó

REST Client próba. Készíts egy proba.http fájlt, benne legalább négy kéréssel a https://jsonplaceholder.typicode.com API-hoz:

egy GET az összes felhasználóra, @host változóval;
egy GET egyetlen felhasználóra;
egy POST új bejegyzés létrehozására;
egy DELETE.

Futtasd mindet, és jegyezd fel a kapott státuszkódokat! (A státuszkódokat a 2. fejezetben vettük.)

G4⭐⭐ haladó

Profil. Készíts „Node backend” nevű profilt, telepítsd bele csak az általad kiválasztott bővítményeket, majd exportáld (Profiles: Export Profile). Írd le, hány bővítmény került bele, és miért pont azok.

G5⭐⭐ haladó

Error Lens és Spell Checker beállítása. Írj szándékosan hibás kódot (nem használt változó, elgépelt függvénynév). Készíts képernyőképet arról, hogyan jelzi az Error Lens. Utána vegyél fel három magyar szót a cSpell.words listába, és mutasd meg, hogy eltűnt az aláhúzás.

G6⭐⭐⭐ kihívás

Teljesítményvizsgálat. Futtasd le a Developer: Startup Performance parancsot, és jegyezd fel a három legtöbb időt igénylő bővítményt. Döntsd el mindegyikről, szükséged van-e rá; amelyikre nincs, tiltsd le, és mérd meg újra az indulási időt. Írd le az eredményt 4-5 mondatban.

15Önellenőrző kvíz

Tíz kérdés. Válassz, és azonnal megtudod, jó volt-e — magyarázattal.

16Összegzés

Az alapcsomag négy eleme: ESLint, Prettier, EditorConfig, DotENV — ezek nélkül a 4. fejezet beállításai nem működnek.
A kurzushoz emellett kell: Prisma, REST Client és SQLTools (+ MySQL-illesztő).
Erősen ajánlott még: Error Lens, Code Spell Checker, Path/npm Intellisense, Todo Tree, Git Graph.
Telepítés előtt ellenőrizd a kiadót, a letöltésszámot, az utolsó frissítést, a licencet és a forráskód-linket — a bővítmények kódot futtatnak a gépeden.
Kerüljük a fizetős és freemium eszközöket: Thunder Client helyett REST Client, Quokka és Console Ninja helyett a beépített hibakereső, GitLens helyett Git Graph.
Sok mindenre nincs is szükség bővítményre: node --watch, node --env-file, node --test, beépített Git és zárójelszínezés.
A projekt ajánlásait tedd a .vscode/extensions.json fájlba — így a munkatársad egy kattintással megkapja ugyanazt.
Profilokkal külön környezetet tarthatsz fenn, és exportálva átviheted másik gépre.
Ha lassul a szerkesztő: Extension Bisect, Startup Performance, és tiltsd le, amit egy hónapja nem használtál. 10–15 aktív bővítmény bőven elég.

17Fogalomtár

Fogalom	Jelentés
Extension (bővítmény)	A VS Code funkcióit bővítő csomag
Marketplace	A bővítmények hivatalos áruháza
Publisher (kiadó)	A bővítmény közzétevője — telepítés előtt mindig ellenőrizd
Extension ID (azonosító)	Egyedi azonosító `kiadó.név` formában — ez alapján telepítünk
Typosquatting	Hasonló nevű, hamis csomag vagy bővítmény feltöltése megtévesztés céljából
`extensions.json`	A projekt ajánlott bővítményeinek listája
Profil	Külön beállítás- és bővítménykészlet egy munkakörhöz; exportálható
Freemium	Ingyenes alapfunkciók, fizetős kiegészítő szolgáltatások
Extension Bisect	Felezéses hibakeresés a bővítmények között
Workspace Trust	Megbízhatósági kérdés a mappa megnyitásakor; korlátozott módban a bővítmények nem futtatnak kódot
Linter / Formatter	Kódellenőrző (ESLint) / kódformázó (Prettier)
`.http` fájl	A REST Client kérésfájlja; `###` választja el a kéréseket

A fejezet végén tudni fogod

1Miért fontos a válogatás?

2Bővítmények kezelése

Telepítés — három út

A fontos műveletek

Az ajánlott bővítmények fájlja

3Hogyan válassz bővítményt?

Telepítenéd?

4Az alapcsomag — ismétlés ELENGEDHETETLEN

5Adatbázis és API A KURZUSHOZ KELL

Prisma

REST Client

Egy .http fájl felépítése

SQLTools + MySQL-illesztő

6Kódminőség és kényelem ERŐSEN AJÁNLOTT

Error Lens

Code Spell Checker

Path Intellisense · npm Intellisense

Todo Tree

Git Graph

7Megjelenés — ízlés szerint OPCIONÁLIS

8Bővítmények, amelyekre nincs szükség

Beépített vagy bővítmény?

9Freemium és fizetős eszközök KERÜLENDŐ

10A teljes csomag egyben

Állítsd össze a saját csomagodat!

Összefoglaló táblázat

11A bővítmények beállításai

Error Lens

Code Spell Checker

Todo Tree

REST Client — környezetek

12Profilok és teljesítmény

Profil: külön készlet minden munkakörhöz

Ha lassú lett a szerkesztő

13Gyakori problémák

14Feladatok

15Önellenőrző kvíz

16Összegzés

17Fogalomtár

Egy `.http` fájl felépítése