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

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)

{
   "useTabs": true,
   "semi": false,
   "singleQuote": true,
   "jsxSingleQuote": true,
   "trailingComma": "none",
	 "parser": "typescript",
   // v prípade ak je potrebné formátovať len označené súbory markerom @format
   "requirePragma": true
}

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:

{
  "extends": [
    "airbnb-base",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript",
    "plugin:react/recommended",
    "prettier"
  ],
  ...

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.

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"

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"

‍

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.