A legjobb VS Code HTML-parancsikonok

A Visual Studio Code (VS Code) számos értékes funkciót és parancsikont kínál a HTML-fejlesztés egyszerűsítésére. Ezek a funkciók hasznosak, és lehetővé teszik a fejlesztők számára, hogy kevesebb időt töltsenek kódírással. Bár előfordulhat, hogy nem használja az összes elérhető gyorsbillentyűt, a legfontosabbak megtanulása sokat segíthet. Ez a cikk a HTML kódolás során figyelembe veendő legkényelmesebb billentyűparancsokat ismerteti.

Emmet rövidítések

A VS Code támogatja Emmet-et. Ez az eszköz megkönnyíti a CSS- és HTML-kód írását parancsikonokon keresztül. Az alapvető HTML-struktúra kibővül, ha beír egy felkiáltójelet (!) , majd lenyomja a Tab billentyűt.

Az Emmet olyan bővítési lehetőségeket mutat be, amelyek csökkentik a HTML használatával történő kódolás idejét a Visual Studio Code-ban. Ezt más szerkesztőkben is használhatod. A gyorsított kifejezések írása teljes struktúrákat eredményez a HTML-ben.

• Alapvető Emmet-rövidítések : Ezek a rövidítések kibővítenek néhány gyakran használt elemet. A div beírása , majd a Tab billentyű lenyomása a -ra, míg a p -re bővül

  . Ha beírja az ul>li*3 parancsot , akkor az három elemet tartalmazó listává bővül.

• Beágyazott elemek : a > a gyermekelemek megadására használható. Például a div>h1 kibővül -re, lényegében létrehozva egy elemet a

  elem belül.

