Prettier - je to nástroj, který pomáhá automaticky formátovat váš kód, takže je čitelnější a konzistentnější. Pokud vyvíjíte v jazyce TypeScript pomocí editoru Visual Studio Code, může Nastavení Prettier výrazně urychlit váš pracovní postup.
V tomto článku se podíváme na to, jak správně nastavit Prettier ve Visual Studio Code pro práci s Typescriptem. Budete muset nainstalovat rozšíření Prettier pro VS Code a nakonfigurovat některá nastavení tak, aby odpovídala vašim preferencím a standardům kódování.
Po instalaci rozšíření Prettier budete mít k dispozici mnoho možností formátování, jako jsou odsazení, použití jednoduchých nebo dvojitých uvozovek, délka řádku atd. tato nastavení budete moci nakonfigurovat v souboru nastavení VS Code nebo vytvořit soubor."prettierrc " v kořenovém adresáři vašeho projektu.
Nastavení Prettier může výrazně zlepšit čitelnost a konzistenci vašeho kódu. Také vám ušetří čas, který byste strávili ručním formátováním. Nezapomeňte pravidelně kontrolovat aktualizace Prettier a instalovat je, abyste zůstali aktuální s nejnovějšími změnami a funkcemi.
Prettier VS Code Pro TypeScript: krok za krokem
V tomto článku se podíváme na podrobný návod, jak nastavit Prettier ve VS Code Pro TypeScript.
- Nainstalujte Prettier rozšíření pro VS Code. Chcete-li to provést, otevřete VS Code a přejděte na kartu "Extensions" (rozšíření). Do vyhledávacího pole zadejte "prettier" a nainstalujte rozšíření navržené pro formátování kódu.
- Nainstalujte Prettier balíček pro TypeScript. Otevřete terminál VS Code (klávesa Ctrl + ` ) a spusťte následující příkaz: npm install --save-dev prettier . Tím se nainstaluje Prettier balíček potřebný k formátování TypeScript kódu.
- Nastavení Prettier v VS Code. Vraťte se k vs kódu a otevřete nastavení kliknutím Ctrl + , nebo výběrem " File "(soubor) v nabídce a výběrem" Preferences " (Nastavení). Najděte nastavení editoru.defaultFormatter a z rozevíracího seznamu vyberte "Prettier - Code formatter".
- Vytvořte konfigurační soubor pro Prettier. Vytvořte soubor s názvem .prettierrc v kořenovém adresáři vašeho projektu. V souboru nastavte nastavení Prettier ve formátu JSON. Můžete například nastavit maximální délku řádku nebo speciální pravidla pro formátování kódu.
- Nakonfigurujte příkaz pro formátování kódu pomocí Prettier. Otevřete nastavení VS Code znovu a vyhledejte nastavení editor.formatOnSave . Nastavte hodnotu true tak, aby VS Code automaticky formátoval kód při ukládání souboru.
Nyní máte nastavený Prettier ve VS Code Pro TypeScript! Můžete použít příkaz "FORMAT Document" (formátovat dokument) nebo jednoduše uložit soubor, aby Prettier automaticky formátoval váš kód a pomáhal udržovat jednotný styl psaní kódu ve vašem projektu.
Instalace Prettier
1. Ujistěte se, že máte v počítači nainstalované vývojové prostředí Visual Studio Code. Můžete si jej stáhnout z oficiálních stránek Visual Studio Code.
2. Otevřete Visual Studio Code a v postranní nabídce vlevo vyberte kartu "Extensions". Do vyhledávacího pole zadejte "Prettier-Code formatter" a stiskněte Enter.
3. Vyhledejte rozšíření " Prettier-Code formatter "od vývojáře Prettier a klikněte na tlačítko"Install". Po instalaci rozšíření klikněte na tlačítko" Reload " pro restartování editoru.
4. Jakmile nainstalujete a stáhnete Prettier, musíte jej nakonfigurovat pro váš projekt. Vytvořte soubor'.prettierrc ' v kořenové složce vašeho projektu a přidejte do ní potřebná nastavení. Můžete například určit, že váš kód musí být naformátován pomocí dvou mezer místo tabulek:
5. Nyní je Prettier připraven k použití! Otevřete soubory TypeScript ve Visual Studio Code a stiskněte kombinaci kláves `Shift + Alt + F` (nebo přejděte na kartu "View" a vyberte "Format Document"). Prettier automaticky naformátuje váš kód podle nastavení uvedených v souboru `.prettierrc`.
Tímto způsobem jste nainstalovali a nakonfigurovali Prettier ve Visual Studio Code pro programovací jazyk TypeScript. Nyní můžete svůj kód pohodlně formátovat a učinit jej čitelnějším a konzistentnějším.
Nastavení Prettier v VS Code
Krok 1: Instalace Prettier
Prvním krokem je instalace rozšíření Prettier pro váš editor VS Code. Chcete-li to provést, otevřete VS Code a přejděte do části "rozšíření" (rozšíření). Do vyhledávacího pole zadejte " prettier "a klikněte na" Install " (Instalovat) pro instalaci rozšíření. Po instalaci restartujte editor.
Krok 2: Vytvoření konfiguračního souboru
Dále vytvořte soubor s názvem".prettierrc " v kořenech vašeho projektu. V tomto souboru můžete zadat možnosti formátování, jako jsou odsazení a délka řádku. Zde je například příklad jednoduchého souboru."prettierrc":
Krok 3: nastavení editoru
Chcete-li nastavit VS Code pro automatické formátování kódu pomocí Prettier, musíte změnit několik možností v nastavení editoru. Chcete-li to provést, otevřete "File" (Soubor) → "Preferences" (Nastavení) v hlavní nabídce VS Code. Otevře se okno Nastavení, kde můžete provést změny.
V okně Nastavení zadejte do vyhledávacího pole " format on save "a zaškrtněte políčko poblíž možnosti"Editor: Format On Save". Tímto způsobem bude VS Code automaticky formátovat kód při ukládání.
V nastavení lze také nakonfigurovat vlastní nastavení Prettier pomocí možnosti "Prettier: Config Path". Zadejte cestu ke svému konfiguračnímu souboru."prettierrc".
Krok 4: Použití Prettier
Po nastavení editoru můžete k formátování kódu použít Prettier. Stačí otevřít soubor, který chcete naformátovat, a stisknutím klávesové zkratky "Ctrl + Shift + P" (nebo "Cmd + Shift + P" na Macu) otevřete příkazovou paletu. Zadejte "format Document" (formátovat dokument) a vyberte příslušnou možnost. Váš kód bude automaticky naformátován podle nastavení Prettier.
Konfigurace TypeScript kompilátoru
Nejprve se ujistěte, že máte nainstalovaný balíček TypeScript. Můžete jej nainstalovat globálně pomocí následujícího příkazu:
npm install -g typescript
Po instalaci TypeScriptu vytvořte soubor tsconfig.json v kořenové složce vašeho projektu. V tomto souboru jsou definována nastavení pro kompilátor TypeScript.
Příklad jednoduchého tsconfig.json souboru:
,"include": ["src/**/*.ts"],"exclude": ["node_modules"]>compilerOptions obsahuje nastavení kompilátoru TypeScript. V uvedeném příkladu uvádíme cílovou verzi JavaScriptu (es6), modulární systém (commonjs), výstupní složku pro kompilované soubory (dist) a přísný typizační režim (strict).
include a exclude umožňují určit, které soubory by měly být povoleny nebo vyloučeny při kompilaci souborů TypeScript. V uvedeném příkladu zahrneme všechny soubory s příponou .ts ve složce src a jejích podsložkách a vyloučíme složku node_modules.
Jakmile máte tsconfig.json soubor s požadovaným nastavením, můžete kompilovat vaše TypeScript soubory pomocí příkazu:
To kompiluje všechny soubory s příponou .ts uvedené v include podle nastavení tsconfig.json .
Konfigurace kompilátoru TypeScript vám umožňuje efektivně využívat všechny funkce jazyka TypeScript a ovládat typy ve vašem projektu. Doporučuje se použít tato nastavení v každém novém projektu na TypeScriptu.
Aplikace Prettier pro projekt
Kroky k přizpůsobení:
-
Nainstalujte Prettier rozšíření pro VS Code, pokud jste tak ještě neučinili. Spusťte následující příkaz na příkazovém řádku:
code --install-extension esbenp.prettier-vscodeNyní Prettier automaticky formátuje váš kód TypeScript podle nastavených nastavení pokaždé, když soubor uložíte.
Kromě toho můžete také nakonfigurovat VS Code tak, aby automaticky formátoval váš kód při vkládání nebo kopírování. Chcete-li to provést, přidejte do souboru settings následující nastavení.json :
Váš kód se nyní automaticky formátuje při vkládání nebo kopírování.
Použití Prettier pomáhá udržovat jednotný styl formátování v projektu, díky čemuž je Kód čitelnější a vyhýbá se potenciálním chybám formátování. Díky integraci Prettier do VS Code jej můžete snadno aplikovat na svůj kód a ušetřit čas ručním formátováním.
Užitečné tipy pro použití Prettier
| Rada | Popis |
|---|---|
| Používat .prettierrc soubor | Vytvořte soubor .prettierrc v kořenové složce vašeho projektu nakonfigurujte Prettier podle vašich představ. Můžete zadat různá nastavení, jako jsou odsazení, mezery, středník a další. |
| Spusťte Prettier při ukládání souboru | Nakonfigurujte svůj editor kódu (například VS Code) tak, aby se Prettier automaticky spustil při ukládání souboru. To vám umožní automaticky formátovat svůj kód při každém uložení a vyhnout se neshodám ve stylu formátování. |
| Použijte příkaz Prettier z příkazového řádku | Pokud potřebujete rychle naformátovat soubor nebo dokonce celý projekt, můžete použít příkaz Prettier z příkazového řádku. Stačí přejít do kořenové složky projektu a spustit příkaz "prettier --write ."pro formátování celého projektu. |
| Ignorujte soubory, které nechcete formátovat | Soubor můžete upravit .prettierignore, aby Prettier při formátování ignoroval určité soubory nebo složky. To je užitečné, když chcete vyloučit například soubory ve složce s testy nebo dočasné soubory. |
| Použijte rozšíření pro integraci Prettier | V závislosti na editoru kódu můžete najít a použít rozšíření, která vám umožní nastavit a používat Prettier ještě pohodlněji. Například pro VS Code existuje rozšíření Prettier-Code formatter, které přidává další funkce a integraci Prettier. |
Dodržováním těchto tipů můžete Prettier efektivně používat a učinit váš kód čitelnějším a strukturovanějším. Prettier je skvělý nástroj, který vám ušetří čas a sílu ručním formátováním kódu.