React: Konfiguracja Prettiera

16.8.x

0:00Cześć, w ostatniej lekcji naprawiliśmy błędy związane ze

0:04ESlintem, ale zauważyliśmy też, że pojawiają się nowe błędy,

0:08których linter czasami po prostu nie potrafi naprawić i żeby się z

0:12nimi uporać możemy dodać nową paczkę do naszego projektu nazywa

0:17się ona prettier i pierwsze co zrobimy, to zainstalujemy sobie rozszerzenie

0:21do naszego VScode'a, który właśnie tak się nazywa i w ten

0:28sposób będziemy mogli dokonywać autoformatowanie naszego kodu, podobnie

0:32jak robi to ESlint w przypadku błędów, który potrafi naprawić i robi to prawidłowo,

0:37więc teraz wrócimy sobie do naszych plików, jeśli

0:42otworzę sobie panel z opcjami i wybiorę

0:48format document, to zauważysz, że linijki

0:53które były do tej pory za długie, nagle uzyskały poprawną długość natomiast

0:59apostrofy, które były poprawne przy importach nagle zmieniły się z

1:03powrotem na cudzysłowie, jeśli teraz zrobię Command S, czyli

1:08zapiszę plik to ESlint z powrotem zmieni na na apostrofy,

1:12a jak sformatuję to na nowo to

1:16zmieni się z powrotem na cudzysłowie i tak w kółko, czyli mamy konflikt między

1:21ESlintem a prettier'em. Jest to całkiem normalne, ale nie martw

1:25się, wyjdziemy z tego bez szwanku. Pierwszą rzeczą, na którą możemy sobie spojrzeć,

1:29jest właśnie informacja o plugin'ie prettier, która

1:34mówi nam, że jeśli nie ma żadnego pliku konfiguracyjnego to

1:38prettier bierze sobie konfigurację z ustawień naszego edytora

1:42kodu. Jak sobie wejdziemy tutaj w ustawienia i wpiszemy prettier to

1:47zobaczymy, że faktycznie wszystkie reguły prettier'a znajdują się tutaj w konfiguracji

1:51i możemy je poustawiać, natomiast problem z tym jest taki, że jeśli pracujemy na

1:55przykład w kilka osób na jednym projektem to jedna osoba może

1:59mieć coś włączone, druga wyłączone i dojdziemy po prostu do bardzo

2:03nie fajnych doświadczeń, gdzie będziemy mieć spore konflikty między

2:07poszczególnymi komputerami, jeśli chodzi o ustawienia właśnie prettier'a, więc

2:11żeby temu zapobiec stworzymy teraz plik konfiguracyjny, podobnie

2:15jak ESlintrc, prettier ma swój, który się nazywa uwaga prettier rc,

2:21również z kropką na początku i dzięki

2:25temu, że stworzyliśmy ten plik, nasz edytor kodu będzie miał takie źródło

2:29prawdy, podobnie jak ESlint i wszystkie inne narzędzia, które skonfigurujemy

2:33będą mogły korzystać z tego prettier rc, żeby wiedzieć Jakimi

2:37zasadami kieruje się prettier i z racji, że zainstalowaliśmy wcześniej

2:41plugin do naszego edytora, teraz jak otworzymy sobie klamry json'a, to

2:45jak będziemy chcieli wpisać jakąkolwiek zasadę, to ona zostanie nam elegancko

2:50podpowiedziana i teraz my chcemy, tak naprawdę, dwie rzeczy tutaj zrobić

2:54single quote, ustawiamy

2:58na true, czyli wszystkie stringi będą z apostrofem,

3:02a nie w cudzysłowie trailingComma, tutaj

3:11dajemy all i dzięki temu będzie mieć zawsze średniki na końcu linijek i może

3:16jeszcze dodamy tutaj długość linijki maksymalną, na 100

3:20znaków, okej i z racji, że to już mamy dodane, to teraz jeszcze

