React: Konfiguracja ESlint

16.8.x

0:00Cześć w tej lekcji wytłumaczę ci czym jest ESlint,

0:04dlaczego potrzebujemy go w naszym projekcie i dlaczego sprawi on, że nasz kod po prostu

0:08będzie ładniejszy, będzie lepszy, będzie też mniej zawodny, ESlint

0:13to inaczej, ESlint

0:17to narzędzie do tak zwanej statycznej analiza kodu, czyli takie

0:21narzędzie, które podczas pisania kodu sprawdza ten kod właściwie testuje

0:26go pod kątem pewnych zależności pewnych zasad a następnie

0:30pokazuje nam efekty swojej analizy albo w terminalu albo jeśli mamy

0:34odpowiedni plugin to pokazuje go również w edytorze i teraz pokażę

0:38ci jak to wszystko skonfigurować żeby to działało razem z create-react-app, więc

0:43teraz przejdziemy sobie do edytora i pierwsze co

0:47zrobimy to wejdziemy sobie do zakładki extensions, a następnie

0:52wpisz tutaj ESlint. Teraz

0:58musimy go zainstalować i

1:27tak

1:33jak widzisz we wskazówce tutaj będziemy potrzebować w naszym folderze projektowym

1:37pliku ESlint rc, jest to taki plik konfiguracyjny, w którym

1:41znajdują się wszystkie zasady dotyczące właśnie ESlint'a, domyślnie

1:51w create-react-app znajduje się on w pliku package json, natomiast my

1:55sobie go wyrzucimy stąd, właściwie wytniemy ten

1:59fragment, bo on nam się przyda. Wyrzucimy tę konfigurację stąd, stworzymy

2:04nowy plik kropka ESlint rc. Uwaga

2:08kropka Jest na początku tego pliku i tutaj

2:12wkleimy extends react app, za chwilę przyjedziemy do tego żeby troszkę

2:17więcej jeszcze tutaj dopisać. Dla pewności sprawdzimy czy nic

2:21się nie wywala czy to działa. Uwaga

2:31nie byłem w folderze z moim projektem, więc

2:35jeszcze raz npm start. Jak

2:43widzisz projekt się uruchamia, tak, nic się nie zepsuło. To

2:51co chcemy zrobić to dodać pewien zestaw zasad, które jeszcze

2:55wzmocnią jakby to sprawdzanie i dążenie

3:00do tego żeby nasz kod miał jak najwięcej takich dobrych praktyk i zazwyczaj

3:04do tego typu rzeczy używa się takiej paczki przygotowanej przez airbnb tak

3:09to tych airbnb od fajnych domków nad jeziorem. Jeśli

3:14sobie teraz wejdziemy i wpiszemy ESlint airbnb to

3:18zobaczymy, że mają swoją paczkę i żeby

3:24ją zainstalować będziemy musieli dodać jeszcze kilka innych paczek, kilka

3:28innych zależności, które są właśnie potrzebne do tego, żeby ESlint

3:32config airbnb działał i to jest ESlint ESlint plugin import plugin

3:37react plugin jsx i moglibyśmy to z łapy po prostu

3:41jedno po drugim wpisać, a możemy też użyć npx'a, którego już wcześniej

3:45używaliśmy. On tutaj ma taką komendę install-peerdeps,

3:49która pozwala na zainstalowanie automatyczne wszystkich dependencji,

3:54które są potrzebne do tego, żeby ta paczka działała, więc teraz przykleimy

3:58sobie po prostu to po do terminala i zaczekamy,

4:05aż to wszystko się zainstaluje. Okej,

4:35jak widzisz wszystkie paczki zostały tutaj dodane i

4:42teraz to, co możemy zrobić to dodać

4:46nowy plugin do

4:53naszej konfiguracji eslintrc. Żeby to zrobić musimy tutaj utworzyć

4:57tablice, która będzie zawierać react-app oraz

5:01airbnb i w

5:06tym momencie, jak odpalimy sobie nasz terminal i wpiszemy npm

5:11start to powinna się włączyć nasza aplikacja React'owa, ale

5:16niestety mamy błąd, wynikający z tego, że create-react-app

5:21potrzebuję ESlinta bardzo określonej wersji czyli

5:255.12, a my mamy

5:29wersję 5.3.0, czyli najnowszą. Żeby to naprawić po prostu

5:33musimy odinstalować 5.3.0 wpisujemy npm

5:38uninstall eslint. Możemy od razu dodać

5:42npm install eslint,

5:46usuwamy

5:53tego eslinta, a następnie

6:06dodajemy tego w odpowiedniej wersji wpisując npm install eslint

6:10małpa 5.12.0, okej.

6:31W tym momencie jak odpalimy sobie npm start to nasza apka powinna już

6:35się włączyć. Tak jest, wszystko działa.

6:40Dodatkowo

6:44teraz jeśli wejdziemy sobie jakieś komponent to reguły dodane

6:48przez airbnb powinny zacząć działać, okej

6:52i już widzę, że nie działają, a powinno się to pojawić kilka rzeczy jeszcze zrobię

6:57kilka błędów, żeby się upewnić. Tak nic się nie pojawia. Spójrzmy na mają

7:01strukturę plików. Jakimś cudem ESlintrc wyskoczył mi poza

7:05katalog z moim projektem, więc muszę go po prostu tutaj wciągnąć.

7:10Pamiętaj, że on nie ma się znajdować w folderze src tylko w tym takim gównym

7:14root'owym folderze z projektem i teraz jak

7:18to przyciągnąłem to nagle wszystko podkreśliło

7:22mi się na czerwono, co oznacza, że nasz ESlint zaczął działać. Jak sobie zobaczymy

7:26tutaj, widzimy że brakuje nam średnika. Takie

7:32proste błędy jesteśmy w stanie naprawić dzięki skrótowi, jak

7:37sobie włączę Command Shift i auto fixable problems,

7:43jak to nacisnę to średnik sam się pojawi, czyli wszystkie

7:47takie bardzo proste błędy wynikające właśnie z zapomnianego średnika albo

7:51dodanej spacji w niewłaściwym miejscu można naprawić dzięki temu

7:56właśnie skrótowi. Ja go mam podpiętego pod skrót Shift

8:00Command Alt P, ale możesz to sobie powodu podłączyć pod jakikolwiek

8:04dowolny skrót klawiszowy w ustawieniach swojego edytora. Możesz to

8:08zrobić włączając preferencje, możesz

8:17to zrobić otwierając preferencje skrótów klawiszowych i tutaj

8:25jak piszesz eslint, to jest coś takiego jak

8:29fix all auto-fixable problems, jak to naciśniesz, to

8:33tutaj możesz włączyć sobie dowolny skrót klawiszowy, który te błędy

8:37będzie automatycznie naprawiał. Natomiast mamy też drugi typ błędów, które

8:41nie są samonaprawialne i tymi błędami są takie poważniejsze związane

8:45z jakąś tam strukturą pliku, na przykład ten komponent nie powinien

8:50być klasą. On nie ma żadnego state'u, więc nie ma potrzeby, żeby był klasą, dlatego ESlint

8:54mówi nam wyraźnie, że to powinna być czysta funkcja i powinniśmy to teraz

8:58naprawić i tym właśnie zajmiemy się w kolejnej lekcji, gdzie zobaczymy

9:02czy ESlint w ogóle jeszcze czymś potrafi nas zaskoczyć. Do zobaczenia

9:06w następnej lekcji.