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

2023-03-13 etechblogcz

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.

Jak povolit upozornění LED bleskem, pouze když je váš iPhone tichý

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:

K povolení automatického formátování ve VS Code potřebujete formátovač ve formě rozšíření. Ikonu rozšíření najdete v nabídce svého kódu VS.

Nainstalujte rozšíření Prettier. Hledejte hezčí; najdete spoustu rozšíření sdílejících stejný název. Klikněte na první, developer by Prettier, a klikněte na „instalovat“.

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.

Vytvořte soubor HTML (index.html) a přidejte výše uvedený kód

Najděte Nastavení v levé dolní části vašeho kódu VS

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.

Jak najít a odstranit snímky obrazovky ve Fotkách Google

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í.

Jak rychle přepínat mezi účty Gmail na Androidu, iPhonu a iPadu

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.

Váš názor?