VS Code + TypeScript + Node.js + Jest + GitHub

A. Fejlesztői környezet telepítése, beállítása

1. Node.js letöltése, telepítése (Aktuális LTS verzió javasolt!)
   https://nodejs.org/en/download/
2. Git for windows telepítése
   https://git-for-windows.github.io/
3. Visual Studio Code - User Installer (továbbiakban VSCode) telepítése
   https://code.visualstudio.com/Download
4. VSCode futtatása, felajánlott (@recommended) Visual Studio Extensions (bővítmények) telepítése
   
5. Billentyűkombinációk beállítása:
   File\Preferences\Keyboard Shortcuts menüvel, vagy Ctrl-K majd Ctrl-S
   Parancs keresése: gépeléssel
   Hozzárendelés, módosítás: "ceruza" ikonra kattintással, törlés: Del bill.
   
   • gépel: "reopen" > parancs: "Reopen Closed Editor" > Remove Keybindings (vagy Del bill.)
   • gépel: "test" > parancs: "Run Test Task" > hozzárendel: Ctrl-Shift-T
   • gépel: "delete" > parancs: "Delete Line" > hozzárendel: Ctrl-L
   • opcionális: további billentyűkombinációk hozzárendelése tetszés szerint
6. A .vscode/settings.json állományban ("files.exclude" szekcióban) vezérelhető az
   Explorer ablakban megjelenő állományok/mappák láthatósága
7. Opcionális: VSCode beállítása: lsd. az oldal végén

B. Projekt előkészítése (inicializálása)

1. https://github.com/nits68/JedlikTsTemplate.git
   
   • Ha nem akarsz klónozni:
     JedlikTsTemplate-master.zip letöltése, kicsomagolása a projekt szülőmappájába
     Vagy:
     
   • Repo klónozása
     Parancssor (cmd.exe)-> cd a projekt szülőmappája
     "git clone https://github.com/nits68/JedlikTsTemplate.git"
     
   • Ha nem vagy társ-fejlesztő (contributor), akkor töröljed a .git rejtett mappát!
2. Parancssorból (cmd.exe) belépés a JedlikTsTemplate mappába a "cd JedlikTsTemplate" paranccsal
3. Node.js lokális modul(ok) telepítése az "npm i" parancs futtatásával
   (lsd.: package.json: dependencies, devDependencies)
4. JedlikTsTemplate mappa átnevezése tetszőlegesen, ha új projektet készítünk
   Klónozott vagy átnevezett mappa helyi menüből: Open with Code,
   vagy a VSCode indítása után File/Open Folder... menüpontba a project mappa megnyitása
   

C. Fejlesztés, tesztelés, kilépés

1. VSCode indítása (utoljára megnyitott projektet visszatölti), vagy
   Project mappa helyi menüből: Open with Code, vagy
   VSCode indítása után File/Open Folder... menü pontba a project mappa megnyitása
2. Ctrl-Shift-B => TypeScript forrás fordítása (tsc) és a lefordított JavaScript futtatása (node-al)
   (Az "npm run dev" parancsot futtatja)
   (amig aktív a task, addig nem kell újraindítani)
3. Ctrl-Shift-T, vagy "npm run test" a Jest tesztet futtatja
   
