Webszerkesztés

Visual Studio Code

A Visual Studio Code egy ingyenes webszerkesztő program. A VSC előnyeit, a gyorsbillentyűk, az Emmet rövidítések, a reguláris kifejezések használatát igyekeztem bemutatni a megoldások animációiban.

Letöltések

Töltsd le az operációs rendszerednek megfelelő Visual Studio Code ingyenes szoftvert (mindig a legfrissebbet) és telepítsd.
Letöltés pl. a https://code.visualstudio.com/download oldalról.

A képernyő felépítése

1. - Menüsor.
2. - Fájlkezelő ablak megnyitása/bezárása.
3. - Kiegészítők ablak megnyitása/bezárása.
4. - Kezelés menü megnyitása/bezárása.
5. - Megnyitott fájl neve.
6. - A megnyitott fájl tartalma.
7. - Állapotsor, amely többek között tartalmazza:
- a kurzor aktuális pozícióját (sor, oszlop),
- a megnyitott fájl kódolást (UTF-8),
- a megnyitott fájl nyelvét (HTML)

A képernyő részei között az Ú billentyűvel előre,
a F+Ú billentyűkombinációval visszafelé lehet lépkedni.

Jelölések a VSC programban

HTML kódok színjelölései:

< HTML jelölők >; attribútum nevek ; "attribútum értékek" ;
<kijelölt HTML jelölő nyitó> és <záró eleme>; weblaptartalom

CSS kódok színjelölései:

HTML elem nevek ; #azonosító (id) nevek
.osztály (class) nevek ; látszólagos (pseudo) - szelektálható osztály nevek ;
attribútum nevek ;
szöveges attribútum értékek ; szám attribútum értékek ; ['attribútum választók']

Kiegészítők

Néhány kiegészítő telepítésével tovább egyszerűsíthető a kódolás.

Kiegészítők ablak megnyitása: C+F+x

Javasolt kiegészítők

htmltagwrap - Brad Gashler

A kiválasztott tartalmat HTML-címkébe csomagolja.
Egyszerre több kijelöléssel is működik. Kijelölések a F lenyomása mellett.
Becsomagolás: A+w billentyűkombinációval.

Többsoros kurzor esetén a szavak közötti mozgást és a kijelölést segíti.
C+A+X: Ugrás a következő szóra.
C+A+Y: Ugrás az előző szóra.
C+F+A+X: Kijelölés kibővítése a következő szóra.
C+F+A+Y: Kijelölés kibővítése az előző szóra.

Open In Default Browser - peakchen90

Megtekintheted az alapértelmezett böngészőben a Fájlkezelőből kiválasztott HTML fájlt.
Gyorsgombja: C+1

Hungarian Language Pack for Visual Studio Code

Magyar fordítás.
(Sokat nem tesz hozzá, a látássérülteknek készült leírásban használtam.)

Kiegészítők telepítése

A Kiegészítők ablak keresőmezőjébe írd be a keresett kiegészítő nevét, a megjelenő listából válaszd ki a fentiekben megadott kiegészítőket, egyenként.
A telepítéshez válaszd ki a Telepítés gombot.

A munka megkezdése

Nyisd meg a szükséges munkamappát: Fájl - Open Folder...
vagy a C+k,o billentyűkombinációra megnyíló Open Folder ablakból.
A Fájlkezelő ablakban láthatod a mappa tartalmát.
A Fájlkezelő ablakból nyisd meg a szükséges fájlt:
dupla kattintás az egérrel a fájl nevén;
vagy Q, Z billentyűvel lépj a fájl nevére, fájl megnyitása: N;
vagy a C+p billentyűkombináció leütésére megjelenő szerkesztőmezőbe írd be a keresett fájl nevét, a fájl megnyitása: N

Az animációk egy kurzor pozíciótól vagy egy kijelölésből indulnak!

Kódsor összecsukása

Ha a szükséges sorok nem kerülnek egy képernyőre, akkor az éppen szükségtelen kódsorok összecsukhatók.
Az összecsukáshoz egérrel kattints a kódsorok mellett található oszlopon a ∨ jelre. Ezután a > jelre vált, erre ismét kattintva kibontható az adott rész.
Billentyűvel a kódsorok összecsukása-kibontása: C+k,l

(Az animáció indításához/leállításához kattints a képen!)

Hosszú sorok tördelése

A legtöbb esetben a megoldások során hasznos, ha egy kódsorban egy elem van, de van amikor pl. egy hosszabb bekezdést egyszerre szükséges látni, ekkor a képernyőhöz lehet tördelni a kódsort (Word Wrap).
A kódsor számozásában nem keletkezik többlet sor.
Tördelés be-/kikapcsolása: C+A+z

(Az animáció indításához/leállításához kattints a képen!)

Automatikus formázás

Ha munka közben nem megfelelően alkalmaztad pl. a behúzásokat, automatikusan formázhatod az aktuális fájl kódsorait az A+F+f lenyomásával.

(Az animáció indításához/leállításához kattints a képen!)