Visual Studio Code: Walidacja kodu z ESLint

1.42+

0:00Wiesz już jak działa prettier natomiast w tej lekcji będę chciał ci pokazać

0:04jak skonfigurować es lint jest to świetne narzędzie do lintowania

0:08naszego kodu czyli pokazywania nam błędów a także wymuszania pewnych standardów

0:13kodowania czy programowania i to jest bardzo ważne szczególnie jeżeli pracujemy

0:17w zespole tak jak my na przykład w eduwebie to mamy pewne standardy i

0:21wiemy że jeżeli mamy dany config eslint to u wszystkich te

0:26standardy będą wymuszone teraz ci pokażę jak to zrobić po pierwsze zainstalujemy

0:30sobie dodatek eslint to

0:34będzie ten zauważ że prawie osiem milionów na ten moment pobrań bardzo popularny

0:38i ten dodatek będzie od nas jeszcze wymagał tego

0:42abyśmy zainstalowali sobie w projekcie lokalnie pewne zależności

0:46i teraz tak większość projektów oczywiście jeżeli już z tym pracowałeś

0:51czyli z jakimś trochę bardziej chociaż nowoczesnym frontendem to wiesz że

0:55jest oparty o plik package json o npm

0:59lub na przykład yarn i mamy tam wszystkie zależności do naszego projektu i tak dalej

1:03więc tak dzisiaj robimy front-end i jeżeli z tym jesteś zaznajomiony to

1:07to co pokaże nie powinno być jakąś specjalną magią czyli w tym projekcie powinniśmy mieć

1:11plik package json i dlatego będę chciał go utworzyć wpisując npm

1:16wcześniej musisz mieć node oczywiście w systemie zainstalowany init i

1:20wybierzemy y żeby tutaj na szybko taki plik wygenerować i teraz będziemy

1:24potrzebowali zainstalować sobie eslint więc zróbmy to npm install

1:28minus d żeby zapisać do dev dependencies i wpiszemy eslint

1:33to nam się za sekundę zainstaluje natomiast w międzyczasie

1:37możemy jeszcze sobie zerknąć tutaj na ustawienia bo jest tutaj jedno ważne ustawienie

1:41mianowicie takie będziemy chcieli w momencie zapisywania

1:45pliku podobnie jak prettier nam formatował plik to aby eslint

1:49też nam pewne rzeczy przeformatowywał czy naprawiał te które

1:54może w eslint jest fajne to że może nam pokazać i błędy

1:58składniowe których nie do końca jest w stanie naprawić i na przykład takie błędy

2:02tak jak wspomniałem że nie mamy takiego standardu programowania

2:06czy kodowania standardu w stylu kodu jak sobie ustaliliśmy i niektóre

2:10z tych rzeczy mogą być automatycznie naprawione przez eslint jeżeli dodamy sobie coś takiego

2:15do właśnie konfiguracji natomiast tutaj z jakiegoś

2:19powodu nie da się tego skopiować więc przejdziemy na stronę tego

2:23dodatku i skopiujemy to stąd i wystarczy że byśmy sobie to skopiowali co

2:27jest tutaj przejdziemy do ustawień i w ustawieniach będę chciał sobie to

2:31wkleić w ten sposób zobaczmy command j

2:35czy to nam się wszystko zainstalowało tak jest więc jeżeli teraz sobie przejdziemy

2:40do pliku javascript'owego który mieliśmy tutaj to już nam

2:44eslint powinno działać i zobaczmy co eslint będzie tutaj robić czy nam

2:48w ogóle cokolwiek pokaże zróbmy tutaj gdzieś jakiś błąd na

2:52przykład okej jak widzisz wydaje się że kompletnie

2:57nie działa i teraz dlaczego otóż es lint wymaga jeszcze pliku eslint

3:01rc podobnie jak prettier więc taki plik będziemy chcieli utworzyć

3:05tutaj w głównym katalogu eslint rc i

3:10w momencie jak ten plik się pojawił es lint zaczęło działać i stwierdziło że tutaj w

3:14plugins my mamy jakieś problemy od razu nam to fajnie podświetla na czerwono jak

3:18widziałeś i jeżeli byśmy sobie wcisnęli command shift m żeby przejść do panelu problems

3:23to zobaczymy parsing error czyli tutaj eslint stwierdził

