Amikor a VS Code-ban parancsokat ír be, néha a legutolsó dolog lehet az, hogy ügyes legyen. Bár a formázás nem szükséges a program futtatásához, ez nagyban segít a hibakeresés és a hibák keresése során.
Ebben a cikkben bemutatjuk, hogyan formázhat kódot a VS Code-ban, valamint más hasznos tippeket, amelyek segítségével jól rendszerezheti a kódot.
A kód formázása
A VS Code beépített parancsokkal rendelkezik az aktuálisan beírt kód szabványos formátumba rendezéséhez. Ezek a gyorsbillentyűk nem igényelnek további bővítményeket, és bármikor használhatók. A parancsikonok a következők:
PC-hez
A teljes dokumentum formázása:
Nyissa meg a fájlt a formázni kívánt kóddal.
Nyomja meg a „Shift + Alt + F” gombot.
Mentse el a változtatásokat a bal felső sarokban található „Fájl” gombra kattintva, majd válassza a „Mentés” lehetőséget, vagy nyomja meg a „Ctrl + S” billentyűkombinációt.
Csak a kiválasztott kód formázása:
A formázni kívánt kódsorokat tartalmazó fájlban jelölje ki a sorokat az egérrel kiemelve.
Nyomja meg a „Ctrl + K” gombot.
Nyomja meg a „Ctrl + F” gombot.
Mentse el a változtatásokat a bal felső sarokban található Fájl menü „Mentés” parancsával vagy a „Ctrl + S” billentyűkombináció megnyomásával.
Vegye figyelembe, hogy ha a „Ctrl + F” billentyűkombinációt a „Ctrl + K” lenyomása nélkül nyomja meg, megnyílik a Keresés menü. Ha ez megtörténik, egyszerűen zárja be az „x” gombra kattintva vagy az Esc billentyűt.
Sorok mozgatása felfelé vagy lefelé:
Vigye a kurzort az áthelyezni kívánt sor elejére.
Tartsa lenyomva az Alt billentyűt.
A vonal felfelé mozgatásához nyomja meg a felfelé mutató nyilat. Lefelé mozgatásához nyomja meg a lefelé mutató nyilat.
Mentse el a fájlt az ablak bal felső sarkában található Fájl menüből vagy a „Ctrl + S” billentyűkombináció megnyomásával.
Egyetlen sor behúzásának módosítása:
Vigye a kurzort annak a sornak az elejére, amelyben módosítani szeretné a behúzást.
Nyomja meg a „Ctrl + ]” gombot a behúzás növeléséhez.
Nyomja meg a „Ctrl + [“ to decrease the indent.
Save changes by selecting Save from the File menu or by pressing “Ctrl + S”.
For Mac
Format the entire document:
Open the file with the code that you wish to format.
Press “⇧ + ⌥ + F.”
Save your changes by clicking “File” on the upper left then choosing “Save” or pressing “⌘ + S”.
Formatting selected code only:
Highlight the part of the document that you wish to format.
Press “⌘ + K”.
Press “⌘ + F”.
Save your file by pressing “⌘ + S” or by choosing “Save” from the File menu on the upper left corner of the window.
Note that using “⌘ + F” without pressing “⌘ + K” beforehand will only open the Find Menu. To close the Find Menu just press “x” on the right side or press Esc.
Move lines up or down:
Place your cursor at the beginning of the line you want to edit.
Hold down the “⌥” Key.
To move a line up, press the up arrow. To move it down, press the down arrow.
Save your changes by choosing “Save” from the File menu or by pressing “⌘ + S”.
Change indentation of a single line:
Move your cursor to the beginning of the line in which you want to change the indention.
Press “⌘ + ]” a behúzás növeléséhez.
Nyomja meg a „⌘ +[“gombotabehúzáscsökkentéséhez[“todecreasetheindent
Mentse el a fájlt a „⌘ + S” megnyomásával vagy az ablak bal felső sarkában található Fájl menü „Mentés” parancsával.
VS kód formátum kódja a mentéskor
A VS Code nem rendelkezik natív paranccsal, amely formázza a dokumentumot mentéskor. Ehelyett ezt megteheti egy formázási kiterjesztés telepítésével a VS Code alkalmazásba. E kiterjesztések közül a legnépszerűbb a Prettier, amely számos formázási funkciót biztosít a VS Code számára. A Prettier a következőképpen telepíthető:
Nyissa meg a VS kódot.
Kattintson a bal oldali menüben található Bővítmények gombra. Ez az ikon négy doboznak tűnik. Alternatív megoldásként megnyomhatja a „Ctrl + Shit + x” billentyűket PC-n, vagy a „⌘ + ⇧ + x” billentyűket Macen.
A menü tetején található keresősávba írja be, hogy Szebb.
Kattintson a Telepítés gombra a Szépebb ikon jobb alsó sarkában.
Várja meg, amíg a bővítmény befejezi a telepítést.
Mielőtt a Prettier elkezdhetné automatikusan formázni a dokumentumot mentéskor, be kell állítania a bővítményt a funkció aktiválásához. Ez a következőképpen történik:
Nyissa meg a beállítások ablakot a „Ctrl +” megnyomásával PC-n vagy a „⌘ +” megnyomásával Mac gépen.
A keresősávba írja be a formázó szót. Ennek számos formázási beállítást kell megjelenítenie.
A Szerkesztő: Alapértelmezett formázó beállításnál győződjön meg arról, hogy a kiválasztott bővítmény szebb. Ha nincs alapértelmezett formázó, vagy a VS Code alapértelmezés szerint másik formázót használ, nyomja meg a legördülő nyilat. Válassza ki a listából a „Szépebb – Kódformázó” lehetőséget. Alternatív megoldásként a Prettier „esbenp.prettier-vscode” néven jelenhet meg a listán.
Győződjön meg arról, hogy a „Szerkesztő: Formázás mentéskor” opció be van jelölve. Ha nem, kapcsolja be a pipát.
Írja be a „szebb” kifejezést a beállítások keresősávjába.
Görgessen lefelé, amíg meg nem találja a „Szépebb: Konfiguráció szükséges” sort. Győződjön meg arról, hogy a jelölőnégyzet be van jelölve. Ez a beállítás megakadályozza, hogy a Prettier konfigurációs fájl nélkül formázza a dokumentumokat. Ez akkor hasznos, ha olyan letöltött kódot néz, amelynek saját formázási szabályai lehetnek. Ez megakadályozza, hogy véletlenül felülírja a formázási beállításokat. Vegye figyelembe, hogy a névtelen fájlok akkor is automatikusan formázásra kerülnek, ha ez a beállítás be van jelölve.
A Prettier beállításokat preferenciáitól függően módosíthatja. Ha végzett, kiléphet ebből a menüből.
Mivel a Prettier-t úgy konfigurálta, hogy csak akkor formázza automatikusan, ha van konfigurációs fájl, ezért minden projekthez létre kell hoznia egyet. Ez a következő lépésekkel történik:
Válassza ki a projekt gyökerét a bal oldali menüben.
Kattintson az új fájl gombra a konfigurációs fájl létrehozásához.
Nevezze el ezt a fájlt „.prettierrc”-nek.
A fájlba írja be a következőt: {}.
A Prettier mostantól automatikusan formázza a dokumentumot, amikor elmenti.
Tippek a kód rendszerezéséhez
Bár a behúzás nem szükséges a program futtatásához, segíthet a hibakeresésben azáltal, hogy a kódot kezelhető modulokba osztja fel. Például az if-Then utasítások vagy a beágyazott esetek profitálhatnak ebből azáltal, hogy az egyes alternatív opciókat vizuálisan megkülönböztetik egymástól. Ez akkor hasznos, ha szintaktikai hibák helyett logikai hibákkal foglalkozik.
Ha modulokat vagy rövid kódsorokat nevez el, tegye szokásává a leíró címek használatát, ahelyett, hogy egyszerűen 1. modulnak, 2. modulnak stb.
Mindig jó ötlet, ha a megjegyzéseket a saját hasznodra fordítja. Akár egy gyors leírást ad hozzá, akár csak megjegyzést ad hozzá, a megjegyzések rendkívül sokat segítenek a hibakeresés során.
Szervező kód
A projektek megfelelő formázása nemcsak könnyebbé teszi az olvasást, hanem segít a hibák azonosításában és a kód rendszerezésében is. Bár nem szükséges egy program futtatásához, a fájlok VS Code-ban való formázásának ismerete határozott előnyt jelent.
Tud más módokat a fájlok formázására a VS Code-ban? Nyugodtan ossza meg gondolatait az alábbi megjegyzések részben.
