Najlepšie skratky HTML kódu VS

Visual Studio Code (VS Code) ponúka mnoho cenných funkcií a skratiek na zjednodušenie vývoja HTML. Tieto funkcie sú praktické a umožňujú vývojárom tráviť menej času písaním kódu. Aj keď možno nepoužijete všetky dostupné skratky, naučenie sa tých najdôležitejších môže viesť k dlhej ceste. Tento článok obsahuje niektoré z najpraktickejších skratiek, ktoré je potrebné zvážiť pri kódovaní HTML.

Emmet Skratky

VS Code podporuje Emmet. Tento nástroj uľahčuje písanie kódu CSS a HTML pomocou skratiek. Základná štruktúra HTML sa rozšíri, ak napíšete výkričník (!) a potom stlačíte Tab.

Emmet predstavuje možnosti rozšírenia, ktoré skracujú čas potrebný na kódovanie pomocou HTML v kóde Visual Studio. Môžete to použiť aj v iných editoroch. Výsledkom zápisu skratkových výrazov sú kompletné štruktúry v HTML.

• Základné skratky Emmet : Tieto skratky rozširujú niektoré bežne používané prvky. Napísaním div a následným stlačením Tab sa rozbalí na , zatiaľ čo p sa rozšíri na

  . Ak zadáte ul>li*3 , rozbalí sa na zoznam s tromi položkami.

• Vnorené prvky : na zadanie podradených prvkov možno použiť >. Napríklad div>h1 sa rozšíri na , čím v podstate vytvorí prvok s

  prvok vo vnútri.

