TypeScript: Konfiguracja IDE

3.8+

0:00Konfiguracja samego TypeScriptu to jedno, a konfiguracja naszego IDE to drugie.

0:06Teoretycznie mógłbyś wykorzystywać TypeScript już teraz.

0:09Natomiast ja chciałbym pokazać Ci jak

0:12skonfigurować narzędzia po to, aby pisanie kodu było dla Ciebie prostsze.

0:16W tym celu wykorzystamy kilka narzędzi.

0:19Istnieje szansa, że już o nich słyszałeś.

0:21Mianowicie będzie to Prettier, ESLint oraz wbudowany Debugger.

0:26Przede wszystkim upewnij się, że masz zainstalowane te rozszerzenia.

0:30Będzie to Prettier i jego ikonka wygląda w ten sposób.

0:35Następnie ESLint.

0:38Oraz Debugger for Chrome.

0:41Po ich instalacji możemy przejść do konfiguracji i w pierwszej kolejności

0:46przejdź do pliku settings.json, w którym powinieneś ustawić takie opcje jak tutaj.

0:51Oczywiście nie musisz tego przepisywać, tylko zajrzyj do źródeł tego kursu.

0:55Mam nadzieję, że nie będziesz miał nic

0:57przeciwko, jeżeli pominę opis tych funkcji.

1:00W tej chwili nie jest to do końca istotne

1:02poza tym, że aktywujemy tutaj Prettier'a oraz ESLint.

1:06Jedyną opcją, która może Cię faktycznie

1:08zainteresować jest uruchamianie automatycznego formatowania po zapisaniu pliku.

1:13Z jakiegoś powodu możesz chcieć wyłączyć tę opcję.

1:16Tymczasem przechodzimy do dalszej

1:18konfiguracji: mianowicie zajmiemy się teraz instalacją niezbędnych paczek.

1:24Będzie to obszerna lista, która nie wymaga

1:26omówienia, dlatego pozwolę sobie ją wkleić.

1:29Zanim jednak to wszystko zainstalujemy, dodamy również dwa nowe skrypty.

1:33Są to jak widzisz skrypty uruchamiające polecenie ESLint.

1:37I teraz jeżeli chodzi o ESLint musisz wiedzieć tylko tyle, że jego rolą będzie

1:41czuwanie nad tym, żeby nasza składnia była zgodna z dobrymi praktykami.

1:45Oczywiście te wszystkie dobre praktyki możemy sobie skonfigurować.

1:50W każdym razie teraz możemy po prostu uruchomić polecenie 'yarn install'.

1:56Kolejnym krokiem będzie utworzenie pliku

1:58konfiguracyjnego ESLint, w którym znajdzie się cała konfiguracja ESLint.

2:04Tutaj tego wszystkiego jest naprawdę dużo i tak naprawdę większości tych plugginów nie

2:09musisz znać, tylko po prostu wiedz, że wykorzystujemy tutaj dobre praktyki

2:13ze style guide'a AirBnB

2:15oraz wyłączamy kilka niepotrzebnych opcji.

2:18W praktyce dostosowanie tego pliku zależy w dużym stopniu od projektu.

2:22Ta konfiguracja, którą widzisz, powinna wystarczyć nam na potrzeby tego kursu.

2:27Bo np. jeżeli miałbyś projekt, wykorzystujący ReactJS

2:31z pewnością chciałbyś zadbać o to, aby ESLint się o tym dowiedział.

2:35Całkiem istotny jest jeszcze tutaj fakt, że jak widzisz tutaj wykorzystujemy również

2:40konfigurację naszego TypeScriptu. Dzięki temu ESLint wie co się dzieje po stronie TypeScriptu.

2:45Tymczasem kolejny plik konfiguracyjny, który jest nam potrzebny

2:49dotyczy samego Prettier'a.

2:51W przeciwieństwie do ESLint

2:53tutaj będzie zdecydowanie prościej.

2:55Po prostu mamy tutaj dwie, małe opcje, które dbają o średniki i przecinki.

3:00Teraz zarówno ESLint, jak i Prettier są

3:03gotowe i możemy przejść do opisania naszego kodu.

3:07Konkretnie stworzymy sobie tutaj klasę i

3:10od razu mamy jakąś informację. Mianowicie ESLint ostrzega nas, że zdefiniowaliśmy klasę, ale

3:16jej nie wykorzystaliśmy i to akurat na ten moment jest ok,

3:20ale oczywiście musimy się tym zająć,

3:22więc definiujemy constructor. I od razu mamy tutaj błąd.

3:26Ponownie ESLint informuje nas o tym, że zdefiniowaliśmy bezużyteczny constructor.

3:32I faktycznie w tej chwili on dokładnie taki jest.

3:35Dlatego zadbamy, aby miał jakieś zajęcie i dzięki niemu tworzymy właściwość name.

3:40Następnie mamy klasykę gatunku, czyli