4. content.ts szerkesztése
5. Program output ellenőrzése böngészőben: http://localhost:8080/
   A nodemon változás esetén újraindítja a fordítást és futtatást, a böngészőt F5-el (böngészőben) frissíteni kell!
   Opcionális automatikus böngésző frissítés: lsd.: I. pont -> LiveReload
   Nyomkövetés (beépített debugger és Chrome összekapcsolása):
   VS Code-ban F5 -el indítjuk az összekapcsolást
   (böngészőt http://localhost:8080/ URL-el megnyitni/frissíteni (F5) -> elhelyezett töréspontoknál megáll, változók vizsgálata, lépésenkénti végrehajtás)

D. Verziók és telepített node.js csomagok lekérdezése terminálablakból:

• TypeScript: tsc -v
• Node.js: node -v
• git: git --version
• npm: npm -v
• telepített Node.js globális csomagok: npm -g ls --depth=0
• telepített Node.js lokális csomagok: npm ls --depth=0

E. Komponensek frissítése

• VSCode: Automatikus, balra lent a fogaskeréken jelzi, ha új verzió jön ki
• VSCode kiterjesztések: Automatikus, balra az Extensions ikon jelzi, ha új verzió jön ki
• Node.js típusdefiníciós állományok: npm i --save-dev @types/node
• npm csomagkezelő: npm i -g npm

F. Hasznos linkek:

• https://www.tutorialsteacher.com/typescript/
• https://www.typescriptlang.org/docs/home.html
• https://www.tutorialspoint.com/typescript/
• https://www.section.io/engineering-education/how-to-use-typescript-with-nodejs/
• https://www.typescriptlang.org/tsconfig#declaration
• https://github.com/labs42io/clean-code-typescript
• https://code.visualstudio.com/docs
• https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
• https://git-scm.com/book/en/v2
• https://heroku.com
• https://github.com/Microsoft/vscode-tips-and-tricks
• https://desoft.hu/downloads/git/git_v1.0.pdf

G. Verziókezelés Git-el VS Code-ban (nagyon alap, opcionális):

1. GitHub account létrehozása:
   https://github.com/
   (nitslaszlo az account név a példában)
2. Git repository létrehozása:
   pl.: GitHub asztali alkalmazással vagy github.com-on
   (JedlikTsTemplate a repository neve a példában)
3. Git konfigurálása CMD vagy "Git CMD" ablakból:
   • git config --global user.name nits68
   • git config --global user.email [email protected]
   • git config --global credential.helper wincred

Using Git Credential Helper:
1. Clear the Entire Credential Cache: git credential-cache exit
2. Remove Specific Credentials:  C:\Users\<YourUsername>\.git-credentials
3.1 Check the Git Configuration File: C:\Users\<YourUsername>\.gitconfig
3.2 Look for sections that contain credential information.
      [credential]
          helper = wincred
      [user]
          name = yourusername
          email = [email protected]

4. Visual Studio Code indítása - project betöltése
5. Ha van klónozott projektben .Git (rejtett!!!) mappa, akkor törölni kell
6. Git inicializálása a 3. ("Y") ikonnal vagy Ctrl-Shift-G
   majd "Initialize Repository"-ra kattint (felül a rombusz ikonnal)
   majd meg kell adni a projekt könyvtárát a git-nek
7. Remote repository megadása új terminál ablakból (Ctrl-Shift-ö), például:
   • "git remote add origin https://github.com/nitslaszlo/JedlikTsTemplate.git"
     (A pontos parancsot a repo létrehozásakor kiírja a GitHub)
8. ".gitignore" fájl szerkesztése/létrehozása (ezek a mappák/állományok nem lesznek feltöltve):
   Ctrl-N -el új fájl létrehozása vagy meglévő szerkesztése
   A fájl tartalma:
   node_modules
   npm-debug.log
   (További mappák és fájlok megadhatók, melyek nem kerülnek "feltöltésre")
   Ctrl-S -> .gitignore néven menteni a projekt főkönyvtárába
9. Ctrl-Shift-G -> Commit message megadása felül, majd "commit" utasítás kiadása
   Ctrl-Enter -el, vagy felül a "pipa" ikonnal
   
10. "There are no staged ..." kérdésre válaszolj "always"-el
11. Változások szinkronizálása ("feltöltés")
    Alul a státus sorban balra "Synchronize Changes" ikonra kattint
    Első alkalommal a GitHub felhasználói nevet vagy e-mail címet és jelszót kér!
12. Változások szinkronizálása ("feltöltés")
    Alul a státus sorban balra "Synchronize Changes" (felhő) ikonra kattint
    Később fel- és letöltésnél egymást "kergető" nyilak lesznek.
13. A "Would you like Code to periodically run 'git fetch'?" kérdésére válaszoljunk "yes"-el
    ("git.autofetch": true lesz beállítva, alapértelmezésben 3 percenként ellenőrzi a változásokat)

H. VS Code editor beállítása:

1. Ctrl-Shift-P vagy F1
2. "Preferen..." gépelése
3. Preferences: "Open Workplace Settings" a projektben tárolt beállításokhoz (ez az erősebb) vagy
   Preferences: "Open User Settings" a felhasználónál tárolt beállításokhoz
   Konfig fájl workspace: projekt/.vscode/settings.json
   Konfig fájl user: c:/Users/UserName/AppData/Roaming/Code/User/settings.json