• Szorzás : A szorzás több elemet generál. Ha hozzáadja a *3-at egy rendezett listához, akkor három elemből álló lista jön létre.
• Attribútumok : Attribútumok hozzáadása a HTML-elemekhez szögletes zárójelben. Például a [href=”#”] karakterlánc lesz, ami egy href attribútummal rendelkező horgonyelemet hoz létre.
• CSS-szerű szintaxis : A szintaxist a CSS-szelektorok ihlették, így ismerős és intuitív a webfejlesztők számára.
• Matematikai kifejezések : A rövidítéseken belül elvégezhet néhány alapvető matematikai műveletet. Például a div>ul>li.item$*3 egy

  elem, amely egy rendezett listát tartalmaz három listaelemből item1, item2 és item3 osztálynévvel.

A rövidítések beírásával, majd a Tab gomb megnyomásával bővülnek. Ha van néhány érvényes magyarázat a rövidítésre, váltson ezek között a Tab opció ismételt megnyomásával. Az Emmet rövidítések nem specifikusak a VS Code-ra. Használhatja őket más szerkesztőkben, amelyek támogatják Emmet-et.

Címkecsomagolás

Válasszon ki egy sort vagy parancsot, majd nyomja meg a Ctrl+Shift+G billentyűkombinációt, ha Linuxot vagy Windowst használ. Mac használata esetén használja a Cmd+Shift+G billentyűkombinációt . Ez a parancsikon egy HTML-címkével burkolja be a kiválasztott tartalmat.

Ez egy kényelmes funkció a VS Code-ban. Akkor hasznos, ha a tartalom tartalmát címkékkel kell ellátnia, vagy ha strukturálnia kell a kódot. A kijelölés lehet egysoros, többsoros vagy kódblokk.

Egy másik lehetőség az, hogy jobb gombbal kattint a kiválasztott kódra, majd a helyi menüben válassza a Crappolás rövidítéssel lehetőséget . Amikor elindítja a címketördelési parancsot, megjelenik egy prompt, ahol kiválaszthatja a kívánt HTML címke nevét. Ha például a div értéket írja be , a

elem becsomagolja a kiválasztott kódot.

A címke tördelése segít a kód jelölésében és szerkezetében a nyitó és záró címkék manuális beírása nélkül. Ez sok időt takarít meg, és csökkenti a szintaktikai hibák előfordulását.

Formázás

A HTML-kód formázása jó módja a konzisztencia és olvashatóság megőrzésének a projektekben. A VS Code-ban a beépített formázási beállítások lehetővé teszik, hogy a művelet automatikusan megtörténjen HTML-ben, előre meghatározott szabályok szerint.

A HTML formázásához használt billentyűparancs a Shift+Alt+F Windows és Linux rendszeren. A Shift+Option+F működik macOS rendszeren. 

A parancsikon egy teljes HTML-dokumentumot vagy a kód egy részét formázhatja. Ha megnyomja, a rendszer a formázási szabályokat alkalmazza. A behúzástávolság és a sortörések ennek megfelelően kerülnek beállításra.

A kódot automatikusan is formázhatja a VS Code-ban .

Hozzászólás

Egyszerre egyetlen sorhoz vagy több kódsorhoz is megjegyzést fűzhet, vagy törölhet megjegyzést. Ha már létezik megjegyzés, a parancsikon eltávolítja a megjegyzést, és ha nincs megjegyzés, akkor a rendszer hozzáadja a megjegyzéseket. A HTML-ben lévő megjegyzések címkék közé vannak zárva .

Kódnavigáció

Ez a kódbázis különböző részei közötti mozgás képességére vonatkozik, vagy közvetlenül a HTML-attribútumokban vagy címkékben található definíciókra való ugrásra. Használja a Ctrl+] opciót Linuxon és Windowson a címkék közötti navigáláshoz. A Mac-felhasználók a Cmd+] segítségével léphetnek az elem záró címkéjére. A nyitó címkére ugráshoz nyomja le a Ctrl+[ (Windows és Linux) vagy a Cmd +[ (Mac) billentyűkombinációt.

Egy attribútum vagy címke definíciójához való ugráshoz használja az F12 billentyűt. A megfelelő hely megtalálásához azonosítja a kódbázis megfelelő záró vagy nyitó címkéjét.

Továbbra is elérheti a definíciót, ha lenyomva tartja a Control billentyűt, és rákattint egy HTML attribútumra vagy címkére a Windows rendszeren. Ugyanerre a műveletre nyomja meg a Command+kattintást a macOS-en. Így nem kell manuálisan keresni a helyet.

Zen mód

Ez a mód zavarómentes. A gombok és eszköztárak elrejtésével megkönnyíti a fejlesztők számára, hogy teljes mértékben a kódra összpontosítsanak. Aktiválja ezt a módot a Ctrl+KZ billentyűparancs segítségével Windows rendszeren és a Cmd+KZ billentyűkombinációval Mac rendszeren. Alternatív megoldásként lépjen a Nézet , majd a Megjelenés elemre . Itt kapcsolja be a Zen módot .

Parancs paletta

Ez egy széles körben használt funkció a VS Code-ban, és különösen hasznos a kezdők számára. Ez minden konfigurációt, parancsikont és funkció opciót képvisel, és lista formájában jelenik meg.

Mindössze annyit kell tennie, hogy beírja a parancspalettába, hogy mit szeretne tenni. Különféle parancsokat fog kapni, amelyek segítenek Önnek.

A parancspaletta eléréséhez használja a Ctrl+Shift+P billentyűparancsot a Windows rendszerhez. A Mac parancsikon a Cmd+Shift+P .

Fájlok keresése

Ha az aktuális projektfájlokban található szöveg, amire szüksége van, azt az oldalsávon található Keresés ikonra kattintva érheti el. Alternatív megoldásként használja a Ctrl+Shift+F billentyűparancsot Windows rendszeren vagy a Cmd+Shift+F billentyűkombinációt Mac rendszeren.

Törölje az előző szót

Ha egy szó törléséhez lenyomva tartja a Backspace billentyűt, akkor véletlenül más részeket is törölhet. Ha a törlést az előző szóra szeretné korlátozni, használja a Ctrl+Backspace billentyűparancsot Windows rendszeren vagy a Cmd+Backspace billentyűkombinációt Mac rendszeren.

Vonal másolása

A fejlesztés során a programozóknak néha sorokat kell másolniuk más projektrészekre. Ezután szükség szerint kisebb változtatásokat lehet végezni a vonalakon. A billentyűparancs jó módja a folyamat felgyorsításának, különösen, ha ezt rendszeresen teszi.

A Windows gyorsbillentyűje a Shift+alt+fel vagy a Shift+alt+down . Mac esetén a billentyűparancs az Opt+shift+fel vagy az Opt+shift+down .

Nyissa meg újra a Bezárt szerkesztőt

Ha egy hatalmas, sok fájlt tartalmazó HTML-projektet kezel, frusztráló lehet, ha véletlenül bezár egy lapot. Szerencsére egy parancsikon segítségével megnyithatja a VS Code utolsó bezárt lapját

A bezárt szerkesztő újranyitásához használja a Ctrl+Shift+T billentyűparancsot Windows rendszeren vagy a Cmd + Shift+T billentyűkombinációt Mac rendszeren. Ezzel a parancsikonnal több zárt lapot is megnyithat.

Gyorsítsa fel a kódolást HTML-parancsikonokkal

Sok parancsikon viszonylag egyszerűbbé teszi a VS kód használatát. Bár több lehetőség van, mint ami a cikkben található, a fentiek a leggyakoribbak, amelyeket kezdők és tapasztalt felhasználók hasznosnak találhatnak. A VS Code népszerűségének köszönhetően az összes funkció kihasználása még élvezetesebbé teheti. Válassza ki azokat a parancsikonokat, amelyeket gyakran használ a kódolási sebesség növelésére.

Ezután meg kell tanulnia két fájl összehasonlítását a VS Code programban .

GYIK

K: Testreszabhatók a HTML-parancsikonok a VS Code-ban?

V: Igen. Testreszabhatja a VS Code HTML-parancsikonjait a felhasználói vagy munkaterület-beállítások módosításával.

K: Létrehozhatok saját egyéni HTML-parancsikonokat a VS Code-ban?

V: Igen. Egyéni HTML-kódrészleteket vagy parancsikonokat hozhat létre a VS Code-ban, ha megadja azokat a felhasználói vagy munkaterület-beállításokban. Ez lehetővé teszi parancsikonok létrehozását a gyakran használt kódmintákhoz vagy egyéni elemekhez.