Visual Studio Code, lidově známý jako VS Code, je jedním z nejpoužívanějších editorů kódu. VS Code má vestavěnou podporu pro Node.js, JavaScript a TypeScript. Můžete však použít různá rozšíření, abyste jej zpřístupnili pro většinu ostatních jazyků a běhových prostředí.
Microsoft je společnost, která vyvinula tento bezplatný a open source editor kódu.
VS Code je populární díky těmto funkcím;
- Intellisense: VS Code poskytuje automatické dokončování kódu a zvýraznění syntaxe.
- Víceplatformní: Tento editor kódu můžete použít v operačních systémech Linux, Windows a macOS.
- Dostupnost různých rozšíření: Dostupnost různých rozšíření může také přeměnit VS Code na integrované vývojové prostředí (IDE).
- Podpora více jazyků: Tento nástroj můžete použít s téměř všemi programovacími jazyky prostřednictvím rozšíření VS Code.
- Integrovaný terminál: Vestavěný terminál ve VS Code umožňuje vývojářům spouštět příkazy Git přímo z editoru kódu. Z tohoto editoru tak můžete provádět změny, zasílat a stahovat změny.
Table of Contents
Automatické formátování v kódu VS
Předpoklady
- VS Code: Tento editor kódu je zdarma ke stažení. Pokud jej nemáte nainstalovaný ve svém počítači, stáhněte si jej z oficiálních stránek v závislosti na operačním systému.
- Vyberte jazyk, který chcete použít: Musíte se rozhodnout, jaký jazyk použít, protože pro různé jazyky existují různé formátovače.
- Formátovač: VS Code používá rozšíření pro formátování kódu. V tomto článku použijeme Prettier. Můžete však volně použít jakýkoli formátovač, který vyhovuje jazyku, který používáte.
Automatické formátování je funkce, která automaticky formátuje bloky/řádky kódu nebo soubor v editoru kódu na základě specifických pravidel a pokynů. Tato funkce je založena na konfiguračním souboru určujícím pravidla formátování pro odsazení, zalomení řádků a mezery.
Když je povolena funkce automatického formátování, všechna tato pravidla budou aplikována na všechny soubory ve vaší kódové základně, když ji píšete.
Můžete však také zakázat automatické formátování pro konkrétní blok kódu, pokud chcete, aby se odlišoval od ostatních. Chcete-li toho dosáhnout, můžete část kódu zabalit do bloku komentářů, který určuje pravidla, která se mají použít.
Výhody automatického formátování kódů v kódu VS
- Šetří čas: Psaní kódu a formátování může být časově náročné. Automatické formátování vám šetří čas a vy se tak můžete více soustředit na proces psaní a syntaxi.
- Konzistence: I když se zdrojový kód neobjevuje na straně klienta, měla by existovat určitá konzistence. Automatické formátování se hodí zejména u velkých projektů s více přispěvateli.
- Dodržuje osvědčené postupy: Funkce automatického formátování je užitečná při prosazování konzistentních konvencí odsazování, mezer a pojmenování.
- Pro snadné čtení kódu: Dobře naformátovaný kód lze snadno sledovat během kontroly kódu. Noví vývojáři, kteří se připojí k vaší organizaci, snadno porozumí dobře naformátovanému kódu.
Jak povolit automatické formátování v kódu VS a přizpůsobit jej
Chcete-li povolit automatické formátování, postupujte takto:
Jakmile je Prettier nainstalován na vašem kódu VS, můžete povolit funkci automatického formátování.
K demonstraci toho, jak povolit automatické formátování, používáme jednoduchý soubor HTML přihlašovací stránky.
Použijeme tento kód:
<!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í, je obtížné jej číst a sledovat, protože není odsazen podle očekávání. K automatickému formátování kódu použijeme Prettier.
Následuj tyto kroky.
3. Do vyhledávacího pole zadejte Formatter a na kartě Editor:Výchozí formátovač vyberte Prettier.
4. Najděte Editor: Formát na Uložit a zaškrtněte políčko.
5. Uložte soubor HTML, vyberte vstupy v dokumentu HTML, klepněte pravým tlačítkem a vyberte Formát dokumentu.
6. Zkontrolujte, zda byl dokument naformátován. Toto rozšíření automaticky naformátuje veškerý další kód, který napíšete na svůj VS kód.
6. Upravte nastavení konfigurace Prettier: Ve výchozím nastavení je Prettier nastaveno k provádění mnoha věcí. Stále si jej však můžete přizpůsobit podle svých potřeb. Přejděte do Nastavení na svém VS Code, vyhledejte Prettier a upravte nastavení podle svých představ.
7. Vytvořte soubor Prettier Configuration: Nastavení, která jste nakonfigurovali na vašem počítači, se mohou lišit od ostatních, pokud pracujete jako tým. Konfigurační soubor Prettier zajistí, že budete mít konzistentní styl kódu pro váš projekt. Pro konfiguraci nastavení projektu vytvořte soubor .prettierrc s příponou .json. Tento kód můžeme přidat do souboru JSON pro demonstrační účely;
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
}
Výše uvedený blok kódu určuje čtyři věci, koncové čárky, šířku tabulátoru, použití středníků a zda použít jednoduché nebo dvojité uvozovky. V tomto případě;
- Koncová čárka bude přidána pouze tehdy, když je kód transpilován do es5.
- Šířka tabulátoru, počet mezer pro každou tabulátor, je nastavena na 4.
- Semi označuje, zda byste měli do kódu na konec příkazů přidávat středníky nebo ne. Nastavili jsme to jako false, což znamená, že středníky nebudou přidány.
- V kódu můžete použít jednoduché nebo dvojité uvozovky. Specifikovali jsme, že bychom pro tento projekt měli používat jednoduché uvozovky.
Můžete se podívat na Prettier docs, abyste pochopili, jak vytvořit konzistentní nastavení konfigurace.
Nejlepší postupy pro automatické formátování v kódu VS
Použijte správný formát
I když jsme v tomto článku použili Prettier pro demonstrační účely, neznamená to, že to platí pro všechny jazyky. Existují stovky formátovacích rozšíření pro VS Code a je na vás, abyste určili, co vyhovuje vašim potřebám. Například formátovače jako Prettier a Beautify vyhovují HTML a CSS. Na druhou stranu můžete k formátování kódu Python použít rozšíření Black nebo Python.
Použijte konzistentní styl kódu
Jak jste viděli, můžete upravit nastavení formátovače. Pokud pracujete jako tým, ujistěte se, že máte stejné konfigurace, abyste vytvořili konzistentní styl kódu. Nejlepším přístupem je vytvoření souboru .prettierrc.extension, který bude obsahovat všechny konfigurace pro váš projekt.
Použijte linters
Linter můžete použít ke kontrole porušení stylu, syntaktických chyb a programovacích chyb v kódu. Kombinace linters s automatickým formátováním vám ušetří spoustu času a úsilí při vytváření čitelnosti kódu a ladění.
Používejte klávesové zkratky
VS Code má stovky zkratek, které vám ušetří čas při formátování. Tyto příkazy můžete dokonce přizpůsobit něčemu zapamatovatelnému.
Před potvrzením zkontrolujte svůj kód
I když lintování a automatické formátování může vyřešit některé problémy ve vašem kódu; stále musíte zkontrolovat svůj kód, než zadáte příkaz commit.
Zkratky pro formátování kódu
VS Code je multiplatformní editor kódu, který můžete použít v systémech Windows, Mac a Linux, jako je Ubuntu. Pomocí následujících zkratek můžete buď formátovat celý dokument, nebo konkrétní zvýrazněné oblasti kódu;
Okna
- Kombinace Shift + Alt + F zformátuje celý dokument.
- Kombinace Ctrl + K, Ctrl + F zformátuje část vašeho kódu, kterou jste vybrali. Například div.
Operační Systém Mac
- Kombinace Shift + Option + F zformátuje celý dokument.
- Kombinace Ctrl + K, Ctrl + F zformátuje část vašeho kódu, kterou jste vybrali. Například div.
Ubuntu
- Kombinace Ctrl + Shift + I zformátuje celý dokument.
- Kombinace Ctrl + K, Ctrl + F zformátuje část vašeho kódu, kterou jste vybrali. Například div.
Pamatujte však, že některé z těchto zkratek mohou selhat, pokud jste svůj VS kód přizpůsobili různými zkratkami.
Pomocí těchto kroků můžete zkontrolovat zkratky kódu VS;
- Otevřete VS Code a klikněte na položku Soubor v levém horním rohu.
- Přejděte na Předvolby
- Kliknutím na Klávesové zkratky zobrazíte všechny zkratky, které můžete použít.
Závěr
Automatické formátování vám může ušetřit spoustu času, když jej povolíte. Volba rozšíření se bude lišit v závislosti na jazyce, který používáte. Můžete nainstalovat více formátovačů kódu v závislosti na programovacích jazycích, které používáte pro své projekty.
Vždy si zkontrolujte dokumentaci k formátovači, který si pro svůj kód vyberete. Tím zajistíte, že budete rozumět jazykům, které podporuje, a tomu, jak je co nejlépe využít.
Podívejte se na náš článek o nejlepších rozšířeních VS Code, která by vývojáři měli používat.