Prettier – je to nástroj, který pomáhá automaticky formátovat kód, takže je čitelnější a pohodlnější pro týmovou práci. VS Code nabízí praktický plugin pro použití Prettier v projektech na TypeScriptu. V tomto Guide vám ukážeme, jak nastavit Prettier ve VS Code pro projekty TypeScript, abyste si mohli užít skvělé formátování kódu.
Nejprve nainstalujte Prettier plugin z marketingu VS Code. Vyhledejte "Prettier-Code formatter" a nainstalujte jej. Tento plugin nám umožňuje používat Prettier přímo uvnitř VS Code, aniž bychom museli spouštět samostatný příkaz.
Po úspěšné instalaci přejděte do nastavení VS Code otevřením nabídky "File" - > "Preferences" - > "Settings". Tím se otevře panel nastavení editoru. V tomto panelu vlevo jsou dvě karty: "User"a " Workspace". Karta " User "odkazuje na nastavení, která se vztahují na Váš uživatelský profil, zatímco" Workspace " odkazuje na aktuální projekt.
Co je Prettier?
Výhodou použití Prettier je, že se vyhne dlouhým diskusím o stylu kódu ve vývojářském týmu, protože všechna nastavení jsou na jednom místě a aplikují se automaticky.
Prettier podporuje různé programovací jazyky, včetně TypeScriptu, JavaScriptu, HTML, CSS a mnoha dalších. Díky tomu mohou vývojáři používat Prettier v různých projektech a v různých programovacích jazycích.
Chcete-li použít aplikaci Prettier ve spolupráci s Visual Studio Code, musíte nainstalovat rozšíření Prettier - Code Formatter. Po instalaci přípony Prettier automaticky formátuje váš kód podle zvolených pravidel při ukládání souboru nebo na vyžádání.
Musíte nastavit Prettier pomocí souboru .prettierrc určit pravidla formátování, která Prettier použije. Můžete použít přednastavená pravidla nebo je nakonfigurovat podle preferencí vašeho projektu.
Použití Prettier umožňuje výrazně urychlit proces vývoje, protože není nutné ztrácet čas ručním formátováním kódu. Navíc díky jednotnému stylu kódování se Projekt stává čitelnějším a srozumitelnějším pro všechny členy vývojového týmu.
Proč používat Prettier pro TypeScript?
1. Jednotný styl kódování: Prettier poskytuje jednotný a konzistentní styl kódování ve vašem projektu. To je zvláště důležité v týmovém vývoji, kdy různí vývojáři mohou mít různé preference ohledně stylu kódování. Prettier vám umožňuje nastavit obecně přijímaný styl a automaticky jej aplikovat na váš kód.
2. Časová úspora: Prettier automaticky formátuje váš kód, což vám ušetří spoustu času a energie. Místo toho, abyste trávili čas snahou vyrovnat řádky kódu nebo opravit nesprávné odsazení, můžete se zaměřit na samotný vývoj.
3. Zlepšení čitelnosti kódu: Prettier dělá váš kód čistším a čitelnějším. Automaticky upravuje odsazení, přidává mezery a zarovnává operátory. To umožňuje snazší pochopení kódu a rychlejší nalezení chyb.
4. Integrace s Editory kódu: Prettier se snadno integruje s různými editory kódu, včetně VS Code. Prettier můžete nakonfigurovat tak, aby formátoval váš kód při ukládání souboru nebo dokonce při zadávání. To usnadňuje proces používání Prettier a umožňuje trvalou aplikaci formátování na váš kód.
V důsledku toho vám použití Prettier pro TypeScript umožňuje vytvořit čistší, konzistentnější a čitelnější kód. Díky tomu je váš projekt udržitelnější a zlepšuje proces vývoje.
Nastavení Prettier pro VS Code
Chcete-li nastavit Prettier ve vývojovém prostředí Visual Studio Code (VS Code), musíte postupovat podle několika jednoduchých kroků:
1. Instalace rozšíření Prettier pro VS Code. Otevřete panel Extensions (Ctrl+Shift+X) a zadejte do vyhledávacího pole "Prettier - Code formatter". Nainstalujte nalezené rozšíření.
2. Nastavení závislostí projektu. Pokud jste do svého projektu ještě nenainstalovali Prettier, otevřete terminál a nainstalujte jej pomocí npm nebo yarn. Pro npm proveďte příkaz:
npm install --save-dev prettier
3. Vytvoření souboru nastavení. V kořeni vašeho projektu vytvořte soubor s názvem .prettierrc a definujte potřebná nastavení formátování. Například:
4. Automatické formátování. Po instalaci přípony Prettier a vytvoření souboru nastavení, VS Code bude automaticky formátovat váš kód při ukládání souboru. Kód můžete také formátovat ručně pomocí příkazu " format Document "(Shift+Alt+F) nebo" format Selection " (Ctrl+K Ctrl+F).
Váš kód bude nyní vždy vypadat strukturovaně a konzistentně, což usnadňuje jeho čtení a podporu v týmu vývojářů.
Instalace Prettier plugin
Chcete-li začít s Prettier ve Visual Studio Code, musíte nainstalovat plugin, který odpovídá vašemu OS. Chcete-li to provést, postupujte podle následujících kroků:
- Otevřete Visual Studio Code.
- Klikněte na ikonu rozšíření nalevo od postranního panelu nebo stiskněte kombinaci kláves Ctrl+Shift+X (Windows / Linux) nebo Cmd+Shift+X (Mac).
- Do vyhledávacího pole zadejte " Prettier-Code formatter "a vyberte plugin vyvinutý týmem Prettier.
- Klepnutím na tlačítko Instalovat nainstalujte plugin.
Po instalaci pluginu bude Prettier k dispozici pro práci s vaším projektem ve Visual Studio Code.
Výchozí nastavení Prettier
Chcete-li začít, nainstalujte rozšíření Prettier pro Visual Studio Code, abyste jej mohli použít v editoru. Poté použijte následující pokyny:
Krok 1: Otevřete Nastavení Visual Studio Code stisknutím klávesové zkratky Ctrl + , nebo výběrem položky nabídky Soubor - > Nastavení.
Krok 2: V okně Nastavení vyhledejte sekci "Nastavení JSON" a klikněte na odkaz "Otevřít nastavení JSON" nebo přidejte následující řádek do souboru nastavení:
Krok 3: Uložte změny a zavřete soubor nastavení. Nyní bude Prettier použit jako výchozí pro formátování vašeho kódu ve Visual Studio Code.
Můžete také nakonfigurovat další možnosti formátování Prettier jejich přidáním do souboru nastavení. Chcete-li to provést, jednoduše přidejte příslušné možnosti do sekce Nastavení JSON. Například:
To znamená, že maximální délka řádku kódu bude 80 znaků.
Nyní můžete nastavit Prettier jako výchozí ve Visual Studio Code a užít si automatické formátování kódu v TypeScriptu.
Konfigurace Prettier pro TypeScript
Krok 1: Nainstalujte rozšíření Prettier pro Visual Studio Code. Chcete - li to provést, otevřete Visual Studio Code, přejděte do sekce "extensions" (rozšíření) a do vyhledávacího pole zadejte "Prettier-Code formatter". Nainstalujte rozšíření, které odpovídá vývojáři Prettier, abyste jej mohli použít se svým projektem TypeScript.
Krok 2: Vytvořte soubor."prettierrc " v kořenové složce vašeho projektu. V tomto souboru můžete nakonfigurovat různá nastavení, jako jsou odsazení, šířka řádku a další nastavení, aby Prettier formátoval váš kód podle vašich preferencí. Zde jsou některé příklady nastavení:
Krok 3: Nakonfigurujte Visual Studio Code tak, aby automaticky formátoval váš kód pomocí Prettier při ukládání souboru. Chcete-li to provést, otevřete soubor "settings.json " ve Visual Studio Code a přidejte následující nastavení:
Nyní pokaždé, když uložíte soubor TypeScript, bude formátován podle nastavení Prettier, které jste v souboru uvedli."prettierrc".
To je všechno! Nyní můžete pomocí Prettier formátovat svůj TypeScript kód ve Visual Studio Code.
Nastavení automatického formátování
- Nainstalujte rozšíření Prettier pro VS Code.
- Otevřete soubor nastavení VS Code (settings.json) ve vašem projektu.
- Přidejte konfiguraci pro Prettier zadáním pravidel formátování, která potřebujete. Například:
V tomto příkladu uvádíme, že formátování by mělo být použito pokaždé při ukládání souboru, při vkládání textu a při psaní nového kódu. Velikost tabulky je nastavena na 2 mezery a všechny jednoduché uvozovky jsou nahrazeny dvojitými.
Po nastavení Prettier se již nemusíte starat o správné formátování kódu. Stačí vytočit svůj kód a Prettier udělá zbytek za vás!