Nejlepší zkratky HTML kódu VS

Visual Studio Code (VS Code) nabízí mnoho cenných funkcí a zkratek pro zjednodušení vývoje HTML. Tyto funkce jsou praktické a umožňují vývojářům strávit méně času psaním kódu. I když možná nebudete používat všechny dostupné zkratky, naučit se ty nejdůležitější může zabrat dlouhou cestu. Tento článek popisuje některé z nejšikovnějších zkratek, které je třeba vzít v úvahu při kódování HTML.

Emmet Zkratky

VS Code podporuje Emmet. Tento nástroj usnadňuje psaní kódu CSS a HTML pomocí zkratek. Základní struktura HTML se rozšíří, pokud napíšete vykřičník (!) a stisknete Tab.

Emmet zavádí možnosti rozšíření, které zkracují čas potřebný k vytvoření kódu pomocí HTML v kódu Visual Studio. Můžete to použít i v jiných editorech. Psaní zkratkových výrazů má za následek kompletní struktury v HTML.

• Základní zkratky Emmet : Tyto zkratky rozšiřují některé běžně používané prvky. Zadáním div a následným stisknutím Tab se rozšíří na , zatímco p se rozšíří na

  . Pokud zadáte ul>li*3 , rozbalí se na seznam se třemi položkami.

• Vnořené prvky : Pomocí > lze určit podřízené prvky. Například div>h1 se rozšíří na , čímž v podstatě vytvoří prvek s

  prvek uvnitř.