3:27że coś mu nie odpowiada teraz z czego to wynika z tego że eslint

3:31nie wie czym jest ecma script 6 i nie wie co to jest let prawdopodobnie

3:36gdybyśmy to zmienili na var i wszystkie te pozostałe to zaczęło by nam to

3:40działać to nam pokazuje tylko jedno że eslint możemy skonfigurować również

3:44pod stare projekty napisane w ecmascript 5 i gdybyśmy tam przez przypadek użyli czy

3:49z rozpędu użyli jakichś nowych zapisów to eslint da nam o tym znać dlatego

3:53po pierwsze będziemy chcieli tutaj skonfigurować sobie parę rzeczy i wytłumaczę ci na

3:57czym one polegają chociaż na stronie oczywiście eslint znajdziesz również wytłumaczenie

4:02wszystkich opcji ten plik eslint rc to jest taki plik json'owy którym będziemy

4:06chcieli po pierwsze wpisać inv i tutaj podamy taki oto obiekt

4:10i powiemy es6 true to oznacza że wszelkie

4:15globalne takie zmienne które znajdują się w nowej składni es6 jak na przykład

4:19symbol czy nowe tablice które tam są takie jak u int array

4:23i tak to od tej pory eslint jeżeli je zobaczy w kodzie to nie będzie ich

4:27traktował jako coś nowego nie chodzi o nowe zapisy ale o nowe globalne

4:31zmienne kolejną rzeczą którą dodamy będzie browser tutaj

4:35nam to wszystko podpowiada napiszemy true chodzi o to że jak eslint zobaczy gdzieś

4:40że napisaliśmy na przykład window to nie będzie nam mówił że nie zdefiniowaliśmy zmiennej

4:44window tylko będzie wiedział że skoro powiedzieliśmy browser true to wszelkie zmienne

4:48które są globalne i które są dostępne w środowisku przeglądarki są

4:52okej i możemy z nich korzystać więc zauważ że już nam problemy zniknęły tak

4:56naprawdę już jest wszystko w porządku i eslint nam nie narzeka że nie wie co

5:00tutaj się dzieje ale warto dodać jeszcze tutaj odnośnie es6

5:06parser options zauważ parser options i

5:11tutaj możemy wpisać ecma version i podać od razu nam też podpowiada

5:15na przykład najnowszą 2020 to będzie oznaczało że wszelkie

5:20zapisy które tam znajdzie ma traktować jako takie które rozumie

5:24i tu chodzi właśnie już o takiej zapisy jak na przykład funkcje strzałkowe

5:28i tak dalej okej czyli zaczyna nam to działać i teraz jeżeli będą

5:32się pojawiać jakieś błędy to zauważ że od razu w panelu problems nam je pokazuje

5:37eslint je znajduje jeżeli sobie tutaj najedziemy to też nam to

5:41będzie pokazywać okej tu możemy na przykład sobie

5:45kliknąć przeniesie nas do tego miejsca widzę że tutaj również type script czyli

5:49to sprawdzenie domyślnie wbudowane w vs code też nam pokazuje podobne

5:53błędy w każdym razie ważne jest to że my te błędy widzimy jest to wszędzie podświetlane

5:57teraz natomiast będziemy mieli pewien problem i żeby go

6:01pokazać to powiem ci że możemy tutaj ustawić sobie coś takiego jak rules i jak

6:05wspominałem że możemy wymusić pewne standardy kodowania to właśnie o takie

6:09rules chodzi i w kolejnej lekcji pokażę ci jeszcze jak je skonfigurować z

6:13użyciem configa airbnb ale my możemy ręcznie sobie tutaj coś powpisywać

6:18i na przykład moglibyśmy powiedzieć że quotes czyli cudzysłowy chcemy

6:23uzywać tutaj musimy podać tablice w ten sposób czyli

6:27chcemy żeby nie był warning tu można wpisać warning albo error chcemy żeby

6:31nam wyświetlało błąd jeżeli będziemy korzystać z innych cudzysłowów

6:35niż podwójne czyli mówimy że chcemy podwójne i jeżeli

6:40ich nie ma to ma być błąd zauważ co się stanie teraz jeżeli gdzieś

6:44wstawię pojedyncze czyli apostrofy będzie nam to podświetlane czyli prettier

