Jak automaticky formátovat v kódu VS, abyste ušetřili čas a námahu [2023]

Obsah

Visual Studio Code: Oblíbený editor kódu

Visual Studio Code, často zkracovaný na VS Code, je hojně využívaný editor kódu mezi vývojáři. Jeho základní výbava zahrnuje podporu pro technologie jako Node.js, JavaScript a TypeScript. Nicméně, díky široké škále dostupných rozšíření, je možné ho přizpůsobit pro práci s téměř jakýmkoli programovacím jazykem a vývojovým prostředím.

Tento bezplatný editor s otevřeným zdrojovým kódem byl vyvinut společností Microsoft.

Obrovská popularita VS Code pramení z jeho bohaté funkčnosti, která zahrnuje:

Inteligentní nápověda (Intellisense): Nabízí automatické doplňování kódu a barevné zvýrazňování syntaxe, což značně usnadňuje psaní kódu.
Multiplatformní použití: Bez problémů jej lze používat na operačních systémech Linux, Windows i macOS.
Rozšiřitelnost: Díky rozmanité nabídce rozšíření lze VS Code transformovat v plnohodnotné integrované vývojové prostředí (IDE).
Podpora mnoha jazyků: S využitím vhodných rozšíření můžete tento nástroj používat s prakticky všemi programovacími jazyky.
Integrovaný terminál: Vestavěný terminál umožňuje vývojářům provádět příkazy Git přímo z editoru, včetně správy změn, odesílání a stahování úprav kódu.

Automatické formátování kódu ve VS Code

Předpoklady:

VS Code: Editor si můžete zdarma stáhnout z oficiálních webových stránek, a to v závislosti na operačním systému vašeho počítače.
Volba jazyka: Je nutné se rozhodnout, jaký programovací jazyk budete používat, jelikož pro každý jazyk existují specifické formátovače.
Formátovač: VS Code využívá rozšíření pro automatické formátování kódu. V tomto příkladu se budeme věnovat rozšíření Prettier. Je však možné použít jakýkoli jiný formátovač, který vyhovuje vašemu používanému programovacímu jazyku.

Automatické formátování je funkce, která na základě předem definovaných pravidel a pokynů automaticky upravuje bloky kódu, řádky či celé soubory. Pravidla pro odsazování, zalomení řádků a mezery jsou definovány v konfiguračním souboru.

Při aktivované funkci automatického formátování se tato pravidla aplikují na všechny soubory v kódové základně, jakmile je začnete psát.

Automatické formátování lze deaktivovat pro konkrétní bloky kódu, které chcete odlišit od ostatních. Toho docílíte tak, že danou část kódu obalíte do komentářového bloku s určenými pravidly.

Výhody automatického formátování kódu ve VS Code

Úspora času: Automatické formátování značně šetří čas, který by byl jinak stráven ručním formátováním, a umožňuje se tak více soustředit na samotný proces psaní kódu a jeho syntaxi.
Konzistence: I když zdrojový kód není přímo viditelný uživatelům webových stránek, je důležitá jeho vnitřní konzistence. Automatické formátování je zvláště užitečné u větších projektů, na kterých pracuje více vývojářů.
Dodržování osvědčených postupů: Automatické formátování pomáhá udržovat jednotný styl odsazování, používání mezer a pojmenování proměnných, což je klíčové pro dobré kódovací praktiky.
Snadná čitelnost kódu: Dobře naformátovaný kód je snadněji pochopitelný při kontrole kódu. Noví vývojáři, kteří se připojí k týmu, také lépe porozumí kódu, který má jasnou strukturu.

Jak povolit a přizpůsobit automatické formátování ve VS Code

Postup pro aktivaci automatického formátování:

Pro povolení automatického formátování v editoru VS Code je nutné mít nainstalovaný formátovač jako rozšíření. Ikona rozšíření se nachází v postranním panelu editoru.
Nainstalujte rozšíření Prettier. Stačí vyhledat „Prettier“ a vybrat první výsledek od vývojáře „Prettier“, poté kliknout na „Instalovat“.

Po instalaci rozšíření Prettier je možné aktivovat funkci automatického formátování.

Pro demonstraci aktivace automatického formátování použijeme jednoduchý HTML kód přihlašovací stránky.

Následující kód bude použit jako příklad:

<!DOCTYPE html>
<html>
<head>
    <title>Login Form</title>
</head>
<body style>
    <h2 style="text-align: center; margin-top: 50px;">Login </h2>
    <form action="" method="POST" style="max-width: 250px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 5px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);">
        <label for="email" style="display: block; margin-bottom: 10px;">Enter Email</label>
        <input type="email" id="email" name="email" required style="width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc;"><br><br>
        <label for="password" style="display: block; margin-bottom: 10px;">Enter Password</label>
        <input type="password" id="password" name="password" required style="width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc;"><br><br>
        <input type="submit" value="Login" style="background-color: #af4c9e; color: white; padding: 10px 20px; border: none; border-radius: 3px; cursor: pointer;">
    </form>
</body>
</html>

I když je výše uvedený kód funkční, jeho čitelnost a sledování jsou ztížené z důvodu chybějícího odsazení. K automatickému formátování použijeme rozšíření Prettier.

Postupujte podle následujících kroků:

