Visual Studio Code: Polecane ustawienia ESLint

1.42+

0:00W tej lekcji pokażę ci config airbnb base który jest

0:04jest bardzo popularny możesz zobaczyć tutaj że ponad 90 tysięcy gwiazdek

0:08na github z którego my również my w eduwebie jako zespoł korzystamy będę

0:12chciał go zainstalować i zaraz ci pokażę jak skonfigurować to musimy sobie skopiować

0:16i w terminalu wpisać npm install zapisać do devdependencies i

0:20to zainstalować natomiast ten config ma jeszcze pewne zależności jest to tutaj napisane

0:25jeżeli byśmy coś takiego skopiowali to nam pokaże jakie jeszcze zależności

0:29musimy sobie zainstalować więc zobaczmy i powinno nam pokazać eslint

0:33plugin import więc po prostu ten plugin jeszcze sobie doinstalujemy w ten sam

0:37sposób npm install i go zainstalujemy i teraz będziemy

0:42musieli przejść do pliku eslint rc i tutaj

0:46gdzie mamy extends które robiliśmy w lekcji poprzedniej na samym początku dodamy

0:50sobie airbnb base jak

0:55dodamy sobie taki config to jest mniej więcej tak jak byśmy tutaj w rules wpisali

0:59dużo różnych zasad te zasady możesz znaleźć oczywiście na stronie

1:03z dokumentacją eslint no i teraz jeżeli sobie przejdziemy do plugins

1:08coś nam się już zaczyna pokazywać no właśnie

1:12jak tutaj to podświetlimy zauważ że zaczyna nam narzekać

1:16zgodnie z tymi regułami które airbnb przyjęło w swoim configu zaczyna nam

1:20eslint narzekać że owszem tutaj mamy poprawny kod tutaj nie ma błędu ale

1:25pewne standardy kodowania nie są zachowane na przykład unexpected unnamed

1:29function czyli że nie powinniśmy tworzyć funkcji anonimowych no i teraz ty

1:33się możesz z tymi standardami zgadzać lub nie natomiast zapewniam cię że po

1:38jakimś czasie kiedy zaczyna się z nich korzystać to widzi się ich zalety a tam

1:42gdzie jesteśmy przekonani że to my mamy rację wolimy coś zrobić inaczej pewne rzeczy można

1:46wyłączyć i teraz chcę ci pokazać jak tutaj widzisz że mamy coś takiego w tym komunikacie

1:51jak eslint func names czyli jeżeli ty uważasz że chcesz mieć w swoim

1:55kodzie takie zapisy na przykład nie zgadzasz się że ta reguła

1:59jest dobra która powinna cię tutaj ostrzegać zauważ że jest to tylko warning

2:03swoją drogą bo jest na żółto a nie to błąd jak poniżej ale jeszcze raz

2:07zerknijmy jest to func names to możesz wtedy nadpisać to w kluczu

2:12rules i możesz powiedzieć func names tutaj nam to

2:16podpowiada i off zapisujemy i automatycznie eslint

2:20przestaje na to narzekać innym sposobem byłoby wpisanie tu ale to tylko

2:24w jednym pliku można tak zrobić to znaczy w innych plikach

2:29nadal taki zapis byłby niepoprawny można wpisać eslint ignore

2:33line czasami chcesz jedną linię tylko zignorować więc można wtedy dodawać

2:37taki oto komentarz zobaczmy co jest niżej tutaj nam na przykład narzeka

2:41na unexpected chain assignment no i widzimy tutaj że

2:45jest to z kolei reguła no multi assign którą też można wyłączyć ale jest

2:49to plik który po prostu pobrałem z internetu razem z html5 boilerplate i

2:53tak naprawdę gdyby ten kod tworzył od zera i zrobiłbym podobny zapis zobaczyłbym

2:58że nie jest to dobra praktyka według tego configa airbnb który wgraliśmy to

3:02po prostu starałbym się tego uniknąć podobnie na przykład tutaj jest zauważ z

3:07takim operatorem minus minus i to jest coś z czym ja się osobiście nie

