Všichni chceme kvalitnější kód. S Prettier toho můžete dosáhnout s minimálním úsilím.

Pokud se vám tento návod líbí, dejte mu prosím 💓, 🦄 nebo 🔖 a zvažte:

• přihlášení k odběru mého bezplatného týdenního zpravodaje pro vývojáře
• přihlášení k odběru mého bezplatného kanálu YouTube pro vývojáře

Co je hezčí?

Prettier je zaujatý formátovač kódu, který podporuje různé jazyky. Při použití na podporovaný typ souboru Prettier automaticky naformátuje kód v tomto souboru.

Podporované jazyky

V současnosti Prettier sám o sobě podporuje spoustu různých jazyků/rámců a má také komunitní pluginy pro jiné jazyky.

Podporuje Prettier

• JavaScript
• JSX
• Tok
• TypeScript
• JSON
• HTML
• Vue
• Úhlové
• CSS
• Méně
• SCSS
• GraphQL
• Markdown/MDX

Podporováno Prettier Plugins

• Java
• PHP
• PostgreSQL
• Ruby
• Rychlé
• TOML
• XML

Síla formátu při ukládání

Existuje několik různých způsobů, jak můžete použít Prettier:

• Použití rozhraní příkazového řádku (CLI) k formátování jednotlivých souborů nebo skupin souborů
• Nastavení editoru kódu/IDE na automatické formátování souborů (např. při ukládání souboru).

Dávám přednost automatickému formátování při uložení, protože to okamžitě poskytuje zpětnou vazbu. Jednou z nejdůležitějších zpětných vazeb, které vám poskytuje, je nebude se formátovat, pokud máte chybu syntaxe! To je skutečně neuvěřitelně silné. Když jste v proudu programování, je důležité mít různé typy okamžité zpětné vazby, abyste věděli, kdy jste udělali chybu, abyste mohli rychle opravit kurz. Prettier nabízí jednu z nejrychlejších smyček zpětné vazby, která existuje.

Instalace Prettier

Dobře, dost toho, že jsem žvanil o velikosti Prettier, začněme to použít na příkladu.

Rychlé upozornění na tento příklad

• můžete nainstalujte Prettier globálně, ale doporučuje se nainstalovat jej lokálně do vašeho projektu jako vývojovou závislost. Tímto způsobem jej budou mít všichni vývojáři ve stejné verzi.
• Tento příklad předpokládá, že závislosti vašeho projektu jsou spravovány yarn nebo npm .
• Tento příklad předpokládá, že používáte VS Code, což je způsob, jakým nakonfigurujeme naši funkci „Formátovat při uložení“. Ostatní vývojová prostředí mají pravděpodobně podobnou funkcionalitu, jen si ji možná budete muset vyhledat!

Krok 1:vytvořte nový adresář projektu

Vytvořme adresář projektu pro náš nový projekt. Tyto příkazy spouštím v bash, ale můžete vytvářet nové soubory a složky pomocí jakékoli metody, která vám vyhovuje.

mkdir prettier-example

Krok 2:Inicializujte přízi (nebo npm)

Dále inicializujeme nový projekt. Pokud používáte přízi, jednoduše spusťte yarn příkaz:

yarn

Pokud používáte npm, spusťte následující příkaz pro inicializaci s výchozí konfigurací:

npm init -y

Krok 3:Instalace Prettier

Nyní nainstalujeme Prettier. Nezapomeňte připnout Prettier k přesné verzi opravy! Prettier může aktualizovat své předvolby formátování mezi verzemi opravy, takže připnutím ke konkrétní verzi opravy se zabrání rozdílům ve formátování mezi různými vývojáři.

Nezapomeňte také nainstalovat Prettier jako vývojářskou závislost, protože je to spíše vývojářský nástroj než něco používaného ve výrobě.

Použití příze:

yarn add -D [email protected]

Nebo npm:

npm install --save-dev [email protected]

Vytvořme také prázdný hezčí konfigurační soubor v našem adresáři. Vytvořte .prettierrc.json a vložte tam prázdný objekt:

.prettierrc.json

{}

Nainstalujte modul Prettier Plugin pro kód VS

Nezapomeňte nainstalovat plugin Prettier for VS Code. Pokyny naleznete zde.

Krok 4:Vytvořte špatně naformátovaný soubor

Vytvořme špatně naformátovaný soubor. Udělejte index.js v adresáři projektu a vložte do něj následující kód:

function greet  (){  
const myVar= 'hello'
     console.log(myVar)}

Tento úryvek má všechny druhy podivných mezer.

Krok 5:Nastavte kód VS na formátování při uložení

Přejděte do Nastavení v kódu VS. Najdete to v části Soubor> Předvolby> Nastavení nebo můžete jednoduše použít zkratku ctrl+čárka (cmd+čárka na Macu). Najděte Editor:Formát při uložení a ujistěte se, že je zaškrtnutá.

Poznámka: Ostatní editory by měly být schopny formátovat i při uložení, jen si budete muset najít nějaké pokyny pro konkrétní editory, pokud nepoužíváte VS Code.

Krok 6:Uložte soubor index.js

Uložte si index.js soubor. Pokud vše půjde dobře, váš soubor by měl být správně naformátován!

function greet() {
  const myVar = "hello";
  console.log(myVar);
}

Všimněte si, že naše mezery vypadají správně. Prettier navíc přidal koncové středníky a změnil naše jednoduché uvozovky na dvojité. Mnohé z toho lze konfigurovat v našem .prettierrc.json pokud se vám některé změny nelíbí!

Působivější příklad

Pojďme změnit naše index.js aby měl nějaký opravdu drsný kód. Zkuste to změnit na toto:

const navBarProps = {name:["John Doe", null],
displayMode: ["dark", "light"],timezone: ["ET", "CT", "MT", "PT"],
};

function allCombinations(obj) {let combos=[{}];
for(const[key, values] of Object.entries(obj)) {combos = combos.flatMap((combo) =>
values.map((value) => ({ ...combo, [key]: value })));}return combos;}

console.log(allCombinations(navBarProps));

To je opravdu dost ošklivé. Nyní dokument uložte.

const navBarProps = {
  name: ["John Doe", null],
  displayMode: ["dark", "light"],
  timezone: ["ET", "CT", "MT", "PT"],
};

function allCombinations(obj) {
  let combos = [{}];
  for (const [key, values] of Object.entries(obj)) {
    combos = combos.flatMap((combo) =>
      values.map((value) => ({ ...combo, [key]: value }))
    );
  }
  return combos;
}

console.log(allCombinations(navBarProps));

Nádhera!

Proč je to tak důležité

Prettier vám pomůže napsat konzistentnější kód. Vzory uvidíte lépe, když je váš kód správně naformátován. Když váš kód není formát při uložení, začnete okamžitě rozpoznávat, kdy váš kód obsahuje chyby.

Zvažte prosím použití Prettier, váš vývojový proces bude mnohem příjemnější!