Při zadávání příkazů ve VS Code může být někdy snaha o čistotu to poslední, na co myslíte. Ačkoli formátování není ke spuštění programu nutné, velmi pomáhá při ladění a při pokusu o nalezení chyb.
V tomto článku vám ukážeme, jak formátovat kód ve VS Code, spolu s dalšími užitečnými tipy, jak udržet váš kód dobře organizovaný.
Jak formátovat kód
VS Code má vestavěné příkazy pro uspořádání aktuálně napsaného kódu do standardního formátu. Tyto klávesové zkratky nevyžadují žádná další rozšíření a lze je použít kdykoli. Zkratky jsou následující:
Pro PC
Naformátujte celý dokument:
Otevřete soubor s kódem, který chcete naformátovat.
Stiskněte „Shift + Alt + F“.
Uložte změny kliknutím na „Soubor“ v levém horním rohu a výběrem „Uložit“ nebo stisknutím „Ctrl + S“.
Formátování pouze vybraného kódu:
V souboru s řádky kódu, které chcete formátovat, vyberte řádky tak, že je zvýrazníte myší.
Stiskněte „Ctrl + K“.
Stiskněte „Ctrl + F“.
Uložte změny buď výběrem „Uložit“ v nabídce Soubor v levém horním rohu nebo stisknutím „Ctrl + S“.
Všimněte si, že pokud stisknete „Ctrl + F“ bez předchozího stisknutí „Ctrl + K“, otevře se nabídka Najít. Pokud k tomu dojde, stačí zavřít kliknutím na tlačítko „x“ nebo stisknutím klávesy Esc.
Přesunout řádky nahoru nebo dolů:
Přesuňte kurzor na začátek řádku, který chcete přesunout.
Podržte klávesu Alt.
Chcete-li čáru posunout nahoru, stiskněte šipku nahoru. Chcete-li jej přesunout dolů, stiskněte šipku dolů.
Uložte soubor výběrem z nabídky Soubor v levém horním rohu okna nebo stisknutím „Ctrl + S“.
Změnit odsazení jednoho řádku:
Přesuňte kurzor na začátek řádku, ve kterém chcete změnit odsazení.
Stisknutím „Ctrl + ]“ zvětšíte odsazení.
Stiskněte „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 “⌘ + ]” pro zvětšení odsazení.
Stisknutím „⌘ +[“zmenšíteodsazení[“todecreasetheindent
Uložte soubor stisknutím „⌘ + S“ nebo výběrem „Uložit“ z nabídky Soubor v levém horním rohu okna.
Kód formátu VS kódu při uložení
VS Code nemá nativní příkaz, který formátuje váš dokument při uložení. Místo toho to lze provést instalací rozšíření pro formátování do aplikace VS Code. Nejoblíbenější z těchto rozšíření je Prettier, které poskytuje spoustu funkcí formátování VS Code. Prettier lze nainstalovat následujícím způsobem:
Otevřete kód VS.
Klikněte na tlačítko Rozšíření umístěné v levé nabídce. Toto je ikona, která vypadá jako čtyři políčka. Případně můžete stisknout „Ctrl + Shit + x“ pro PC nebo „⌘ + ⇧ + x“ pro Mac.
Do vyhledávacího pole v horní části nabídky zadejte Prettier.
Klikněte na tlačítko Instalovat v pravém dolním rohu ikony Prettier.
Počkejte, až rozšíření dokončí instalaci.
Než bude Prettier moci začít automaticky formátovat váš dokument při uložení, budete muset nastavit rozšíření pro aktivaci funkce. To se provádí následujícím způsobem:
Otevřete okno nastavení stisknutím „Ctrl +“ na PC nebo „⌘ +“ na Macu.
Do vyhledávacího pole zadejte formátovač. To by mělo vyvolat několik nastavení formátování.
V nastavení Editor: Výchozí formátovač se ujistěte, že vybraná přípona je Prettier. Pokud neexistuje žádný výchozí formátovač nebo VS Code ve výchozím nastavení používá jiný formátovač, stiskněte šipku rozevíracího seznamu. Ze seznamu vyberte „Prettier – Code Formatter“. Případně se Prettier může objevit na seznamu jako „esbenp.prettier-vscode“.
Ujistěte se, že byla zaškrtnuta možnost „Editor: Formát při uložení“. Pokud ne, přepněte zaškrtnutí.
Do vyhledávacího pole nastavení zadejte „Hezčí“.
Posouvejte se dolů, dokud nenajdete řádek „Prettier: Require Config“. Ujistěte se, že bylo zaškrtnuto políčko. Toto nastavení zabrání Prettier ve formátování dokumentů bez konfiguračního souboru. To je užitečné, když se díváte na stažený kód, který může mít svá vlastní pravidla formátování. Zabráníte tak nechtěnému přepsání možností formátování. Pamatujte, že soubory bez názvu budou stále automaticky naformátovány, i když je toto nastavení zaškrtnuto.
Konkrétní nastavení Prettier můžete upravit podle svých preferencí. Jakmile budete hotovi, můžete tuto nabídku opustit.
Protože jste nakonfigurovali Prettier tak, aby se automaticky formátoval pouze v případě, že existuje konfigurační soubor, musíte jej vytvořit pro každý projekt. To se provádí podle následujících kroků:
V levé nabídce vyberte kořen projektu.
Kliknutím na tlačítko nový soubor vytvoříte konfigurační soubor.
Pojmenujte tento soubor „.prettierrc.“
V souboru stačí zadat {}.
Prettier nyní automaticky naformátuje váš dokument, kdykoli jej uložíte.
Tipy pro pořádek v kódu
Ačkoli odsazení není pro běh programu nutné, může pomoci při ladění rozdělením kódu do spravovatelných modulů. Například příkazy If-Then nebo vnořené případy z toho mohou těžit tím, že každou alternativní možnost od sebe vizuálně odliší. To se hodí, když místo syntaktických chyb řešíte logické chyby.
Pokud pojmenováváte moduly nebo krátké řádky kódu, udělejte si zvyk používat popisné názvy, spíše než tomu říkat modul 1, modul 2 atd. Usnadníte si tak zjištění, která část kódu vykonává určitou funkci.
Vždy je dobré využít komentáře ve svůj prospěch. Ať už přidáváte rychlý popis, nebo jen přidáváte poznámku pro sebe, komentáře při ladění nesmírně pomáhají.
Organizační kodex
Udržování správného formátu projektů nejen usnadňuje čtení, ale také pomáhá při identifikaci chyb a udržuje váš kód uspořádaný. Ačkoli to není nutné pro běh programu, znalost, jak formátovat soubory ve VS Code, je jednoznačnou výhodou.
Znáte další způsoby formátování souborů ve VS Code? Neváhejte se podělit o své myšlenky v sekci komentářů níže.