• Násobení : Násobení generuje více prvků. Přidáním *3 do seřazeného seznamu se vygeneruje seznam se třemi položkami.
• Atributy : Přidejte atributy k prvkům HTML v hranatých závorkách. Například [href=”#”] se změní na , čímž se vytvoří kotvící prvek s atributem href.
• Syntaxe podobná CSS : Syntaxe je inspirována selektory CSS, díky čemuž je známá a intuitivní pro webové vývojáře.
• Matematické výrazy : Uvnitř zkratek můžete provádět některé základní matematické operace. Například div>ul>li.item$*3 se rozbalí na an

  prvek obsahující uspořádaný seznam se třemi položkami seznamu s názvy tříd item1, item2 a item3.

Zkratky se rozbalují zadáním a následným stisknutím tlačítka Tab . Pokud pro vaši zkratku existuje několik platných vysvětlení, cyklujte je opětovným stisknutím možnosti Tab . Emmet zkratky nejsou specifické pro VS Code. Můžete je použít v jiných editorech, které podporují Emmet.

Zabalení štítků

Vyberte řádek nebo příkaz a poté stiskněte Ctrl+Shift+G, pokud používáte Linux nebo Windows. Pokud používáte Mac, použijte Cmd+Shift+G . Tato zkratka obalí vybraný obsah značkou HTML.

Toto je pohodlná funkce ve VS Code. Je to užitečné, když musíte obsah obsahu uzavřít značkami nebo když potřebujete strukturovat kód. Výběr může být jeden řádek, více řádků nebo blok kódu.

Další možností je kliknout pravým tlačítkem na vybraný kód a v kontextové nabídce vybrat možnost Zabalit se zkratkou . Když spustíte příkaz zalamování značky, zobrazí se výzva, kde můžete vybrat požadovaný název značky HTML. Pokud zadáte div , například a

prvek obalí vybraný kód.

Obtékání tagů pomáhá při označování a strukturování kódu bez ručního zadávání úvodních a uzavíracích tagů. To ušetří spoustu času a sníží výskyt syntaktických chyb.

Formátování

Formátování HTML kódu je dobrý způsob, jak zachovat konzistenci a čitelnost v projektech. V kódu VS umožňují vestavěné možnosti formátování, aby akce probíhala automaticky v HTML podle předem definovaných pravidel.

Klávesová zkratka používaná k formátování HTML je Shift+Alt+F pro Windows a Linux. Shift+Option+F funguje na macOS. 

Zástupce může formátovat celý HTML dokument nebo část kódu. Když jej stisknete, použijí se pravidla formátování. Mezery odsazení a zalomení řádků se odpovídajícím způsobem upraví.

Můžete také automaticky formátovat kód ve VS Code .

komentování

Můžete komentovat nebo zrušit komentáře buď na jednom řádku, nebo na více řádcích kódu podle výběru současně. Pokud komentář již existuje, zástupce komentář odebere, a pokud není komentován, přidá se komentáře. Komentáře v HTML jsou uzavřeny ve značkách.

Kódová navigace

To se týká schopnosti pohybovat se mezi různými částmi kódové základny nebo přeskočit přímo na definice v atributech nebo značkách HTML. Pomocí možnosti Ctrl+] v systémech Linux a Windows můžete procházet značky. Uživatelé Mac mohou použít Cmd+] k přechodu na uzavírací značku prvku. Chcete-li přejít na úvodní značku, stiskněte Ctrl+[ pro Windows a Linux nebo Cmd +[ pro Mac.

Chcete-li přejít na definici atributu nebo značky, použijte klávesu F12 . Identifikuje odpovídající uzavírací nebo otevírací značku kódové základny pro nalezení správného umístění.

K definici budete stále přistupovat, když podržíte klávesu Ctrl a kliknete na atribut nebo značku HTML v systému Windows. Stiskněte Command+klikněte na macOS pro stejnou akci. Tím odpadá nutnost hledat místo ručně.

Režim Zen

Tento režim je bez rozptylování. Skrytím tlačítek a panelů nástrojů usnadňuje vývojářům soustředit se výhradně na kód. Aktivujte tento režim pomocí zkratky Ctrl+KZ na Windows a Cmd+KZ na Macu. Případně přejděte na Zobrazit a poté na Vzhled . Zde zapněte režim Zen .

Paleta příkazů

Toto je široce používaná funkce ve VS Code a je užitečná zejména pro začátečníky. Představuje každou možnost konfigurace, zástupce a funkčnosti a je ve formě seznamu.

Jediné, co musíte udělat, je napsat, co chcete udělat na paletě příkazů. Dostanete různé příkazy, které vám pomohou.

Pro přístup k paletě příkazů použijte zkratku Ctrl+Shift+P pro Windows. Zkratka pro Mac je Cmd+Shift+P .

Hledat soubory

Pokud se v aktuálních souborech projektu nachází text, který potřebujete, můžete se k němu dostat kliknutím na ikonu Hledat v postranním panelu. Případně použijte zkratku Ctrl+Shift+F na Windows nebo Cmd+Shift+F na Macu.

Odstranit předchozí slovo

Když podržíte klávesu Backspace pro smazání slova, můžete nechtěně smazat další části. Chcete-li omezit mazání na předchozí slovo, použijte zkratku Ctrl+Backspace na Windows nebo Cmd+Backspace na Macu.

Kopírovat řádek

Během vývoje potřebují programátoři někdy zkopírovat a vložit řádky do jiných částí projektu. Drobné úpravy pak lze provést na linkách podle potřeby. Klávesová zkratka je dobrý způsob, jak tento proces urychlit, zvláště pokud to děláte pravidelně.

Zkratka Windows je Shift+alt+up nebo Shift+alt+down . Pro Mac je zkratka Opt+shift+nahoru nebo Opt+shift+dolů .

Znovu otevřete uzavřený editor

Pokud zpracováváte velký projekt HTML s mnoha soubory, může být frustrující, pokud omylem zavřete kartu. Naštěstí můžete použít zkratku k otevření poslední zavřené karty ve VS Code

Chcete-li znovu otevřít zavřený editor, použijte zkratku Ctrl+Shift+T ve Windows nebo Cmd +Shift+T na Macu. Pomocí této zkratky můžete otevřít více zavřených karet.

Zrychlete kódování pomocí zkratek HTML

Mnoho zkratek relativně usnadňuje používání kódu VS. I když existuje více možností, než je uvedeno v článku, výše uvedené jsou některé z nejčastějších, které mohou začátečníci a zkušení uživatelé považovat za užitečné. Díky popularitě VS Code může využití všech funkcí zpříjemnit. Vyberte si zkratky, které běžně používáte pro zvýšení rychlosti kódování.

Dále byste se měli naučit, jak porovnat dva soubory ve VS Code .

Nejčastější dotazy

Otázka: Jsou zkratky HTML přizpůsobitelné ve VS Code?

A: Ano. Zkratky HTML v kódu VS si můžete přizpůsobit změnou nastavení uživatele nebo pracovního prostoru.

Otázka: Mohu si ve VS Code vytvořit vlastní vlastní zkratky HTML?

A: Ano. Můžete vytvářet vlastní úryvky nebo zkratky HTML v kódu VS tak, že je definujete v nastavení uživatele nebo pracovního prostoru. To vám umožní vytvářet zkratky pro často používané vzory kódu nebo vlastní prvky.