3:11zgadzam jeżeli chodzi o airbnb oni uważają że powinniśmy napisać

3:15length równa się length minus 1 że to jest poprawny

3:19zapis być może jest on bardziej czytelny i tak dalej ja jednak wolę pisać minus

3:23minus czy plus plus dlatego taką opcję u nas w configu też mamy wyłączoną to jest no

3:27plus plus jak widzisz więc znowu możemy tutaj zrobić no plus

3:32plus i wyłączyć taką regułę no i ja oczywiście takich reguł trochę

3:36z tego configa airbnb sobie powyłączałem jak

3:40widzisz wtedy przestaje nam narzekać i to znika natomiast do innych można się zastosować

3:45no i teraz jeżeli bym ten plik zapisał to dalej mamy te błędy dlatego

3:49że eslint nie potrafi ich automatycznie naprawić ale niektóre błędy potrafi

3:53naprawić poprzez ten auto-fix on save i to właśnie za nas

3:57zrobi i nie będzie wchodził w konflikt z kolei z prettierem

4:02bo to skonfigurowaliśmy w lekcji poprzedniej zobaczmy zatem co może

4:06dla nas zmienić jeszcze eslint automatycznie czyli na

4:10przykład tutaj jeżeli stworzyłbym sobie zmienną poprzez let i nazwałbym ją

4:15number przypisał bym 1 i później

4:19zrobiłbym console.log number to zobacz co nam powie eslint

4:23powie nam że number nigdy nie jest nadpisane więc użyj

4:27const a nie let i to jest bardzo ciekawe natomiast gdybyśmy w dowolnym

4:31momencie gdzieś niżej w kodzie użyli jeszcze raz number i nadpisali to oczywiście

4:36eslint nie będzie narzekał bo gdybyśmy zadeklarowali tą zmienną jako const czyli

4:40jako stałą to nie moglibyśmy jej nadpisać tu jednak trzeba uważać na to że jeżeli

4:44ja zapiszę to zostanie to automatycznie nie przez prittier ale przez eslint zamienione

4:49na const i jeżeli ja sobie po prostu za wcześnie zapisałem a pod spodem miałem

4:54zamiar zmienić tą zmienną no to oczywiście będziemy mieli jakiś błąd tutaj

4:58nam już eslint na etapie pisania tego kodu powie że to jest constant i nie

5:02możemy jej nadpisać natomiast może nam taki błąd się pojawić na

5:06etapie wykonywania tej aplikacji więc warto również na to zwracać uwagę natomiast

5:10jak widzisz bardzo fajne jest ten eslint bo od razu nam tutaj już pokazuje

5:14błędy w panelu problems czyli command shift m również nam pokaże

5:18i dzięki temu możemy te błędy poprawić a także wymuszamy

5:22pewne standardy kodowania z niektórymi możemy się nie zgadzać wtedy najeżdżamy

5:27na coś takiego widzimy nazwę reguły tak jak tutaj no const assign i

5:31możemy ją tutaj po prostu wyłączyć z kolei skonfigurowany

5:35w lekcji poprzedniej plugin prettier recommended sprawia że na

5:40save tutaj i prettier reformatuje to wszystko i również

5:44eslint reformatuje i one starają się sobie nie wchodzić w drogę tak żeby nie było że jeden

5:48nadpiszę i drugi ale oczywiście to też zależy od naszych reguł bo jeżeli tutaj

5:52bym wymusił że mają być single quotes a wiemy że prettier ma ustawione

5:56double quotes no to niestety nie będzie nam to poprawnie działać podsumowując

6:02fajne jest to że jeżeli ktoś w twoim zespole skonfiguruje taki eslint ty

6:06sobie pobierasz taki projekt robisz npm install instalując wszystko i

6:10mając zainstalowane te dodatki w vs code takie jak prettier czy eslint u

6:14ciebie będzie to wszystko walidowane zgodnie ze standardami jakie ktoś tobie narzucił

6:18lub ty możesz komuś takie standardy narzucić i dzięki temu spójnie można pracować w zespole