[[oktatas:web:fejlesztoi_koernyezet_kialakitasa|< Fejlesztői környezet kialakítása]]

====== Visual Studio Code ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2019, 2021
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Webhely =====

  * [[https://code.visualstudio.com/|Visual Studio Code]]
  * [[https://vscodium.com/]]

===== Billentyűkombináció =====


Sor/sorok duplázása:

  * Windows
    * Shift + Alt + Le
    * Shift + Alt + Fel
  * macOS
    * Shift + Option + Le
    * Shift + Option + Fel
  * Linux
    * Ctrl + Shift + Alt + Le
    * Ctrl + Shift + Alt + Fel

Panel rejtése mutatása (alsó rész):
  * Ctrl + j

===== Kiterjesztés parancssorból =====

  code --install-extension kiterjesztésnév.vsix


===== Megfigyelt fájlok =====

Ha olyan projekttel dolgozunk, ami nagyon sok fájllal dolgozik, és szeretnénk
még egy valamilyen szervert is indítani, elfogyhat a figyelhető fájlok 
darabszáma.

Debian GNU/Linux alatt például 8192 fájl figyelhető egyszerre. 
Két lehetőségünk van:
  * Lebeszéljük VS Code-t a sok fájl megfigyeléséről.
  * A rendszer maximális limitjét növeljük.

==== VS Code beállítása ====

  * Fájl > Beállítások > Settings

A beállítások keresőjébe írjuk be:
  watch

Találunk néhány alapértelmezett mintát:
<code>
**/.git/object/**
**/.git/subtree-cache/**
**/node_modules/*/**
**/.hg/store/**
</code>


Vegyünk fel saját mintákat. Például expo használata esetén:

<code>
**/.expo/**
**/.expo-shared/**

</code>

Indítsuk újra a Visual Studio Code-t a beállítások újratöltéséhez.


==== Linux rendszerlimit növelése ====

  * [[oktatas:linux:kernelbeallitasok#figyelheto_fajlok]]

=====  A megjelenített fájlok beállítása =====

  * Fájl > Beállítások > Settings

A beállítások keresőjébe írjuk be:
  file.exclude

Találunk néhány alapértelmezett mintát:
<code>
**/.git
**/.svn
**/.hg
**/CVS
**/.DS_Store
</code>

Ide felvehetjük saját beállításainkat.

===== HTML generálás =====

Nem szükséges telepíteni az Emmet bővítményt, mert alapból tud mindent.

Felkiáltó jel, majd Enter:
  * !<Enter>

Erre generál egy komplett kezdő weblapot.


A h1 elemet kövesse egy div elem:
  * h1+div

Az ul elemen belül legyen egy li elem:
  * ul>li

Az ul elemen belül legyen 5 li elem:
  * ul>li*5

Legyen egy div, azon belül egy h1 és egy div, az utóbbi divben legyen egy ul, amin belül 5 li:
  * div>h1+div>ul>li*5

Legyen egy div elem, aminek az osztálya container:
  * div.container

Legyen egy div elem, aminek az azonosítója container:
  * div#container


===== Live Server bővítmény =====

Telepítsük: "Live Server"


Az index.html fájl neve felett jobb egér gomb, majd:
  * Open with Live Server

Alul a státuszsorban megjelenik Port: 5500.
Ide kattintva lehet leállítani is.
A weblap automatikusan megnyílik a böngézsőben.


===== Téma =====

Telepítsük az "Material Theme" bővítményt.

A bal oldalsó sáv alján a fogaskerékre kattintunk, majd:
  * Color Theme
Az előugró listából válaszuk ki a kedvenc témát.


===== Konfiguráció újratöltése =====


Indítsuk újra a VSCode-t.



Parancs panelról:
  Ctrl+Shift+p > Reload Window