Fejlesztői környezet: VS Code

1Projekt = mappa

A VS Code mappa-alapú. Ne egyetlen fájlt nyiss meg, hanem mindig a projekt mappáját:

• File → Open Folder…, vagy
• terminálból: code . — a . az aktuális mappát jelenti.

Ez nem esztétikai kérdés. A VS Code szinte minden okos funkciója abból indul ki, hogy tudja, hol van a projekt gyökere:

2A munkaterület

A munkaterület (workspace) az a környezet, amelyben dolgozol: egy vagy több mappa, plusz a hozzájuk tartozó beállítások és ajánlott bővítmények. Kétféle van:

Önálló munkaterület Node.js backendhez — lépésről lépésre

Így hozol létre egy tiszta, önálló backend-munkaterületet a nulláról:

1. Mappa és projekt létrehozása (ezt a 3. fejezetből már ismered):

   mkdir webshop-api
   cd webshop-api
   npm init -y
   code .

2. A .vscode mappa létrehozása a projekt gyökerében. Ide kerülnek azok a beállítások, amelyek ehhez a projekthez tartoznak — és amelyeket a csapat minden tagja megkap.
3. Beállítások, ajánlott bővítmények és hibakeresési konfiguráció felvétele (a 11. szakaszban ott a teljes, másolható sablon).
4. Munkaterület megbízhatónak jelölése. Amikor először nyitsz meg egy mappát, a VS Code rákérdez: „Do you trust the authors of the files in this folder?” Ha te hoztad létre a projektet, nyugodtan válaszd a „Yes, I trust the authors” lehetőséget.

Két terminál, nem egy

A beépített terminál (Ctrl + `) mindig a megnyitott projektmappában indul. Érdemes rögtön kettőt nyitni (Ctrl + Shift + `):

Ha csak egyet használnál, minden parancshoz le kellene állítanod a szervert. A terminálokat a jobb oldali listában válthatod, vagy a felosztás ikonnal egymás mellé teheted őket.

3A beállítások három szintje

Ugyanaz a beállítás három helyen szerepelhet. Mindig a szűkebb hatókör győz:

4A .vscode mappa

Ez a mappa a projekt gyökerében él, és három fájl fordul elő benne. Mindhárom verziókezelőbe kerül — pontosan az a lényegük, hogy mindenkinél ugyanaz legyen.

5Elengedhetetlen beállítások ELENGEDHETETLEN

Ez a hét beállítás nem ízlés kérdése: mindegyik konkrét hibát előz meg. Ezek a projektbe (.vscode/settings.json) valók, hogy mindenkinél egyformák legyenek.

6Opcionális beállítások ÍZLÉS SZERINT

Ezek egyike sem befolyásolja a kód működését — kényelmi kérdések. Ezek a felhasználói szintre valók, ne kényszerítsd rá a csapatra.

7A négy elengedhetetlen bővítmény

Az előző szakasz beállításai közül több csak akkor működik, ha a hozzá tartozó bővítmény telepítve van. Ez az a négy, ami nélkül ez a fejezet nem működik — mind a négy ingyenes, teljes funkcionalitással, fiók és előfizetés nélkül.

Telepítés parancssorból, egy lépésben:

code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension EditorConfig.EditorConfig
code --install-extension mikestead.dotenv

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

Hogy ne kelljen ezt mindenkinek elmagyarázni, tedd be a projektbe:

// .vscode/extensions.json
{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "EditorConfig.EditorConfig",
    "mikestead.dotenv"
  ]
}

Aki ezután megnyitja a projektet, egy értesítést kap: „This workspace has extension recommendations” — és egy kattintással telepítheti mindet.

8Prettier a projektben

A Prettier nem vitatkozik a stílusról, hanem eldönti helyetted: idézőjelek, pontosvesszők, sortörések, behúzás. Nincs többé „szerintem így szebb” — és ez pontosan a lényeg.

Telepítés a projektbe

npm install --save-dev prettier

.prettierrc a projekt gyökerében:

{
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "endOfLine": "lf"
}

Mit jelentenek ezek a kulcsok?

Ne másold be vakon — mindegyiknek konkrét, látható hatása van a kódra:

.prettierignore — ide azok a fájlok kerülnek, amelyeket ne formázzon a Prettier:

node_modules        # idegen kód — nem a mi dolgunk formázni
dist                # generált fájlok — úgyis felülíródnak
package-lock.json   # az npm kezeli, kézzel nem nyúlunk hozzá

És hasznos scriptek a package.json-ba:

"scripts": {
  "format": "prettier --write .",
  "format:check": "prettier --check ."
}

9ESLint a projektben

Amíg a Prettier a kinézetet rendezi, az ESLint a hibákra figyelmeztet — még mielőtt lefuttatnád a kódot.

Beállítás varázslóval

npm init @eslint/config@latest

A varázsló végigkérdez (JavaScript, modulrendszer, Node-környezet), telepíti a szükséges csomagokat, és létrehoz egy eslint.config.js fájlt. Egy egyszerű induló konfiguráció:

import js from "@eslint/js";
import globals from "globals";

