Udržujte svůj kód čistý s Prettier

Formátování kódu se jeví jako triviální téma, ale je to něco, co může ovlivnit kvalitu a správnost vašeho kódu, způsob, jakým získává kontrolu nad verzí a jak spolupracujete s ostatními. Pokud se nechcete zabývat podrobnostmi o tom, kam jde poslední závorka, zkuste problém outsourcovat na nástroj s otevřeným zdrojovým kódem, Prettier.

Záležitosti formátování

Týmy vývojářů softwaru během historie promarnily nespočet hodin hádáním o maximální délce řádku nebo o tom, na kterém řádku by se měla rovnátka pohybovat. Ať už osobní preference říkají cokoli, většina lidí souhlasí alespoň s jednou věcí: formátování kódu by mělo být v rámci projektu konzistentní.

Prettier je nástroj navržený k dosažení tohoto cíle. Dejte mu nějaký kód a ten vám předá stejný kód, naformátovaný konzistentním způsobem. Prettier má integraci textového editoru, nástroj příkazového řádku a online ukázku.

Mluvit správným jazykem

Nejprve byste měli vědět, jestli je Prettier kompatibilní s jazykem, nebo s jazyky, se kterými obvykle pracujete. Prettier se v současné době zaměřuje na základní sadu jazyků věnovaných především front-end webovému vývoji, včetně:

• JavaScript
• HTML
• CSS
• Sass
• Snížení
• YAML

K dispozici je také otevřená podpora pro další jazyky prostřednictvím pluginů.

Vyzkoušejte Prettier pomocí online hřiště

Než se dokonce pokusíte nainstalovat Prettier, možná budete chtít vyzkoušet hřiště. Pomocí webového rozhraní můžete vložit příklad kódu a sledovat, jak jej Prettier transformuje. To je skvělý způsob, jak získat představu o tom, co nástroj ve skutečnosti dělá, ale může také fungovat jako primární metoda pro používání Prettier, pokud jsou vaše požadavky na lehčí straně.

Ve výchozím nastavení by hřiště mělo vypadat jako dva základní panely textového editoru, jeden nalevo pro váš vstup, druhý napravo zobrazující Prettierův výstup. Zpočátku uvidíte nějaký ukázkový kód, ale můžete vše jednoduše odstranit a vložit do svého vlastního.

Zkuste například zadat následující JavaScript:

(funkce ()
{
window.alert ('ok')
}())

Prettier by to měl změnit na:

(funkce () {
window.alert ("ok");
})();

Všimněte si, že ve výchozím nastavení změny, které Prettier provádí, zahrnují:

• Převod řetězců s jednou uvozovkou na řetězce s dvojitou uvozovkou
• Přidání středníků
• Převod odsazení na dvě mezery

Vlevo dole je tlačítko umožňující zobrazit možnosti. V předchozím příkladu zkuste upravit šířku karty a přepnout na --jediná nabídka vlajka pod Běžnýnebo přepínání --no-semi vlajka pod JavaScript.

Konfigurace možností

Prettier je sám o sobě popisován jako „míněný“, což je záměrná volba designu, což znamená, že kontrola specifik je obětována pro jednoduchost a konzistenci. Je navržen tak, abyste jej nastavili a pak na něj zapomněli, místo aby se zabývali každým posledním formátovacím detailem kódu. (Alternativu s mnohem jemnější kontrolou nad každým posledním detailem formátování zkuste eslint.)

Autoři však také uznávají, že některá rozhodnutí mají funkční dopad nad rámec toho, jak vypadá kód. Některé možnosti - včetně některých pro starší účely - zůstávají, takže byste měli alespoň rozumět tomu, co dělají, i když používáte Prettier ve výchozím stavu.

Nejlepší způsob řízení Půvabnější možnosti je uložit je do konfiguračního souboru. Existuje mnoho způsobů, jak to uspořádat, ale začněte vytvořením souboru s názvem .prettierrc.json ve vašem místním adresáři projektu. Může obsahovat libovolnou z podporovaných možností ve standardním objektu JSON, např.

{
"tabWidth": 8
}

Stejný konfigurační soubor přečte Prettier, ať už jej spouštíte pomocí příkazového řádku nebo podporovaného textového editoru.

Při použití příze nebo npm by měla být instalace přímočará. Pro přízi:

$ yarn global přidat hezčí

A pro npm:

$ npm install --global hezčí

Jakmile nainstalujete Prettier globálně, měli byste být schopni psát:

$ hezčí

Ve výchozím nastavení se zobrazí obrazovka s nápovědou, která potvrdí, že je nástroj nainstalován a funguje správně.

Čištění souboru

Chcete-li přeformátovat soubor, použijte příkaz podobný tomuto:

$ hezčí - napište název souboru.js

Tím se přepíše původní soubor, což je často nejvhodnější přístup. Alternativně můžete chtít jen hezčí jednat s každým souborem v projektu:

$ hezčí - napsat.

