Narzędzia JavaScript Full-Stack Web Developera: ESLint i Prettier z Vite

0:00Kolejnym ważnym elementem naszego workflow

0:02jest wykorzystanie narzędzi takich jak Prettier oraz ESLint.

0:06W jednym i w drugim przypadku mówimy o narzędziach, które

0:09krótko mówiąc ułatwiają nam pisanie kodu

0:11poprzez kontrolę składni oraz sposobu formatowania.

0:15W przypadku samego Prettiera dbamy np.

0:17o wcięcia, a ESLint zadba również o to, aby przeanalizować nasz kod pod kątem

0:22chociażby zachowania spójności w wykorzystaniu jakiś elementów składni.

0:26Coś takiego zyskuje niesamowicie na

0:28znaczeniu, szczególnie gdy pracujemy w zespole, ponieważ każdy z nas ma nieco

0:32inne nawyki dotyczące tego, w jaki sposób pisze kod.

0:35W momencie, gdy korzystamy z narzędzi takich jak ESLint czy Prettier, niezależnie od

0:39naszych nawyków pisanych przez nas kod jest odpowiednio dostosowany do

0:43narzuconych z góry zasad, które oczywiście możemy dostosować do swoich potrzeb.

0:48W każdym razie najważniejsze jest jednak to, aby w ogóle podłączyć te narzędzia do

0:52swojego projektu, skonfigurować je w odpowiedni sposób oraz też aktywować

0:57wewnątrz naszego edytora, tak aby w momencie zapisywania pliku bądź też

1:01ewentualnie budowania aplikacji, kod, który piszemy został odpowiednio

1:05przeanalizowany właśnie w poszukiwaniu ewentualnych błędów składni.

1:09No i tutaj jeżeli chodzi o błędy składni, to

1:11nie mam tutaj na myśli jakichś krytycznych błędów, takich jak np.

1:15literówka w słowie kluczowym const,

1:17natomiast bardziej wykorzystanie słowa kluczowego const zamiast war, bądź też np.

1:22nie zostawianie niewykorzystanych zmiennych.

1:25No to myślę, że możemy wrócić do naszego projektu wygenerowanego w Vite i

1:29zainstalować w nim zarówno ESLint jak i Prettiera.

1:32W pierwszej kolejności jako zależności

1:34deweloperskie zainstalujemy sobie Prettiera, a zaraz po nim samego ESLint.

1:40No i teraz w głównym katalogu możemy utworzyć

1:42plik eslintrc.js, z którego wyeksportujemy sobie następujący obiekt.

1:48Następnie będzie nam potrzebny jeszcze drugi plik o nazwie prettierrc.

1:52I tutaj w jego przypadku mówimy o formacie JSON.

1:55W związku z tym, że zarówno ESLint, jak i Prettier zasadniczo zajmują się tym samym obszarem,

2:01musimy również upewnić się, że nie będą wchodzić sobie w drogę.

2:04W tym celu musimy zainstalować rozszerzenie o nazwie eslint-config-

2:07prettier i również zapisać je jako zależność deweloperska.

2:12No i teraz zwróć uwagę, że nawet w tym przypadku mamy tutaj brak spójności

2:16pomiędzy tym, w jaki sposób zapisujemy elementy tablicy.

2:19No i właśnie chociażby w przypadku takich rzeczy zamiast naprawiać je ręcznie,

2:23możemy wykorzystać Prettier i ESLint do tego, aby zrobiły to za nas.

2:28Zanim jednak do tego przejdziemy, musimy utworzyć sobie dwa nowe pliki.

2:32Pierwszym z nich będzie eslintignore,

2:34wewnątrz którego umieścimy chociażby katalog node_modules czy dist oraz kilka dodatkowych plików.

2:39Analogicznie też musimy utworzyć plik

2:42prettierignore, ponieważ też analogicznie nie chcemy, aby Prettier zaglądał nam w te miejsca.

2:47W momencie gdy to zrobimy teraz możemy

2:49wcisnąć command przecinek do tego, aby przejść do ustawień ESLint

2:54i tutaj wyłączyć manualną konfigurację oraz aby zaznaczyć checkbox by ESLint był

2:59uruchamiany za każdym razem, gdy zapisujemy plik.

3:02To samo robimy teraz w przypadku Prettiera, gdzie również zaznaczamy tą opcję on save.

3:07W momencie gdy to zrobimy i wrócimy teraz

3:10do naszego pliku, a następnie zapiszemy go, to zwróć uwagę, że nie tylko został

3:15odpowiednio sformatowany, ale też została zastosowana właściwa składnia.

