Udržiavajte svoj kód čistý s Prettier

Formátovanie kódu sa javí ako triviálna téma, ale môže to ovplyvniť kvalitu a správnosť vášho kódu, spôsob jeho kontroly nad verziou a spolupráca s ostatnými. Ak sa nechcete zahĺbiť do podrobností o tom, kam smeruje posledná zátvorka, skúste vyskúšať outsourcing problému na nástroj s otvoreným zdrojovým kódom, Prettier.

Záležitosti formátovania

Tímy pre vývoj softvéru stratili v priebehu histórie nespočetné hodiny hádkami o maximálnej dĺžke riadku alebo o tom, na ktorom riadku by sa mala zložiť zátka. Čokoľvek hovoria osobné preferencie, väčšina ľudí sa zhoduje na aspoň jednej veci: formátovanie kódu by malo byť v rámci projektu konzistentné.

Prettier je nástroj navrhnutý na dosiahnutie tohto cieľa. Dajte jej nejaký kód a ten vám vráti ten istý kód, naformátovaný konzistentným spôsobom. Prettier má integráciu textového editora, nástroj príkazového riadku a online ukážku.

Hovorenie správnym jazykom

Najskôr by ste chceli vedieť, či je Prettier kompatibilný s jazykom alebo s jazykmi, s ktorými obvykle pracujete. Prettier sa v súčasnosti zameriava na základnú skupinu jazykov zameraných hlavne na front-end webový vývoj, vrátane:

• JavaScript
• HTML
• CSS
• Sass
• Markdown
• YAML

K dispozícii je tiež otvorená podpora ďalších jazykov prostredníctvom doplnkov.

Vyskúšajte si predvádzanie pomocou online ihriska

Predtým, ako sa vôbec pokúsite nainštalovať Prettier, možno budete chcieť vyskúšať ihrisko. Pomocou webového rozhrania môžete do niektorých príkladov vložiť kód a sledovať, ako ho Prettier transformuje. Je to vynikajúci spôsob, ako získať dojem o tom, čo nástroj v skutočnosti robí, ale môže slúžiť aj ako vaša primárna metóda používania programu Prettier, ak sú vaše požiadavky na strane svetlejšej.

Predvolene by ihrisko malo vyzerať ako dva základné panely textového editora, jeden vľavo pre vaše zadanie a druhý vpravo so zobrazením Prettierovho výstupu. Spočiatku sa zobrazí ukážkový kód, ale môžete ho jednoducho odstrániť a vložiť do svojho vlastného.

Skúste napríklad zadať nasledujúci JavaScript:

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

Prettier by to mal zmeniť na:

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

Všimnite si, že zmeny, ktoré Prettier robí, sú predvolene tieto:

• Prevod jednokótových reťazcov na dvojkótové reťazce
• Pridávanie bodkočiarok
• Prevod zarážok do dvoch medzier

Vľavo dole je tlačidlo, ktoré umožňuje zobraziť možnosti. V predchádzajúcom príklade skúste upraviť šírku karty a prepnúť znak --jeden citát vlajka pod Bežnéalebo prepínanie --no-semi vlajka pod JavaScript.

Konfigurácia možností

Prettier je sám o sebe označený za „mienkotvorného“, čo je zámerná voľba dizajnu, ktorá znamená, že kontrola špecifík je obetovaná pre jednoduchosť a konzistenciu. Je navrhnutý tak, aby ste ho nastavili, potom zabudli a nemuseli sa zaoberať poslednými podrobnosťami formátovania svojho kódu. (Alternatívu s oveľa jemnejšou kontrolou nad každým posledným detailom formátovania vyskúšajte eslint.)

Autori však tiež uznávajú, že niektoré rozhodnutia majú funkčný dopad, ktorý presahuje rámec toho, ako vyzerá kód. Niektoré možnosti - vrátane niektorých pre staršie účely - zostávajú, takže by ste mali chápať aspoň to, čo robia, aj keď používate Prettier v predvolenom stave.

Najlepší spôsob riadenia Krajšie možnosti je uložiť ich do konfiguračného súboru. Existuje mnoho spôsobov, ako to usporiadať, ale začnite vytvorením súboru s názvom .prettierrc.json vo vašom lokálnom adresári projektu. Môže obsahovať ktorúkoľvek z podporovaných možností v štandardnom objekte JSON, napr.

{
"tabWidth": 8
}

Rovnaký konfiguračný súbor prečíta program Prettier, či už ho spúšťate prostredníctvom príkazového riadku alebo podporovaného textového editora.

Použitím priadze alebo NPM by inštalácia mala byť jednoduchá. Pre priadzu:

$ priadze globálne pridať krajšie

A pre npm:

$ npm install --global krajší

Po globálnej inštalácii programu Prettier by ste mali vedieť písať:

$ krajší

V predvolenom nastavení sa zobrazí obrazovka s textom pomocníka, ktorá potvrdí, že je nástroj nainštalovaný a funguje správne.

Čistenie súboru

Na preformátovanie súboru použite príkaz podobný tomuto:

$ krajší --write filename.js

Týmto sa prepíše pôvodný súbor, čo je často najpohodlnejší prístup. Môžete tiež chcieť, aby krajšie pôsobilo na každý súbor v projekte:

