Prettier vám pomůže prosadit dobré standardy formátování kódu, tak proč to nespárovat s VS Code pro lepší programování?

Psaní čistého a čitelného kódu je zásadní, ať už pracujete sami nebo s týmem vývojářů. I když ke čitelnosti kódu přispívá mnoho faktorů, jedním z nejdůležitějších je konzistentní formátování kódu.

Ale tady je problém: ruční formátování kódu může být absolutní bolest a velmi náchylné k chybám. Nástroje jako Prettier výrazně usnadňují formátování HTML, CSS, JavaScriptu a dalších jazyků. Zjistěte, jak nainstalovat a používat rozšíření Prettier pro formátování kódu a také některá pokročilá nastavení konfigurace.

Instalace Prettier

Než budete pokračovat, ujistěte se, že máte v počítači nainstalovaný soubor Node.js. Nejnovější verzi můžete nainstalovat z oficiální stránka pro stahování Node.js. Přichází s správce balíčků uzlů (npm) vestavěný, který budete používat ke správě svých balíčků Node.js.

Po potvrzení, že je Node.js nainstalován lokálně, začněte vytvořením prázdného adresáře pro váš projekt. Adresář můžete pojmenovat hezčí-demo.

instagram viewer

Poté pomocí příkazového řádku cd do tohoto adresáře a poté spusťte následující příkaz pro inicializaci projektu Node.js:

npm init -y

Tento příkaz vygeneruje soubor package.json obsahující výchozí nastavení.

Chcete-li nainstalovat rozšíření Prettier, spusťte tento příkaz terminálu:

npm i --save-dev hezčí

The --save-dev flag nainstaluje hezčí jako závislost na vývoji, což znamená, že se používá pouze během vývoje.

Nyní, když jej máte nainstalovaný, můžete začít zkoumat, jak Prettier funguje pomocí příkazového řádku.

Použití Prettier prostřednictvím příkazového řádku

Začněte vytvořením a script.js soubor a vyplňte jej následujícím kódem:

funkcesoučet(a, b) { vrátit se a + b}
konst uživatel = { název: "Kyle", stáří: 27,
 isProgrammer: skutečný,
 dlouhý klíč: "Hodnota",
 další údaje: 3
}

Chcete-li naformátovat kód v tomto souboru script.js pomocí příkazového řádku, spusťte následující příkaz:

npx hezčí --write script.js

Příkaz přeformátuje kód JavaScript v script.js na Prettierův výchozí standard. Toto bude výsledek:

funkcesoučet(a, b) {
vrátit se a + b;
}
konst uživatel = {
 název: "Kyle",
 stáří: 27,
 isProgrammer: skutečný,
 dlouhý klíč: "Hodnota",
 další údaje: 3,
};

Značky HTML můžete také formátovat z příkazového řádku. Vytvořit index.html soubor ve stejném adresáři jako script.js. Poté do souboru vložte následující špatně naformátovaný HTML:




"" alt=""třída="velká ikona počasí">

třída="currentHeaderTemp"><rozpětí>21rozpětí></div>
</div>
 </header>

Chcete-li formátovat HTML, spusťte tento příkaz:

npx hezčí --write index.html

Tento příkaz přeformátuje HTML na Prettierův výchozí standard, což má za následek následující kód:

<záhlaví>
<div>
<imgsrc=""alt=""třída="velká ikona počasí" />
<divtřída="currentHeaderTemp"><rozpětí>21rozpětí>div>
div>
záhlaví>

Můžete také použít --šek příznak pro kontrolu, zda kód odpovídá Prettierovým standardům. Následující příklad kontroly script.js:

npx hezčí --check script.js

To je užitečné, pokud chcete háček před potvrzením, abyste zajistili, že lidé používají Prettier a formátují soubory před jejich odesláním do Gitu. To funguje dobře, když přispívání k open source.

Integrace Prettier do kódu Visual Studio

Používání Prettier přes příkazový řádek může být utrpení. Místo ručního spouštění příkazu pokaždé, když chcete formátovat kód, můžete jej nastavit tak, aby se formátoval automaticky, když změníte soubor. Naštěstí Visual Studio Code (VS Code) má vestavěný způsob, jak to udělat za vás.

Přejít na Rozšíření kartu ve VS Code a vyhledejte Hezčí. Klikněte na Prettier - Formátovač kódu, nainstalujte jej a poté povolte.