• Násobenie : Násobenie generuje viacero prvkov. Pridaním *3 do zoradeného zoznamu sa vygeneruje zoznam s tromi položkami.
• Atribúty : Pridajte atribúty k prvkom HTML v hranatých zátvorkách. Napríklad [href=”#”] sa zmení na , čím sa vytvorí kotviaci prvok s atribútom href.
• Syntax podobná CSS : Syntax je inšpirovaná selektormi CSS, vďaka čomu je pre vývojárov webu známa a intuitívna.
• Matematické výrazy : V rámci skratiek môžete vykonávať niektoré základné matematické operácie. Napríklad div>ul>li.item$*3 sa rozbalí na

  prvok obsahujúci usporiadaný zoznam s tromi položkami zoznamu s názvami triedy item1, item2 a item3.

Skratky sa rozbalia napísaním a následným stlačením tlačidla Tab . Ak existuje niekoľko platných vysvetlení pre vašu skratku, cyklujte ich opätovným stlačením možnosti Tab . Skratky Emmet nie sú špecifické pre kód VS. Môžete ich použiť v iných editoroch, ktoré podporujú Emmet.

Balenie štítkov

Vyberte riadok alebo príkaz a potom stlačte Ctrl+Shift+G, ak používate Linux alebo Windows. Ak používate Mac, použite Cmd+Shift+G . Táto skratka obalí vybraný obsah značkou HTML.

Toto je pohodlná funkcia vo VS Code. Je to užitočné, keď musíte obsah obsahu uzavrieť značkami alebo keď potrebujete štruktúrovať kód. Výberom môže byť jeden riadok, viacero riadkov alebo blok kódu.

Ďalšou možnosťou je kliknúť pravým tlačidlom myši na vybraný kód a potom v kontextovej ponuke vybrať možnosť Zabaliť so skratkou . Keď spustíte príkaz zalamovania značky, zobrazí sa výzva, v ktorej môžete vybrať požadovaný názov značky HTML. Ak zadáte div , napríklad a

prvok obalí vybraný kód.

Zalamovanie značiek pomáha pri označovaní a štruktúrovaní kódu bez manuálneho zadávania otváracích a zatváracích značiek. To šetrí veľa času a znižuje výskyt syntaktických chýb.

Formátovanie

Formátovanie HTML kódu je dobrý spôsob, ako udržať konzistentnosť a čitateľnosť v projektoch. V kóde VS umožňujú vstavané možnosti formátovania, aby sa akcia uskutočnila automaticky v HTML podľa preddefinovaných pravidiel.

Klávesová skratka používaná na formátovanie HTML je Shift+Alt+F pre Windows a Linux. Shift+Option+F funguje na macOS. 

Skratka môže naformátovať celý HTML dokument alebo časť kódu. Keď ho stlačíte, použijú sa pravidlá formátovania. Medzery odsadení a zlomy riadkov sa zodpovedajúcim spôsobom upravia.

Môžete tiež automaticky formátovať kód vo VS Code .

Komentovanie

Komentovať alebo zrušiť komentár môžete buď na jednom riadku alebo na viacerých riadkoch kódu podľa výberu súčasne. Ak komentár už existuje, skratka ho odstráni, a ak nie je komentovaný, pridajú sa komentáre. Komentáre v HTML sú uzavreté v značkách.

Kódová navigácia

Vzťahuje sa to na schopnosť pohybovať sa medzi rôznymi časťami kódovej základne alebo priamo skočiť na definície v atribútoch alebo značkách HTML. Na navigáciu medzi značkami použite možnosť Ctrl+] v systémoch Linux a Windows. Používatelia počítačov Mac môžu použiť Cmd+] na prechod na uzatváraciu značku prvku. Ak chcete prejsť na úvodnú značku, stlačte Ctrl+[ pre Windows a Linux alebo Cmd +[ pre Mac.

Ak chcete prejsť na definíciu atribútu alebo značky, použite kláves F12 . Identifikuje zodpovedajúci uzatvárací alebo otvárací tag kódovej základne, aby našiel správne umiestnenie.

Stále budete mať prístup k definícii, keď podržíte kláves Ctrl a kliknete na atribút alebo značku HTML v systéme Windows. Stlačte Command + kliknite na macOS pre rovnakú akciu. Odpadá tak potreba manuálneho vyhľadávania miesta.

Režim Zen

Tento režim je bez rušivých vplyvov. Uľahčuje vývojárom sústrediť sa výlučne na kód skrytím tlačidiel a panelov nástrojov. Aktivujte tento režim pomocou skratky Ctrl+KZ v systéme Windows a Cmd+KZ v systéme Mac. Prípadne prejdite na položku Zobraziť a potom na položku Vzhľad . Tu zapnite režim Zen .

Paleta príkazov

Toto je široko používaná funkcia vo VS Code a je užitočná najmä pre začiatočníkov. Predstavuje každú možnosť konfigurácie, skratky a funkcie a je vo forme zoznamu.

Všetko, čo musíte urobiť, je napísať, čo chcete urobiť v palete príkazov. Dostanete rôzne príkazy, ktoré vám pomôžu.

Na prístup k palete príkazov použite skratku Ctrl+Shift+P pre Windows. Skratka pre Mac je Cmd+Shift+P .

Hľadať v súboroch

Ak sa v aktuálnych projektových súboroch nachádza text, ktorý potrebujete, môžete k nemu pristupovať kliknutím na ikonu Hľadať na bočnom paneli. Prípadne použite skratku Ctrl+Shift+F v systéme Windows alebo Cmd+Shift+F v systéme Mac.

Vymažte predchádzajúce slovo

Keď pri vymazaní slova podržíte kláves Backspace, môžete omylom vymazať ďalšie časti. Ak chcete obmedziť vymazanie na predchádzajúce slovo, použite skratku Ctrl+Backspace v systéme Windows alebo Cmd+Backspace v systéme Mac.

Kopírovať riadok

Počas vývoja programátori niekedy potrebujú skopírovať a vložiť riadky do iných častí projektu. Na linkách je potom možné vykonať drobné úpravy podľa potreby. Klávesová skratka je dobrý spôsob, ako urýchliť tento proces, najmä ak to robíte pravidelne.

Skratka systému Windows je Shift+alt+up alebo Shift+alt+down . Pre Mac je skratka Opt+shift+up alebo Opt+shift+down .

Znova otvorte zatvorený editor

Ak pracujete s obrovským HTML projektom s mnohými súbormi, môže byť frustrujúce, ak omylom zatvoríte kartu. Našťastie môžete použiť skratku na otvorenie poslednej zatvorenej karty v kóde VS

Ak chcete znova otvoriť zatvorený editor, použite skratku Ctrl+Shift+T v systéme Windows alebo Cmd +Shift+T v systéme Mac. Pomocou tejto skratky môžete otvoriť viacero zatvorených kariet.

Zrýchlite kódovanie pomocou skratiek HTML

Mnoho skratiek relatívne uľahčuje používanie kódu VS. Aj keď existuje viac možností, ako je uvedené v článku, vyššie uvedené sú niektoré z najbežnejších, ktoré môžu začiatočníci a skúsení používatelia považovať za užitočné. Vďaka popularite VS Code môže využitie všetkých funkcií spríjemniť. Vyberte si skratky, ktoré bežne používate na zvýšenie rýchlosti kódovania.

Ďalej by ste sa mali naučiť porovnať dva súbory vo VS Code .

často kladené otázky

Otázka: Sú skratky HTML prispôsobiteľné v kóde VS?

A: Áno. Skratky HTML v kóde VS si môžete prispôsobiť zmenou nastavení používateľa alebo pracovného priestoru.

Otázka: Môžem si vo VS Code vytvoriť vlastné vlastné skratky HTML?

A: Áno. Môžete vytvoriť vlastné úryvky alebo skratky HTML v kóde VS ich definovaním v nastaveniach používateľa alebo pracovného priestoru. To vám umožňuje vytvárať skratky pre často používané vzory kódu alebo vlastné prvky.