6:48to co robił dla nas to on to po prostu na save zamieniał na podwójne natomiast

6:52eslint nas informuje że mamy niepoprawny kod i jak widzisz tutaj

6:56mamy napisane eslint w nawiasie quotes to znaczy że chodzi o rules

7:01które nazywa się quotes tak to wygląda jeżeli zapisze to

7:05prettier tym razem nam to poprawnie zamienił jeżeli

7:09natomiast byśmy powiedzieli tutaj single że chcemy pojedyncze

7:13to zauważ że ezslint wszędzie nam zaczął narzekać że mamy

7:17podwójne i jeżeli zapiszemy to eslint przez ustawienie które dodaliśmy

7:21do settingsów czyli to na samym dole on próbuje na safe nam to naprawić

7:26ale najpierw eslint naprawia a później prettier to wszystko psuje i to nawet można zauważyć

7:30że to się jednak szybko zmienia dlatego chcielibyśmy teraz wprowadzić

7:34tutaj taką zmianę żeby prettier oraz es lint nie gryzły się wzajemnie

7:38i pokażę ci teraz jak możemy to zrobić będziemy musieli zainstalować

7:42sobie w terminalu parę zależności z użyciem npm czyli

7:46npm install zapisz do dev dependencies i będzie to eslint config prettier

7:53następnie eslint plugin

7:58prettier i samego prettiera

8:02i od tej pory również dodatek prettier który skonfigurowaliśmy w lekcji poprzedniej

8:06będzie korzystał z lokalnej wersji zainstalowanej z npm która będzie się znajdować w katalogu

8:10node modules czyli te rzeczy jak sobie zainstalujemy to będziemy mogli

8:14przejść do pliku eslint rc i tutaj sobie je skonfigurować wstawimy

8:19tutaj coś takiego jak extends czyli

8:23że chcemy naszą konfiguracją rozszerzać inną konfigurację którą

8:28możemy tutaj podać i napiszemy sobie plugin następnie

8:32prettier recommended w ten

8:37oto sposób i teraz jeżeli sobie tutaj zapiszemy to wydaje się że nadal

8:41mamy konflikt rzeczywiście jest to taki konflikt jak przed momentem natomiast unikniemy wielu

8:46innych konfliktów związanych z formatowaniem ten konflikt teraz jest nie do uniknięcia bo my tu

8:50wprost powiedzieliśmy że chcemy single a wiemy że z kolei wprost w

8:54prettier rc czyli w tym pliku możemy go wyszukać

8:58ustawiliśmy że single quotes na false

9:02czyli prettier będzie to wymuszał będzie nam to tutaj zamieniał więc to może

9:06nie jest najlepszy przykład natomiast to jest przykład w jaki sposób możemy

9:10pewne standardy wymuszać jeżeli to wymusimy tak no to oczywiście wymuszamy również na

9:14wszystkich żeby w prettierze sobie to przestawili na pojedyncze ale zapewniam

9:18ci że mnóstwo innych problemów które tutaj mogłoby wynikać z formatowania czy

9:23z naprawiania tych błędów czyli auto fix w eslint zostanie zniwelowane

9:27dzięki temu że tutaj zainstalowaliśmy plugin prettier recommended w

9:32każdym razie to możemy sobie usunąć i

9:36teraz wszystko powinno działać jak należy a w kolejnej lekcji będę chciał

9:40ci pokazać jak możemy wymusić pewne standardy kodowania tak aby

9:44nie musieć tutaj wpisywać wszystkich tych rules i jak możesz to zrobić z

9:49innymi osobami z twojego zespołu my w eduwebie mamy takie standardy kodowania

9:53pewne przyjęte i wiemy że u wszystkich dzięki tym dodatkom

9:57w edytorze i tym configom są one wymuszane jeżeli

10:01natomiast nie będziesz chciał korzystać z takiego configa to to co tutaj pokazałem ci

10:06wystarczy i dzięki temu będziesz miał walidację taką

10:10jak tutaj pokazałam jeżeli będą jakieś błędy to eslint będzie ci dawał o nich znać

10:14ale bez wymuszania jakichś dodatkowych rzeczy oprócz tego co tutaj już

10:19nam oferuje prettier ale to głównie po to żeby nie gryzły się ze sobą te

10:23dwa dodatki