3:24musimy skonfigurować naszego ESlint'a, żeby nie wchodził w konflikty z naszym

3:28prettier'em, ponieważ teraz niektóre reguły mogą na siebie nachodzić i wpływać

3:32na siebie przecząco, więc żeby tego uniknąć dokonamy

3:36kilku zmian w naszej konfiguracji ESlinta, wywalimy sobie React'a, a następnie

3:41doinstalujemy kilka paczek, które pozwolą nam na poprawną konfigurację naszego

3:46prettier'a względem ESlinta, npm install, paczki

3:50deweloperskie eslint config

3:55prettier oraz prettier, to

4:01sobie zainstalujemy i w czasie kiedy to się instaluje tutaj dodamy

4:05dwie rzeczy. Pierwsza to będzie prettier i ta

4:09zasada, właściwie rozszerzenie zasad ESlinta mówi,

4:14że jest link od tej pory nie będzie wchodził w konflikt z regułami prettier'a

4:19i druga dotyczy już samego React'a, okej

4:25i z taką konfiguracją na razie to wszystko zostawimy, to powinno działać. Oczywiście

4:29wcale nie musi. Na tym polega piękno konfiguracji projektu, że w

4:33każdym momencie wszystko może się wysypać ale tego typu błędy będziemy po prostu

4:37na bieżąco naprawiać, także bądźmy na to gotowi, ten kurs może

4:41sobie pozwolić na taką dozę szaleństwa, zobaczymy co nas czeka. Podobnie

4:46zresztą jeśli będziemy mieli taką potrzebę, możemy zawsze rozszerzyć tutaj

4:50zakres zasad, którymi się kierujemy. To są oczywiście dodatkowe zasady,

4:54które sami dopisujemy, bo oprócz tego, mamy jeszcze cały zbiór zasad skonfigurowany

4:59tutaj w miejscu. Wróćmy teraz sobie tylko na szybko do app js i

5:03zapisujemy ten plik. Zaimportujemy

5:08komponent, którego nie potrzebujemy, wywalimy średniki i na

5:14przykład dodamy jeszcze tutaj jakąś właściwość, a te

5:19linijkę zrobimy za drugą i teraz jeśli wszystko

5:23pójdzie dobrze, to po sformatowaniu dokumentu te

5:28zmiany zostaną naprawione, to znaczy, że ten dokument zacznie wyglądać lepiej, a przy

5:32okazji już widzimy, że ESlint mówi nam, że ma problem z tym, że importujemy

5:36komponent, a wcale nie powinniśmy, więc to możemy od razu naprawić i teraz

5:41jeśli zrobię Command S, to nic się nie wydarzy, muszę zrobić

5:46format document albo nacisnąć Alt Command i L

5:50w moim przypadku, ten skrót klawiszowy jest tutaj widoczny. Natomiast podobnie jak w

5:54przypadku jest ESlinta, który sam naprawia błędy, które może naprawić

5:58możemy też zrobić auto format dla dokumentu, czyli zaaplikowanie

6:02automatyczne prettier'a przy zapisywaniu pliku. Wystarczy,

6:09że wpiszemy tutaj format i znajdziemy format on save teraz jak to sobie

6:14zaznaczymy, wrócimy do naszego pliku i teraz

6:18nacisnę Command S to teoretycznie wszystko powinno zacząć wyglądać lepiej

6:25i faktycznie tak się stało średnikiem wróciły na swoje miejsce, zamiast

6:29cudzysłowów mamy apostrofy, a wiele elementów wiele

6:33propsów, które znajdowały się na jednej linijce nagle pojawiło się w równym

6:37rządku, także wszystko działa tak jak należy, możemy przejść do następnej

6:41lekcji, gdzie skonfigurujemy sobie husky'ego i lint-staged'a, czyli

6:45rzeczy, które zapobiegają commit'owanie brzydkiego kodu. Do zobaczenia w następnej

6:49lekcji.