Vytvořte HTML soubor (např. index.html) a vložte do něj výše uvedený kód.
V levém dolním rohu editoru VS Code klikněte na ikonu Nastavení.
Do vyhledávacího pole napište „Formatter“ a v záložce „Editor: Výchozí formátovač“ vyberte Prettier.
Vyhledejte „Editor: Formátovat při uložení“ a zaškrtněte políčko.
Uložte HTML soubor, vyberte v dokumentu HTML kód, klikněte pravým tlačítkem myši a zvolte „Formátovat dokument“.
Ověřte, že byl dokument naformátován. Od tohoto okamžiku bude veškerý další kód automaticky formátován během psaní ve VS Code.
Přizpůsobení nastavení Prettier: Prettier má mnoho výchozích nastavení. Je možné si je přizpůsobit dle vašich potřeb. V Nastavení ve VS Code vyhledejte „Prettier“ a upravte nastavení.
Vytvoření konfiguračního souboru Prettier: Nastavení na vašem počítači se mohou lišit od nastavení ostatních, pokud pracujete v týmu. Konfigurační soubor Prettier zajišťuje, že v projektu bude použit jednotný styl kódu. Pro konfiguraci nastavení projektu vytvořte soubor .prettierrc s příponou .json. Pro demonstrační účely přidáme následující kód do souboru JSON:

{
    "trailingComma": "es5",
    "tabWidth": 4,
    "semi": false,
    "singleQuote": true
  }

Výše uvedený kód určuje čtyři aspekty formátování: koncové čárky, šířku tabulátoru, použití středníků a preferenci jednoduchých uvozovek.

Koncová čárka se přidá pouze pokud je kód transpilován do ES5.
Šířka tabulátoru, tedy počet mezer pro každý tabulátor, je nastavena na 4.
„Semi“ určuje, zda mají být na konci příkazů použity středníky. „false“ znamená, že středníky nebudou používány.
V kódu se mohou používat jednoduché nebo dvojité uvozovky. V tomto projektu je přednost dána jednoduchým uvozovkám.

Pro podrobnější informace o možnostech konfigurace Prettier doporučujeme nahlédnout do oficiální dokumentace.

Doporučené postupy pro automatické formátování kódu ve VS Code

Používejte vhodný formátovač

I když v tomto článku používáme Prettier jako příklad, neznamená to, že je vhodný pro všechny jazyky. Existuje mnoho rozšíření pro formátování kódu a je důležité vybrat si to, které nejlépe vyhovuje vašim potřebám. Například Prettier a Beautify jsou vhodné pro HTML a CSS, pro Python existují rozšíření jako Black nebo Python formatter.

Používejte konzistentní styl kódu

Jak jste viděli, můžete si přizpůsobit nastavení formátovače. Pokud pracujete v týmu, je důležité, aby všichni používali stejnou konfiguraci, aby se vytvořil jednotný styl kódu. Nejlepší praxí je vytvořit konfigurační soubor (např. .prettierrc), který bude obsahovat všechna nastavení pro daný projekt.

Používejte Lintery

Lintery pomáhají kontrolovat styl kódu, odhalovat syntaktické chyby a programátorské nedostatky. Kombinace linterů s automatickým formátováním šetří čas a usnadňuje vytváření kvalitního a čitelného kódu.

Používejte klávesové zkratky

VS Code nabízí velké množství klávesových zkratek, které vám ušetří čas při formátování kódu. Tyto zkratky si můžete přizpůsobit podle svých potřeb.

Zkontrolujte kód před commitováním

I když automatické formátování a lintery mohou vyřešit mnoho problémů s kódem, doporučuje se ho vždy před commitováním ještě jednou manuálně zkontrolovat.

Klávesové zkratky pro formátování kódu

VS Code je multiplatformní editor, který lze používat na systémech Windows, macOS i Linux. Následující klávesové zkratky umožňují formátovat buď celý dokument, nebo vybranou část kódu.

Windows

Shift + Alt + F zformátuje celý dokument.
Ctrl + K, Ctrl + F zformátuje označenou část kódu.

macOS

Shift + Option + F zformátuje celý dokument.
Ctrl + K, Ctrl + F zformátuje označenou část kódu.

Ubuntu

Ctrl + Shift + I zformátuje celý dokument.
Ctrl + K, Ctrl + F zformátuje označenou část kódu.

Je důležité si uvědomit, že některé klávesové zkratky mohou selhat, pokud jste je ve VS Code upravili.

Postup pro kontrolu klávesových zkratek ve VS Code:

Otevřete VS Code a v levém horním rohu klikněte na „Soubor“.
Přejděte na „Předvolby“.
Klikněte na „Klávesové zkratky“, kde se zobrazí všechny zkratky.

Závěr

Automatické formátování kódu je velmi užitečná funkce, která vám šetří čas. Volba rozšíření pro formátování se liší dle programovacího jazyka. Doporučuje se nainstalovat více formátovačů dle projektů, na kterých pracujete.

Vždy si pečlivě prostudujte dokumentaci vybraného formátovače, abyste plně pochopili jeho funkce a podporované jazyky.

Podívejte se také na náš článek o nejlepších rozšířeních pro VS Code, které by měl každý vývojář používat.