Jak formátovat kód v kódu VS

Při psaní kódu ve VS Code se někdy může stát, že uspořádání a přehlednost nejsou prioritou. Ačkoli formátování kódu není nezbytné pro jeho správné fungování, výrazně usnadňuje ladění a hledání případných chyb.

V tomto článku si ukážeme, jak lze kód ve VS Code formátovat, a přidáme pár tipů, jak udržet kód přehledný a organizovaný.

Možnosti formátování kódu

VS Code nabízí integrované nástroje pro automatické uspořádání kódu do standardního formátu. Tyto klávesové zkratky nevyžadují žádné dodatečné instalace a jsou dostupné okamžitě. Níže naleznete jejich přehled:

Pro uživatele PC

Formátování celého dokumentu:

1. Otevřete soubor s kódem, který chcete naformátovat.
2. Stiskněte klávesovou zkratku „Shift + Alt + F“.
3. Uložte provedené změny buď kliknutím na „Soubor“ v horní liště a výběrem možnosti „Uložit“, nebo stisknutím „Ctrl + S“.

Formátování pouze vybrané části kódu:

1. V souboru vyberte myší část kódu, kterou chcete naformátovat.
2. Stiskněte klávesy „Ctrl + K“.
3. Následně stiskněte „Ctrl + F“.
4. Uložte změny kliknutím na „Uložit“ v nabídce „Soubor“ nebo pomocí zkratky „Ctrl + S“.

Pokud stisknete „Ctrl + F“ bez předchozího stisknutí „Ctrl + K“, otevře se okno pro vyhledávání. V takovém případě okno zavřete kliknutím na „x“ nebo stisknutím klávesy Esc.

Přesouvání řádků kódu:

1. Umístěte kurzor na začátek řádku, který chcete přesunout.
2. Podržte klávesu Alt.
3. Pro přesun řádku nahoru stiskněte šipku nahoru, pro přesun dolů šipku dolů.
4. Uložte změny volbou „Uložit“ z nabídky „Soubor“ nebo stisknutím „Ctrl + S“.

Změna odsazení jednoho řádku:

1. Umístěte kurzor na začátek řádku, u kterého chcete změnit odsazení.
2. Pro zvětšení odsazení stiskněte „Ctrl + ]“.
3. Pro zmenšení odsazení stiskněte „Ctrl + [“.
4. Uložte změny kliknutím na „Uložit“ v nabídce „Soubor“ nebo pomocí klávesové zkratky „Ctrl + S“.

Pro uživatele Mac

Formátování celého dokumentu:

1. Otevřete soubor, který chcete formátovat.
2. Stiskněte klávesovou zkratku „⇧ + ⌥ + F“.
3. Uložte změny kliknutím na „Soubor“ a následně „Uložit“ nebo pomocí klávesové zkratky „⌘ + S“.

Formátování pouze vybrané části kódu:

1. Označte část kódu, kterou chcete formátovat.
2. Stiskněte „⌘ + K“.
3. Poté stiskněte „⌘ + F“.
4. Uložte soubor stisknutím „⌘ + S“ nebo volbou „Uložit“ z nabídky „Soubor“.

Pokud stisknete „⌘ + F“ bez předchozího stisknutí „⌘ + K“, otevře se okno pro vyhledávání. V takovém případě ho zavřete kliknutím na „x“ nebo stisknutím klávesy Esc.

Přesouvání řádků kódu:

1. Umístěte kurzor na začátek řádku, který chcete přesunout.
2. Podržte klávesu „⌥“.
3. Pro přesun nahoru stiskněte šipku nahoru, pro přesun dolů šipku dolů.
4. Uložte změny volbou „Uložit“ z nabídky „Soubor“ nebo stisknutím „⌘ + S“.

Změna odsazení jednoho řádku:

1. Umístěte kurzor na začátek řádku, u kterého chcete změnit odsazení.
2. Pro zvětšení odsazení stiskněte „⌘ + ]“.
3. Pro zmenšení odsazení stiskněte „⌘ + [“.
4. Uložte soubor stisknutím „⌘ + S“ nebo volbou „Uložit“ z nabídky „Soubor“.

Automatické formátování při ukládání

VS Code standardně nenabízí automatické formátování kódu při ukládání. Nicméně, tuto funkci lze aktivovat pomocí rozšíření. Jedním z nejoblíbenějších je Prettier, který nabízí mnoho možností formátování. Instalace Prettier:

1. Otevřete VS Code.
2. V levém panelu klikněte na ikonu Rozšíření (čtyři čtverečky) nebo stiskněte „Ctrl + Shift + x“ (PC) či „⌘ + ⇧ + x“ (Mac).
3. Do vyhledávacího pole zadejte „Prettier“.
4. Klikněte na tlačítko „Instalovat“ u rozšíření Prettier.
5. Počkejte na dokončení instalace.

Pro aktivaci automatického formátování při ukládání je potřeba nastavit Prettier:

1. Otevřete nastavení stisknutím „Ctrl + ,“ (PC) nebo „⌘ + ,“ (Mac).
2. Do vyhledávacího pole zadejte „formátovač“. Zobrazí se nastavení formátování.
3. V nastavení „Editor: Výchozí formátovač“ zkontrolujte, zda je vybrán „Prettier“. Pokud ne, vyberte ho z rozbalovací nabídky. Někdy se Prettier může objevit pod názvem „esbenp.prettier-vscode“.
4. Ujistěte se, že je zaškrtnuta možnost „Editor: Formátovat při uložení“. Pokud ne, zaškrtněte ji.
5. Do vyhledávacího pole zadejte „Prettier“.
6. Sjeďte dolů a najděte „Prettier: Require Config“. Zaškrtněte toto pole. Zabráníte tak Prettieru ve formátování dokumentů bez konfiguračního souboru, což je užitečné při práci s cizím kódem, který může mít vlastní pravidla formátování. Soubory bez názvu budou formátovány i s touto volbou zaškrtnutou.
7. Dle potřeby si můžete nastavení Prettier dále upravit. Po dokončení nastavení, můžete toto okno zavřít.

Protože jste nastavili Prettier, aby se aktivoval pouze v případě konfiguračního souboru, musíte ho vytvořit pro každý projekt. Postup:

1. V levém panelu vyberte kořen vašeho projektu.
2. Klikněte na ikonu nového souboru pro vytvoření konfiguračního souboru.
3. Pojmenujte soubor „.prettierrc“.
4. V souboru zadejte {}.
5. Od této chvíle bude Prettier automaticky formátovat kód při každém uložení.

Tipy pro udržení kódu v pořádku

1. Přestože odsazení není pro funkčnost kódu nezbytné, usnadňuje orientaci v kódu a ladění, jelikož rozděluje kód do logických celků. To platí zejména pro příkazy If-Then nebo vnořené bloky, které je tak možné vizuálně odlišit. Je to velmi užitečné při hledání logických chyb.
2. Při pojmenovávání modulů nebo proměnných používejte popisné názvy, namísto „modul 1“, „modul 2“ atd. Usnadní to identifikaci účelu dané části kódu.
3. Komentáře jsou velmi důležité pro pochopení kódu. Přidávejte krátké popisy, poznámky pro sebe, abyste si i po delší době pamatovali, co daná část kódu dělá.

Závěrem

Udržování kódu v přehledném formátu nejen usnadňuje čtení, ale pomáhá také při hledání chyb. I když není formátování nutné pro samotný běh programu, znalost, jak formátovat soubory ve VS Code, je velkou výhodou.

Znáte další způsoby, jak formátovat kód ve VS Code? Podělte se o své tipy v komentářích.