3:20No i teraz możemy pójść krok dalej i zainstalować kilka dodatkowych paczek.

3:24I teraz pierwsza z nich działa analogicznie jak Prettier

3:27czyli zasadniczo dąży do tego, aby nie było konfliktów pomiędzy jednym a drugim.

3:32eslint-plugin-import umożliwia nam wskazanie

3:35ESLintowi, w jaki sposób rozwiązywane są importy w naszej aplikacji

3:39a ostatnia dba o to, abyśmy nie

3:41popełniali błędów związanych z accessibility.

3:44Zatem w praktyce możemy usunąć sobie tą ostatnią zależność, a następnie dodać te pozostałe.

3:49Tutaj ponownie w związku z tym, że

3:51zapisałem plik, ustawienie zostało w odpowiedni sposób sformatowane.

3:56Tymczasem w naszej konfiguracji brakuje jeszcze jednego ustawienia

3:59w związku z tym, że w naszej aplikacji wykorzystujemy ES Modules.

4:03Jeżeli teraz zapiszemy zmiany, to jeszcze tutaj zwróciłem tylko uwagę na fakt, że w

4:08ustawieniach Prettiera domyślnie nie ma tutaj plików HTML.

4:11W związku z tym upewnij się, że to rozszerzenie jest tutaj uwzględniane

4:15no i gdy przejdziemy sobie np.

4:16do pliku about html i jeżeli tutaj popełnimy jakiś błąd, np.

4:21wstawimy spację tam, gdzie być jej nie powinno, bądź też np.

4:24atrybuty będą sformatowane w niewłaściwy

4:27sposób, to to również zostanie tutaj naprawione.

4:30Zatem jak widzisz, bez wątpienia tutaj

4:32musieliśmy poświęcić chwilę na to, aby zainstalować te wszystkie rozszerzenia

4:36oraz pokonfigurować zarówno ESLint jak i Prettier

4:38natomiast moim zdaniem było warto. Tym

4:41bardziej, że jeżeli chcemy wprowadzić jakąś zmianę w naszym stylu formatowania,

4:45to tak w zasadzie wystarczy zdefiniować ją w pliku konfiguracyjnym.

4:49Oczywiście trzeba tutaj jeszcze podkreślić fakt, że w tym momencie nie wykorzystujemy

4:53tutaj żadnego frameworka takiego jak React czy Vue.

4:56W związku z tym w momencie, gdy będziemy je dodawać, trzeba się upewnić również, że

5:01zostaną tutaj zastosowane odpowiednie reguły oraz ewentualnie pluginy, które

5:05będą związane z narzędziami, po która sięgamy.

5:08Po prostu jest bardzo istotne to, aby ESLint oraz Prettier wiedziały możliwie jak najwięcej

5:13na temat kodu, które piszemy i dzięki temu sprawnie wyłapywał ewentualne błędy.

5:19Co więcej, w przypadku samego ESLinta może

5:21zdarzyć się tak, że będą się pojawiać jakieś specyficzne reguły dla Twojego

5:25kodu, które będą musiały zostać dodane jako wyjątki.

5:29I w tym akurat aspekcie bardzo mocno pomaga nam IntelliJ.

5:32Mianowicie tutaj mamy błąd ESLint informujący nas o tym, że zmienna A

5:37została tutaj zdefiniowana, a jednocześnie nigdy nie została wykorzystana.

5:41W związku z tym mamy tutaj do czynienia z

5:43regułą no-unused-vars, w przypadku której możemy wykonać kilka akcji.

5:48Nie wszystkie z nich są tutaj wyjątkowo

5:50trafne, ale przykładowo ta pierwsza może nam się przydać.

5:54Mianowicie dodanie takiego komentarza

5:55sygnalizuje ESLintowi, że w kolejnej linii należy zignorować zasadę no-unused-vars.

6:02Jednocześnie moglibyśmy teraz skopiować nazwę tej zasady, a następnie przejść do

6:06pliku eslintrc, gdzie możemy zdefiniować sobie reguły.

6:10No i rzeczywiście możemy tutaj dodać tą

6:12regułę, ale dodatkowo musimy zainstalować ją jako zależność.

6:17Konkretnie tutaj jej wartość możemy ustawić na 0 1 i 2.

6:200 oznacza, że reguła jest ignorowana 1, że

6:24zostaniemy o jej naruszeniu jedynie ostrzeżeni, a 2, że zakończy się błędem.

6:29No i teraz jeżeli wrócimy do pliku app.js

6:31faktycznie nie mamy tutaj informacji o błędzie, a jedynie komunikat ze strony