3:43metodę sayHello, która ponownie jest podkreślona jako błąd.

3:47I tutaj akurat ESLint przypomina nam o tym,

3:50że musimy określić typ wartości zwracanej przez tę funkcję.

3:54Na ten temat akurat będziemy rozmawiać jeszcze w kolejnych lekcjach,

3:58ale tymczasem dodam tutaj rozwiązanie.

4:01Teraz jesteśmy gotowi do tego, aby zadbać o to upomnienie i wykorzystać tę klasę.

4:07No i faktycznie upomnienie stąd zniknęło, ale pojawiło się tutaj. Ponownie mamy

4:12informację o tym, że utworzyliśmy zmienną, która nie została nigdzie wykorzystana.

4:17Musisz przyznać, że tego typu upomnienia mogą być całkiem przydatne w kontekście

4:21jakości naszego kodu i tak naprawdę na tym właśnie polega główne zadanie ESLint.

4:26No to proponuję, abyśmy jednak wykorzystali tą zmienną. Musisz przyznać, że takie

4:32przypominanie jest całkiem przydatne, ale teraz pokażę Ci coś jeszcze,

4:36czyli rolę jaką pełni Prettier.

4:38Załóżmy, że sformatujemy to sobie nieco inaczej.

4:43Jak widzisz tak napisany kod nie jest już

4:46tak samo czytelny jak ten przed chwilą, ale wystarczy, że zapiszę teraz tę zmianę,

4:51no i Prettier zadbał o to, żeby wszystko wróciło do normy.

4:55Tym sposobem osiągnęliśmy cel tego filmu.

4:58Ale mam dla Ciebie coś jeszcze.

5:00Zazwyczaj w sytuacji, gdy chcemy podejrzeć

5:03wartość jakiejś zmiennej, wykorzystujemy po prostu console.log.

5:08Jest to jak najbardziej OK.

5:10No ale żeby zobaczyć wartość tej zmiennej muszę teraz przejść do przeglądarki,

5:14wykonać odpowiednią akcję i dopiero wtedy mogę zobaczyć jej wartość.

5:19Drugim sposobem jest wykorzystanie debuggera

5:21wbudowanego w przeglądarkę Chrome i oczywiście jest to bardzo dobra opcja,

5:26przy czym mamy jeszcze lepszą. Mianowicie

5:29tą opcją jest wykorzystanie debuggera bezpośrednio w Visual Studio Code.

5:34W tym celu wciskam kombinację klawiszy Command+Shift+IDE do tego, aby uruchomić

5:39debugger. Na początek ponownie musimy utworzyć nowy plik konfiguracyjny

5:44i w tym przypadku interesuje nas Chrome. Ze względu na to, że do budowania naszej

5:49aplikacji wykorzystujemy ParcelJS w jego dokumentacji możemy znaleźć

5:54konfigurację tego debuggera. Po prostu ją teraz skopiuję,

5:57ale i tak będziemy musieli ją w pewnym stopniu dostosować.

6:01Konkretnie nie wiem z jakiego powodu ta konfiguracja nie pomija plików zawartych w

6:06katalogu node_modules. Debuggowanie tych plików w większości przypadków raczej nas nie

6:12interesuje, więc ta opcja jest jak najbardziej pożądana.

6:16No ale teraz niestety, żeby to wszystko działało, musimy zrobić coś jeszcze i

6:21ponownie czeka nas stworzenie pliku konfiguracyjnego,

6:24tym razem babel'a.

6:26Tutaj musimy uruchomić dwa plugginy, które zadbają o to, aby debugger funkcjonował poprawnie

6:32w związku z tym, że wykorzystujemy TypeScript.

6:35Zwróć uwagę jak Prettier dba o to, abym pisał poprawny kod.

6:39W każdym razie na tym etapie powinniśmy być gotowi do tego, aby uruchomić naszą

6:43aplikację. I tutaj usunę tylko ten console.log i uruchomię samą aplikację.

6:49Aplikacja działa, ale nas interesuje sam debugger.

6:53Aby go teraz wykorzystać musimy zaznaczyć tzw.

6:55break pointy.

6:57Jeżeli korzystałeś z debuggera wbudowanego w Chrome, z pewnością ta czynność nie jest Ci obca.

7:03Teraz, w momencie gdy uruchomię ten debugger,

7:05wykonywanie aplikacji zostało zatrzymane a ja mogę podejrzeć wartości zmiennych. W ten

7:11oto sposób uzyskaliśmy narzędzia, które sprzyjają odpowiedniemu developmentowi.

7:16Oczywiście sam etap konfiguracji jest uciążliwy i czasem na etapie developmentu

7:21może pojawić się jakaś sytuacja, która będzie wymagała zmiany tej konfiguracji.

7:25Natomiast nie ma wątpliwości co do tego, że tak zainwestowany czas po prostu się

7:30zwraca. I tym pozytywnym akcentem kończymy tę lekcję i słyszymy się za chwilę.