$ krajší - napísať.

Program Prettier pobeží vo všetkých súboroch v aktuálnom adresári a naformátuje všetky rozpoznané súbory.

Výsledok môžete tiež vytlačiť na štandardný výstup namiesto zmeny pôvodného súboru, čo vám umožní uložiť výstup do iného súboru alebo ho presmerovať inde:

$ krajší test.js> test2.js

Kontrola súboru

Ak chcete, aby spoločnosť Prettier informovala o čistote vášho kódu bez vykonania akýchkoľvek zmien, použite --kontrolovať príznak s jedným názvom súboru alebo s mnohými:

$ krajšie - kontrola.

Podľa Prettierovej konfigurácie získate riadok výstupu pre každý súbor, ktorý nezodpovedá očakávanému formátu:

Prebieha kontrola formátovania ...
[varovať] .prettierrc
[varovať] .prettierrc.json
[varovať] Problémy so štýlom kódu sa našli vo vyššie uvedených súboroch. Zabudli ste spustiť Prettier?

Možnosti príkazového riadku

Štandardné možnosti spoločnosti Prettier sú k dispozícii ako možnosti príkazového riadku, ak ich požadujete. Tu je príklad toho, ako --jeden citát príznak ovplyvňuje výstup:

$ krajší tmp.js
príklad funkcie () {
console.log („ahoj, svet“);
}
$ krajší - singl-quote tmp.js
príklad funkcie () {
console.log ('ahoj, svet');
}

Získanie pomoci

Nástroj príkazového riadku poskytuje informačnú pomoc o akejkoľvek možnosti prostredníctvom servera --Pomoc vlajka:

$ krajší - pomoc koncová čiarka
- koncová čiarka 
Ak je to možné, tlačte koncové čiarky všade, kde je to možné.
Platné možnosti:
es5 Koncové čiarky, ak sú platné v ES5 (objekty, polia atď.)
žiadny Žiadne koncové čiarky.
všetky koncové čiarky, kedykoľvek je to možné (vrátane funkčných argumentov).
Predvolené: es5

Pomocou textového editora

Po nainštalovaní programu Prettier ho môžete použiť v rôznych scenároch, v závislosti od toho, ktorú sadu nástrojov už používate. Je pravdepodobné, že použijete textový editor. Prettier má väzby pre väčšinu populárnych, takže tu je návod, ako nastaviť tri z nich:

Vznešený text

JsPrettier je doplnok Sublime Text, ktorý sprístupňuje Prettier v editore. Aj keď existuje niekoľko rôznych spôsobov inštalácie JsPrettier, odporúčame vám použiť metódu Package Control. Program Prettier už budete musieť mať nainštalovaný, potom otvorte paletu príkazov Sublime Text a vyberte možnosť „Package Control: Install Package“:

Potom vyhľadajte „jsprettier“ a kliknutím ho nainštalujte:

Po nainštalovaní programu JsPrettier ho môžete formátovať kliknutím pravým tlačidlom myši na ľubovoľný otvorený súbor. Môžete tiež nastaviť hodnotu auto_format_on_save do pravda v nastaveniach JsPrettier, čo povedie k tomu, že JsPrettier automaticky vyčistí všetky kompatibilné súbory, keď ich uložíte do Sublime Textu.

Atom

Inštalácia pre Atom je veľmi podobná ako pri Sublime Text: na inštaláciu jednoducho použite vstavaného správcu balíkov editora krajší atóm:

Po inštalácii je používanie známe: skratka alebo položka ponuky umožňujú naformátovať súbor na požiadanie, zatiaľ čo nastavenie Atom umožňuje automatické spustenie programu Prettier pri každom uložení súboru.

Vim

Vim je veľmi výkonný editor založený na príkazovom riadku, ktorý nie je vhodný pre začiatočníkov. Dostať Prettier do práce s vim je primerane komplikované, ale zostáva to iba niekoľko krokov:

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

Git je pravdepodobne najjednoduchší spôsob stiahnutia potrebných súborov, ale akýkoľvek spôsob, ako sa dostať vim-krajší do tohto štartovacieho adresára by mal robiť svoju prácu.

Po nainštalovaní sa program Prettier automaticky spustí, keď sa súbor uloží vo formáte vi. Môže sa tiež kedykoľvek spustiť manuálne prostredníctvom servera Krajšie príkaz:

Výsledkom by mal byť vyčistený súbor:

Integrujte Prettier do svojho projektu

Používanie formátovača kódov, ako je Prettier, môže pomôcť udržiavať základňu kódov, ktorá sa ľahšie číta. Môže tiež pomôcť vyhnúť sa debatám o tom, aký konkrétny štýl použiť pri kódovaní - stačí tieto rozhodnutia zveriť spoločnosti Prettier!

Nakoniec je možné nastaviť háčik git, ktorý zabezpečí, že sa kód vždy vyčistí, keď sa zaviaže k úložisku vášho projektu. Jednotliví vývojári si môžu svoj kód naformátovať, ako chcú, ale centrálna kópia bude vždy čistá a konzistentná.

nano vs. Vim: Najlepšie textové editory terminálu v porovnaní

Hľadáte textový editor terminálu pre Linux? Hlavná voľba je medzi Vim a nano! Tu je ich porovnanie.

O autorovi