Přejděte do nastavení kódu VS tak, že přejdete na Soubor > Předvolby > Nastavení. Ve vyhledávacím poli vyhledejte Hezčí. Najdete tu spoustu možností, které vám pomohou nakonfigurovat rozšíření Prettier.

Obvykle si vystačíte s výchozím nastavením. Jediná věc, kterou byste mohli zvážit, jsou středníky (pokud chcete, můžete je odstranit). Jinak je vše nastaveno na výchozí, ale můžete to změnit, jak chcete.

Nezapomeňte povolit formatonsave tak, aby se kód v každém souboru automaticky naformátoval, když soubor uložíte. Chcete-li to povolit, stačí vyhledat formatonsave a zaškrtněte políčko.

Pokud nepoužíváte VSCode nebo rozšíření z nějakého důvodu nefunguje, můžete stáhněte si knihovnu onchange. Tím se spustí příkaz pro formátování kódu, kdykoli změníte soubor.

Jak ignorovat soubory při formátování s Prettier

Kdybys měl běžet tím hezčím --napsat příkaz na celou vaši složku, prošel by každý váš modul uzlu. Ale neměli byste ztrácet čas formátováním kódu jiných lidí!

Chcete-li tento problém obejít, vytvořte a .prettierignore soubor a zahrnout termín node_modules v souboru. Pokud byste měli spustit --napsat příkaz na celou složku, přeformátuje všechny soubory kromě souborů v node_modules složku.

Můžete také ignorovat soubory s konkrétní příponou. Pokud například chcete ignorovat všechny soubory HTML, jednoduše přidejte *.html na .prettierignore.

Jak nakonfigurovat Prettier

Můžete nakonfigurovat, jak chcete, aby Prettier pracoval s různými možnostmi. Jedním ze způsobů je přidat a hezčí klíč k vašemu package.json soubor. Hodnota bude objekt obsahující všechny možnosti konfigurace:

{
 ...
"skripty": {
"test": "echo \"Chyba: nebyl zadán test\" && ukončení 1"
 },
 hezčí: {
// možnosti jsou zde
 }
}

Druhou možností (kterou doporučujeme) je vytvořit a .hezčí soubor. Tento soubor vám umožní provádět nejrůznější úpravy.

Řekněme, že nemáte rádi středníky. Můžete je odstranit umístěním následujícího objektu do souboru:

{
"polo": skutečný,
"přepíše": [
 {
"soubory": ".ts",
"možnosti": {
"polo": Nepravdivé
 }
 }
 ]
}

The přepíše vlastnost umožňuje definovat vlastní přepsání pro určité soubory nebo přípony souborů. V tomto případě říkáme, že všechny soubory končící na .ts (tj. soubory strojopisu) by neměly mít žádné středníky.

Použití Prettier with ESLint

ESLint je nástroj pro linting pro detekci chyb v kódu JavaScript a také pro jeho formátování. Pokud používáte Prettier, pravděpodobně byste nechtěli používat ESLint také pro formátování. Chcete-li je používat společně, musíte je nainstalovat a nastavit eslint-config-prettier. Tento nástroj vypne všechny konfigurace ESLint pro věci, které Prettier již zvládá.

Nejprve jej musíte nainstalovat:

npm i --save-dev eslint-config-prettier

Dále jej přidejte do seznamu rozšíření v .eslintrc soubor (ujistěte se, že je to poslední věc v seznamu):

{
"rozšiřuje": [
"nějaká-jiná-konfigurace-vy-používáte",
"hezčí"
 ],
"pravidla": {
"Odrážka": "chyba"
 }
}

Nyní ESLint deaktivuje všechna pravidla, o která se Prettier již stará, aby se předešlo konfliktům.

Vyčistěte si kódovou základnu pomocí Prettier a ESLint

Prettier je ideální nástroj pro vyčištění kódu a prosazení konzistentního formátování v rámci projektu. Nastavení pro práci s kódem VS znamená, že je vždy na dosah.

ESLint je nezbytný JavaScriptový nástroj, který jde ruku v ruce s Prettier. Poskytuje spoustu funkcí a možností přizpůsobení, které přesahují základní formátování. Naučte se používat ESLint s JavaScriptem, pokud chcete být produktivnějším vývojářem.