export default [
  js.configs.recommended,
  {
    files: ["**/*.js"],
    languageOptions: {
      ecmaVersion: "latest",
      sourceType: "module",
      globals: { ...globals.node },   // process, console… ismert legyen
    },
    rules: {
      "no-unused-vars": "warn",   // figyelmeztetés, nem hiba
      "no-console": "off",       // tanuláshoz kell a console.log
      eqeqeq: "error",            // mindig === legyen
    },
  },
];

Mit jelentenek ezek a mezők?

A példában szereplő szabályok

Scriptek a package.json-ba

"scripts": {
  "lint": "eslint .",          // ellenőrzés: kiírja a hibákat
  "lint:fix": "eslint . --fix"  // ellenőrzés + ami javítható, azt kijavítja
}

A három súlyossági szint

10EditorConfig

Az .editorconfig fájl szerkesztőfüggetlen: a VS Code, a WebStorm, a Sublime és sok más szerkesztő is érti. Ez a legalsó közös nevező, ami akkor is működik, ha valaki nem VS Code-ot használ.

# .editorconfig — a projekt gyökerében
root = true

[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false

Mit jelentenek ezek a kulcsok?

11A kész munkaterület-sablon

Itt van egyben minden, amiről eddig szó volt. Ezt a szerkezetet érdemes egyszer felépíteni, és utána minden új projektnél újrahasználni.

.vscode/settings.json

{
  // mentéskor formázzon
  "editor.formatOnSave": true,

  // és a Prettier bővítménnyel tegye (azonosító, nem név!)
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // mentéskor futtassa le az ESLint javítható javításait is
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },

  // LF sorvég — a CRLF/LF keveredés ellen
  "files.eol": "\n",
  "files.trimTrailingWhitespace": true,   // sorvégi szóközök levágása
  "files.insertFinalNewline": true,       // üres sor a fájl végére

  // ezekben a mappákban ne keressen (** = tetszőleges mélységű almappa)
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true
  },

  // fájl átnevezésekor javítsa az importokat
  "javascript.updateImportsOnFileMove.enabled": "always"
}

.gitignore

node_modules/   # több száz MB, bármikor újratelepíthető
.env            # titkok: adatbázis-jelszó, JWT-kulcs
dist/           # generált fájlok — a forrásból újra előállnak
*.log           # naplófájlok (a * tetszőleges fájlnevet jelent)

.env.example

# Ez a minta — ezt MEGOSZTJUK. Az értékek szándékosan üresek.
PORT=3000
DATABASE_URL=
JWT_SECRET=

12Hibakeresés

A console.log hasznos, de van egy jobb eszköz: a hibakereső (debugger). Megállítja a programot egy adott sornál, és megmutatja minden változó aktuális értékét — anélkül, hogy egyetlen sort is beleírnál a kódba.

A leggyorsabb út: JavaScript Debug Terminal

1. Parancspaletta (Ctrl + Shift + P) → Debug: JavaScript Debug Terminal
2. Ebben a terminálban indítsd a programot: npm run dev
3. Kész — a töréspontok azonnal működnek, konfiguráció nélkül.

Konfigurációval: .vscode/launch.json

Futtatás és hibakeresés nézet (Ctrl + Shift + D) → create a launch.json file → Node.js:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Program indítása",
      "program": "${workspaceFolder}/index.js",
      "skipFiles": ["<node_internals>/**"],
      "console": "integratedTerminal"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Fejlesztői mód (--watch)",
      "program": "${workspaceFolder}/index.js",
      "runtimeArgs": ["--watch", "--env-file=.env"],
      "skipFiles": ["<node_internals>/**"],
      "console": "integratedTerminal"
    }
  ]
}

Mit jelentenek ezek a mezők?

A hibakereső használata

13Billentyűparancsok

A teljes lista: Help → Keyboard Shortcuts Reference (Ctrl+K, majd Ctrl+S). Ne akard mindet megtanulni — válassz hármat hetente, és használd tudatosan.

14Vidd magaddal a beállításaidat

Az iskolai gépen felépíted a környezetedet, otthon pedig kezdheted elölről? Nem kell — két megoldás is van rá.

Profilok AJÁNLOTT

A profil egy külön beállítás- és bővítménykészlet. Készíthetsz egy „Node backend” profilt, és külön egyet a frontendes munkához — így nem zavarnak össze a felesleges bővítmények.

• Létrehozás: parancspaletta → Profiles: Create Profile
• Mentés fájlba: Profiles: Export Profile → egy .code-profile fájl
• Visszatöltés másik gépen: Profiles: Import Profile

A fájlt felteheted pendrive-ra vagy felhőbe, és bármelyik gépen egy lépésben visszakapod a teljes környezetedet.

Settings Sync OPCIONÁLIS

A VS Code beépített szinkronizálása: a beállításaid, bővítményeid és billentyűparancsaid egy fiókhoz (GitHub vagy Microsoft) kötve automatikusan átkerülnek minden gépedre. Ingyenes, a parancspalettáról kapcsolható be: Settings Sync: Turn On.

15Gyakori problémák

16Feladatok

17Önellenőrző kvíz

18Összegzés

19Fogalomtár