Prettier poběží na všech souborech v aktuálním adresáři a naformátuje všechny, které rozpozná.

Výsledek můžete také vytisknout na standardní výstup namísto změny původního souboru, což vám umožní uložit výstup do jiného souboru nebo jej přesměrovat jinam:

$ hezčí test.js> test2.js

Kontrola souboru

Chcete-li, aby Prettier ohlásil čistotu kódu, aniž by provedl jakékoli změny, použijte --šek příznak buď s jedním názvem souboru, nebo s mnoha:

$ hezčí - kontrola.

Podle Prettierovy konfigurace získáte řádek výstupu pro každý soubor, který neodpovídá očekávanému formátu:

Kontrola formátování ...
[varovat] .prettierrc
[varovat] .prettierrc.json
[varovat] Problémy se stylem kódu nalezené ve výše uvedených souborech. Zapomněli jste spustit Prettier?

Možnosti příkazového řádku

Standardní možnosti Prettier jsou k dispozici jako možnosti příkazového řádku, pokud je potřebujete. Zde je příklad toho, jak --jediná nabídka příznak ovlivňuje výstup:

$ hezčí tmp.js
příklad funkce () {
console.log ("ahoj, svět");
}
$ hezčí - jedna nabídka tmp.js
příklad funkce () {
console.log ('ahoj, svět');
}

Získání pomoci

Nástroj příkazového řádku poskytuje informativní nápovědu ke všem možnostem prostřednictvím --Pomoc vlajka:

$ hezčí - pomozte koncovou čárku
- koncová čárka 
Pokud je to možné, tiskněte koncové čárky, kdykoli je to možné.
Platné možnosti:
es5 Koncové čárky, pokud jsou platné v ES5 (objekty, pole atd.)
žádný Žádné koncové čárky.
všechny koncové čárky, kdykoli je to možné (včetně argumentů funkcí).
Výchozí: es5

Pomocí textového editoru

Jakmile si Prettier nainstalujete, můžete jej použít v různých scénářích, v závislosti na tom, jakou sadu nástrojů již používáte. Je pravděpodobné, že použijete textový editor. Prettier má vazby pro většinu populárních, takže je možné nastavit tři z nich:

Vznešený text

JsPrettier je plugin Sublime Text, díky kterému je Prettier k dispozici v editoru. Ačkoli existuje několik různých způsobů instalace JsPrettier, doporučujeme použít metodu Package Control. Již budete muset mít nainstalovaný Prettier, poté otevřít paletu příkazů Sublime Text a vybrat „Ovládání balíčku: Instalovat balíček“:

Poté vyhledejte „jsprettier“ a kliknutím jej nainstalujte:

Jakmile je JsPrettier nainstalován, můžete jej formátovat kliknutím pravým tlačítkem na libovolný otevřený soubor. Můžete také nastavit hodnotu auto_format_on_save na skutečný v nastavení JsPrettier, což povede k tomu, že JsPrettier automaticky vyčistí všechny kompatibilní soubory, když je uložíte do Sublime Textu.

Atom

Instalace pro Atom je velmi podobná Sublime Textu: k instalaci jednoduše použijte vestavěného správce balíků editoru hezčí atom:

Po instalaci je použití známé: zástupce nebo položka nabídky vám umožní formátovat soubor na vyžádání, zatímco nastavení Atom umožňuje automaticky spustit Prettier při každém uložení souboru.

Vim

Vim je velmi výkonný editor založený na příkazovém řádku, který není vhodný pro začátečníky. Přimět Prettiera k práci s vim je patřičně komplikované, ale stále je to jen několik kroků:

mkdir -p ~ / .vim / pack / plugins / start
git klon https://github.com/prettier/vim-prettier \
~ / .vim / pack / plugins / start / vim-hezčí

Git je pravděpodobně nejjednodušší způsob, jak stáhnout potřebné soubory, ale jakýkoli způsob, jak dostat vim-hezčí do tohoto počátečního adresáře by měl dělat svou práci.

Po instalaci se Prettier automaticky spustí, když je soubor uložen ve vi. Lze jej také kdykoli spustit ručně prostřednictvím Hezčí příkaz:

Výsledkem by měl být vyčištěný soubor:

Integrujte Prettier do svého projektu

Použití formátovače kódu, jako je Prettier, vám pomůže udržovat základnu kódu, která je čitelnější. Může také pomoci vyhnout se debatám o tom, který konkrétní styl použít při kódování - stačí svěřit tato rozhodnutí Prettierovi!

Nakonec lze nastavit háček git, který zajistí, že se kód vždy vyčistí, když se zaváže do úložiště vašeho projektu. Jednotliví vývojáři mohou libovolně formátovat svůj kód, jak chtějí, ale centrální kopie bude vždy čistá a konzistentní.

nano vs. Vim: Nejlepší textové editory terminálu, ve srovnání

Hledáte textový editor terminálu pro Linux? Hlavní volba je mezi Vim a nano! Zde je jejich srovnání.

O autorovi