Jednym z problemów w środowisku Javascript jest formatowanie kodu. Istnieje masę udokumentowanych koncepcji z udokomentowanymi wszystkimi zasadami, według których się powinno formatować kod. Najpopularniejsze wzorce to AirBnB style guide, Standard.js, XO i niedawno stworzony Prettier.

Dotychczas próbowałem korzystać z wzorców AirBnb oraz Standard.js. Jednak dopiero Prettier spełnił wszystkie moje wymagania. Wiele z tych standardów jest odpowiedzialnych nie tylko za styl kodu, ale również za elementy dotyczące dostępności, reguły niezwiązane z stylem kodu, a użyciem nowszych funkcjonalności JS.

Prettier różni się od nich tym, że nie jest to linter. Prettier na wejście dostaje nasz kod i na wyjściu zwraca sformatowany kod. Tutaj właśnie jest zaleta tego formattera. Jeśli wywołujemy funkcję z 4 krótkimi parametrami i będzie ona się mieściła w 80 znakach to nadal będzie ona tak zapisana. Jeśli jednak nie zmieści się ta funkcja w limicie znaków w linii, to każdy argument zostanie zapisany w osobnej linii. Dzięki temu dostajemy kod, który zawsze mieści się w naszym limicie znaków.

Konfiguracja Prettier jest bardzo uboga i to jest właśnie bardzo dobre rozwiązanie, bo nie wprowadza dużego rozłamu. Możemy tylko ustawić rozmiar wcięcia, rodzaj 'trailing comma', rodzaje apostrofów, odstępy w obiektach i użycie średników. Reszta jest poza naszą kontrolą.

Ja korzystam z tego rozszerzenia w edytorze Visual Studio Code - Prettier - Javascript formatter i działa to bardzo sprawnie. Jeśli chcę sformatować plik to tylko korzystam z skrótu Ctrl + Shift + i i dokument jest poprawnie sformatowany. Konfigurację formatera ustawiam w konfiguracji edytora i to wszystko. Już nie muszę patrzeć do konsoli lintera i sprawdzać co muszę poprawić. Teraz formatowanie kodu przypomina korzystanie z takich narzędzi jak formater do Javy w edytorze IntelliJ. Plusem Prettier jest również to, że wspiera JSX oraz funkcjonalności ES2017.

W przypadku, gdy potrzebujemy jeszcze sprawdzania rzeczy poza formatowaniem możemy skorzystać z pluginu do eslint: eslint-config-prettier, który wyłączy wszystkie reguły eslint, które mogą konfliktować z Prettier, a pozwoli na lintowanie zasad, które nie są obsługiwane przez Prettier.

Polecam wszystkim sprawdzenie Prettier i przestanie się martwić o formatowanie kodu i wybieranie miliona reguł do lintowania. Ja już wybrałem Prettier w połączeniu z ESlint i przestałem się martwić.