Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:fejlesztoi_koernyezet_kialakitasa:visual_studio_code

< Fejlesztői környezet kialakítása

Visual Studio Code

Webhely

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:

**/.git/object/**
**/.git/subtree-cache/**
**/node_modules/*/**
**/.hg/store/**

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

**/.expo/**
**/.expo-shared/**

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

Linux rendszerlimit növelése

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:

**/.git
**/.svn
**/.hg
**/CVS
**/.DS_Store

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   
oktatas/web/fejlesztoi_koernyezet_kialakitasa/visual_studio_code.txt · Utolsó módosítás: 2021/08/28 23:53 szerkesztette: admin