React & TypeScript: Konfiguracja TypeScript & ESLint

0:00W tej lekcji przyjrzymy się nieco bliżej

0:01temu, w jaki sposób ja sam podchodzę do konfiguracji projektu React oraz Tabs

0:05build, ale i nie tylko oraz zahaczymy również o konfigurację samego IDE.

0:11Jeżeli chodzi o sam plik konfiguracyjny TypeScript, to oczywiście jego

0:14konfiguracja będzie różnić się w zależności od projektu, ale dobra

0:17wiadomość jest taka, że zwykle zaglądamy do niego dość rzadko.

0:21Oczywiście zdarzają się tutaj wyjątki, ale to w sumie jak wszędzie.

0:24Jeżeli chodzi o samą konfigurację, którą

0:26widzimy tutaj, to tak jak powiedziałem w jednej z poprzednich lekcji, mamy tutaj

0:29podstawową konfigurację, która z pewnością sprawdzi się w większości przypadków.

0:33Zobaczmy więc, jakie mamy opcje

0:35specyficzne dla samego projektu, ale zresztą i nie tylko.

0:38Przede wszystkim opcja Allow jest pozwala nam na posiadanie plików z zastrzeżeniem,

0:42że jest w naszym projekcie i wtedy nie otrzymujemy żadnych błędów.

0:45Alternatywnie, tak jak podpowiada nam edytor, możemy włączyć opcję Check jazz,

0:49aby otrzymywać błędy również pochodzące z tych plików.

0:52Następnie mamy opcję Skip lib check ustawioną na todo, która sprawia, że pliki

0:56deklaracji typów nie będą tutaj weryfikowane.

0:58Jest to pomocne chociażby z pracą z zewnętrznymi plikami deklaracji typów.

1:02Ze względu na to, że nie chcemy uwzględniać całej ich zawartości, tylko

1:06faktycznie kod, który rzeczywiście jest wykorzystywany przez naszą aplikację.

1:10Następnie mamy dwie opcje dotyczące pracy

1:12z modułami oraz tego, w jaki sposób możemy dokonywać importów.

1:16Natomiast nie będziemy się tutaj w to

1:17zagłębiać, ale nie będziemy się tutaj w to zagłębiać.

1:20Tym bardziej, że opisy tych opcji są po prostu bardzo jasne.

1:23Następnie mamy strict ustawiony tutaj na

1:25TODO, natomiast zaznaczam, że na początku możemy chcieć go wyłączyć, ale naszym

1:29celem powinno być to, żeby on był zawsze włączony.

1:32Oczywiście znowu to zależy od projektu i od naszych preferencji.

1:36Natomiast ja osobiście praktycznie w

1:37każdym projekcie wykorzystuje opcję script.

1:40Następnie mamy opcję dotyczącą spójności w

1:42importowanych nazwach plików i tutaj również warto ustawić.

1:45Ponadto, aczkolwiek w moich oczach jest to

1:47po prostu mały szczegół, który swoją drogą warto wykorzystać.

1:50Jeżeli chodzi o te kolejne opcje, to są

1:52one w zasadzie dość standardowe, więc nie będziemy poświęcać na nie uwagi.

1:56Natomiast chciałbym zwrócić jeszcze uwagę

1:58na no mid ustawione na TODO, ponieważ tak jak już powiedziałem, w momencie gdy

2:02korzystamy z Kryję wtedy jak tam chcemy, chcemy aby za generowanie naszej aplikacji

2:06odpowiadał web pack, a nie sam kompilator TypeScript.

2:09No i ostatecznie mamy jeszcze opcję GPX ustawioną na GFX właśnie po to, aby

2:14obsługiwać tą specyficzną składnie React a.

2:17W tym momencie.

2:17Jeżeli chodzi o samą konfigurację, to ja jeszcze odsyłam Cię do tego

2:21repozytorium, do którego link umieszczam w zasobach do tej lekcji Zachęcam Cię do

2:25jego lektury ze względu na to, że znajdziesz tutaj wiele różnych wskazówek,

2:29które mogą Ci się przydać w Twoim projekcie.

2:31Tymczasem możesz potraktować to jako bonus, ale pokażę Ci jeszcze kilka innych

2:35rzeczy, które konfiguruje przy praktycznie każdym projekcie, w jakim pracuje.

2:39Mianowicie chodzi o wykorzystanie sprintu oraz Pitera.

2:42I tutaj jeżeli chodzi o samą konfigurację