6:36IntelliJ informujący nas o tym, że ta zmienna nie została wykorzystana.

6:40Jeżeli byłoby tutaj 1, no to mielibyśmy tak jak powiedziałem

6:44wyłącznie ostrzeżenie, które w żaden sposób nie zostanie uwzględnione np.

6:48na etapie budowania naszej aplikacji.

6:51Po prostu w momencie gdybyśmy mieli tutaj

6:53dwa bądź nie mieli w ogóle tego wpisu, no to np.

6:56w momencie budowania naszej aplikacji

6:58mielibyśmy tutaj jasną informację o błędzie.

7:00Ale jednocześnie w przypadku samego Vite,

7:03nawet jeżeli zbudujemy sobie teraz tą aplikację, wszystko pójdzie w porządku.

7:07Aby ESLint został uwzględniony przez Vite

7:09będziemy musieli doinstalować kolejny

7:11plugin. Czyli w pierwszej kolejności zainstalujemy sobie vite-plugin-eslint,

7:16a następnie w katalogu głównym aplikacji musimy utworzyć sobie plik vite.config.js

7:21I tutaj zastosować następującą składnię.

7:24Tymczasem pojawił się tutaj kolejny błąd

7:26informujący nas o tym, że mamy problemy z zaimportowaną paczką Vite.

7:31Co więcej, ten problem wcale nie jest taki oczywisty do rozwiązania ze względu na to,

7:35że to co musimy zrobić, to powiedzieć ESLintowi, żeby analizując kod JavaScript

7:41uwzględniał tutaj funkcje dostępne w wersji np.

7:44ECMAScript 2020.

7:46Po wprowadzeniu tej zmiany błąd, który mamy w tym miejscu zniknie

7:49a my jeżeli ponownie spróbujemy zbudować sobie aplikację, w przypadku której jak widzisz

7:54mamy tutaj błąd, to niestety nie będzie to już takie oczywiste.

7:59Wcześniej jednak pamiętaj o tym, aby w pliku index.js

8:02zaimportować plik app.js tak, aby był uwzględniony w naszym buildzie.

8:06I teraz jeżeli zbudujemy naszą aplikację niestety build się nie powiedzie ze

8:11względu na to, że mamy tutaj błędy ESLint, które muszą zostać naprawione.

8:16No i teraz w momencie gdy je naprawimy

8:18będziemy w stanie zbudować naszą aplikację.

8:22Zatem teraz podsumowując co tak w zasadzie tutaj zrobiliśmy, to przede wszystkim

8:25skonfigurować ESLint do tego, aby analizował nasz kod pod kątem różnych reguł składni,

8:31następnie mamy też prettierrc, następnie

8:34skonfigurowaliśmy również Prettier, który dba o odpowiednie formatowanie

8:38no i ostatecznie zadbaliśmy też o to, aby

8:40te dwa narzędzia nie wchodziły sobie w drogę.

8:44Poza tym, gdyby tego było mało, to uwzględniliśmy tutaj również Vite, który

8:47nie zbuduje nam aplikacji tak długo, jak będą tutaj jakiekolwiek błędy.

8:52Jak się pewnie domyślasz, z jednej strony

8:54może być to dość problematyczne i momentami utrudniające życie, ale w

8:58praktyce po prostu żadne błędy nie zostaną tutaj przepuszczone.

9:02A przynajmniej tak długo, jak trzymasz

9:04dyscyplinę dotyczącą tego, aby nie naprawiać błędów w taki sposób.

9:09I na sam koniec jeżeli jeszcze nie

9:10zdarzyło Ci się korzystać do tej pory z ESLint lub Prettiera lub nie robisz tego świadomie, to

9:15odsyłam Cię również do repozytorium airbnb, gdzie znajdziesz bardzo solidny zestaw

9:20zasad dotyczący pisania kodu JavaScript, z którego swoją drogą można się nawet

9:25nauczyć wielu fajnych rzeczy, a jednocześnie też nic nie stoi na

9:28przeszkodzie, aby przejść sobie przez tutorial, aby wykorzystać te reguły w

9:32Twoim projekcie poprzez po prostu rozszerzenie zdefiniowanych przez nich reguł.

9:37Z doświadczenia muszę powiedzieć, że

9:38większość z nich jest w porządku, natomiast w niektórych przypadkach

9:42istnieje konieczność nadpisania pewnego rodzaju decyzji, które w ich przypadku

9:46pewnie się sprawdzają, ale chociażby w moim już nie do końca.

9:50Teraz nie pozostaje mi już chyba nic innego jak

9:52podziękować Ci za uwagę i zaprosić do kolejnej lekcji.