Ako na formátovanie kódu pomocou nástroja Prettier sprievodca krok za krokom
Web
3
 min read
July 6, 2022

Ako na formátovanie kódu pomocou nástroja Prettier sprievodca krok za krokom

Roman Haluška
Roman Haluška
Frontend developer
LinkedIn Logo

Mnohí z vás už určite riešili problém s rôznymi štýlmi zápisov kódu a formátovania, či už v rámci projektu alebo v rámci tímu, ktoré spôsobovali neporiadok a zbytočné merg konflikty. Preto by som vám rád v tomto článku predstavil možnosť, ako zatočiť s týmito problémami navždy a jednoducho im predísť. Samozrejme nebude to “zadarmo” a niekoho to bude trošku aj “bolieť”. 😃

V úvode sa budem krátko venovať výhodám, nevýhodám prettiera a následne si ukážeme, ako prettier nastaviť a aké nastavenia požívame v GoodRequest.

Prettier je nástroj slúžiaci na formátovanie kódu, ktorý podporuje javascript, typescript a ďalšie jazyky. Zároveň zabezpečuje, že po formátovaní je štýl kódu konzistentný naprieč celým tímom.

Prečo zvoliť na formátovanie prettier?

Pretože je ako jediný nástroj slúžiaci na formátovanie plne automatický, a zároveň jednoduchý na nastavenie bez veľkého konfiguračného súboru. Hoci toto by sme mohli považovať za jeho malú nevýhodu, kedže neposkytne 100% funkcionalitu pre všetky prípady, ktoré by bolo potrebné pri jednotnom formátovaní riešiť.

Kedže v GoodRequest používame prevažne React framework a aplikácie píšeme v typescripte, tak aj pri nastavení prettiera sa zameriam hlavne na tento jazyk a framework.

Inštalácia potrebných modulov

Ako prvé je potrebné nainštalovať tieto dva node moduly:

npm install --save-dev --save-exact prettier

a (v prípade integrácie s už existujúcim eslintom)

npm install --save-dev eslint-config-prettier

Po inštalácii je potrebné vytvoriť súbory na úrovni package.json s názvom .prettierrc.json

echo {}> .prettierrc.json

skopírovať konfig (ja som vybral tieto nastavenia, ktoré zodpovedajú našim štandardom, ak potrebujete nejaké ďalšie, navštívte oficiálnu stránku https://prettier.io/docs/en/options.html)

a súbor .prettierignore (V tomto súbore je možné nastaviť súbory, ktoré ma prettier ignorovať pri formátovaní.)

echo '# Ignore everything:\\n/*\\n/src/styles/main.css\\n\\n# Except src folder:\\n!/src'> .prettierignore

Integrácia s eslint

Ak už máte integrovaný eslint a chcete využívať zároveň aj prettier, je ho potrebné pridať do konfigu eslint (.eslintrc) a v prípade, že máte aktivované warnings pre pravidlo object-curly-newline, je potrebné ho nastaviť na hodnotu “off”. Je možné, že prettier nebude kompatibilný s viacerými pravidlami eslintu, takže, ak natrafíte na problém, je potrebné googliť. 🙂

Príklad:

Pre-commit hook

Ak chcete formátovanie naviazané na akciu komitovania, je potrebné mať nainštalovaný a nastavený nástroj husky.

npx husky-init
npm install --save-dev pretty-quick
npx husky set .husky/pre-commit "npx pretty-quick --staged"

Manuálne formátovanie

Prettier poskytuje možnosť formátovať celý projekt manuálne príkazom npx prettier --write.

V prípade, že chcete kontrolu pred manuálnym formátovaním, zadajte príkaz npx prettier --check .

Formátovanie jednotlivých priečinkov/súborov npx prettier --require-pragma=false --insert-pragma --write [file/dir/glob ...]

Formátovanie existujúcich projektov

Pre plynulý a bezproblémový prechod na formátovanie pomocou nástroja prettier v rámci stredných až veľkých projektov je odporúčané pridať do prettier konfigu (.prettierrx.json) option "requirePragma": true, ktoré zabezpečí to, že sa budú formátovať len súbory s pridaným marekom @format na začiatku, a teda v prípade, že na projekte pracuje viacero developerov a niekto spustí formátovanie, tak sa naformátujú len tie súbory, ktoré boli po formátovaní skontrolované a otestované. Ak použijete requirePragma option a chcete formátovať code base projektu, postupne používajte príkaz spomenutý vyššie (vyznačený boldom).

Marker:

/** @format */

alebo

/** @prettier */

Do pozornosti dávam aj zaujímavosť, ako sa s prechodom a implementáciou formátovacieho nástroja prettier popasoval samotný Facebook.

Pripravený na výzvu? Náš Frontend tím hľadá posilu!
Otvorená pozícia pre Frontend developera

Nastavenie automatického formátovania pre IDE

Ak chcete automatické formátovania pre akciu “on save“, je potrebné nastaviť IDEčko, ktoré používate pri vývoji cez ich nastavenia. Ja ukážem, ako nastaviť webstorm a visual studio code.

Ako nastaviť Webstorm?

  1. Webstorm → Preferences → Languages & Frameworks → Prettier
  2. check “On save”
Krok za krokom návod nastavenia automatického formátovania pre prostredie Webstorm IDE

Ako nastaviť Visual Studio Code?

  1. Nainštalovať extension
  2. Code → Preferences → Settings
  3. Zadať výraz “default formatter“ do vyhľadávania
  4. Nastaviť ako default formatter Prettier - Code formatter
  5. Zadať výraz “format on save“ do vyhľadávania
  6. check “Editor: Format On Save“
Krok za krokom návod nastavenia automatického formátovania pre prostredie Visual Studio Code IDE

Oplatí sa investovať čas a energiu do formátovania s využitím prettiera?

Ako som už spomenul vyššie, prettier poskytuje jednoduché možnosti a nastavenia pre automatické formátovanie, ktoré následne udržiavajú kód konzistentný, a tak predchádzate problémom a šetríte čas, preto ho určite odporúčam.

Like what you see?
Join our newsletter.

Great! Welcome to newsletter.
Oops! Something went wrong while submitting your email.
High quality content once a month. No spam, we promise.
Your personal data is processed in accordance with our Memorandum on Personal Data Protection.

Páči sa vám náš content?
Odoberajte newsletter.

Great! Welcome to newsletter.
Oops! Something went wrong while submitting your email.
Vaše osobné údaje sú spracované v súlade s našim Memorandom na ochranu osobných údajov.