2:44tych narzędzi tak naprawdę znowu zostawiam Ci dużą dowolność.

2:47Natomiast ja sam zwykle zaczynam od takiej podstawowej konfiguracji, którą właśnie Ci

2:51pokażę, a potem ewentualnie dostosowuję ją do specyfiki mojego projektu.

2:55Zatem pierwszym krokiem będzie to, aby zainstalować sam s line oraz kilka

3:00dodatkowych paczek dotyczących samego TypeScript.

3:02To dzięki temu będziemy w stanie utworzyć

3:04plik konfiguracyjny, przez który znowu za chwilę przejdziemy, a potem do.

3:08Instalujemy jeszcze Twittera.

3:10W porządku, zależności zostały

3:12zainstalowane, więc teraz w głównym katalogu utworzymy sobie plik

3:14konfiguracyjny Saint James, w którym umieścimy naszą konfigurację.

3:19Ja jeszcze tylko zadbam o to, aby sformatować odpowiednio ten kod.

3:22No i zobaczmy co my tutaj właściwie mamy.

3:24Tak jak widzisz, jest to dość podstawowa

3:26konfiguracja pochodząca z jakiejś dokumentacji bądź artykułu, natomiast

3:29jednocześnie jest dość dobrą podstawą do tego, aby potem ją sobie rozszerzać.

3:33Idąc dalej będziemy musieli zainstalować dodatkowe paczki i tutaj mam na myśli

3:37samego Pitera oraz dodatkowe paczki, które pozwolą nam połączyć Pitera ze sprintem.

3:42W tym momencie jeżeli chodzi o instalacja

3:44mamy już wszystko, natomiast znowu będziemy musieli utworzyć plik

3:47konfiguracyjny, ale tym razem dotyczący samego Pitera.

3:51W tym przypadku będzie to plik Piter LCG,

3:54który również umieszczam w głównym katalogu projektu.

3:56A jeżeli chodzi o jego konfigurację to tak

3:58jak widzisz wszystko jest tutaj jasno opisane.

4:00Natomiast ponownie zachęcam do tego, aby

4:02przejrzeć te opcje i sprawdzić czy odpowiadają Twoim potrzebom.

4:05Teraz, aby nam to wszystko działało musimy

4:07jeszcze przejść do pliku s literce i tutaj i tutaj dodać następujące rozszerzenie.

4:12W ten sposób, jeżeli jeszcze zadbamy w moim przypadku w Intelligent o to, aby

4:17skonfigurować rozszerzenie s link, które jest akurat wbudowane w samego IntelliJ A

4:21i tutaj wystarczy tylko zaznaczyć opcję wykrywania pliku konfiguracyjnego jako

4:25automatyczną bądź ewentualnie manualną, jeżeli mamy taką potrzebę.

4:29Natomiast w moim przypadku automatyczna jest zupełnie wystarczająca.

4:33No i ewentualnie muszę zaznaczyć opcję dane slip on save.

4:36Mało tego, mamy jeszcze plugin Safe Actions, który pozwala na wykonanie

4:40różnego rodzaju akcji właśnie w momencie zapisywania pliku.

4:44Jest to niesamowicie przydatna opcja, która pozwala nam zachować odpowiednią

4:47jakość naszego kodu i odpowiednie formatowanie.

4:50Natomiast jednocześnie musimy tutaj uważać

4:52na to, aby opcje konfiguracyjne nie wchodziły ze sobą w konflikt, ponieważ w

4:56efekcie będziemy mieć tutaj wiele niespodziewanych błędów.

4:58I teraz przykładowo jeżeli. Ksenofobem.

5:00Tutaj srebrniki to przede wszystkim.

5:02Od razu mam tutaj informację o błędzie.

5:04Natomiast jednocześnie jeżeli zapiszę ten

5:06plik, wszystko zostanie natychmiast poprawione za mnie.

5:09A tak swoją drogą to domyślam się, że możesz wykorzystywać Visual Studio Code i

5:13tutaj konfiguracja Jasmine oraz Splittera nie różni się w żaden sposób.

5:17Natomiast już opcje formatowania przez zapisywanie musisz włączyć w pliku

5:21konfiguracyjnym uruchamiając opcję Editor format on save.

5:25Wystarczy ustawić ją metodą i wszystko będzie wyglądało dokładnie tak jak u mnie.

5:29Jeżeli chodzi o samą konfigurację projektu to byłoby na tyle.

5:33Dziękuję Ci teraz za uwagę i zapraszam Cię do kolejnej lekcji.