Visual Studio Code: Formatowanie kodu z Prettier

1.42+

0:00W tym rozdziale zajmiemy się tym jak wygodniej i wydajniej pracować z

0:04językiem javascript w edytorze vs code i mam dla ciebie dobrą wiadomość otóż

0:08ten edytor jest wręcz stworzony do pracy z językiem javascript czyli w zasadzie

0:12bez instalacji żadnych dodatkowych rozszerzeń możemy wygodnie

0:16pracować z językiem javascript będziemy mieli podpowiedzi auto completion czy przy

0:20imporcie czy przy korzystaniu z jakichś metod i tak dalej natomiast w tej

0:24lekcji chciałbym się skupić na czymś innym mianowicie na formatowaniu kodu przejdźmy

0:29sobie na przykład do pliku plugins i zauważ że jak tutaj bym miał jakieś

0:33nie do końca dobre formatowanie i zapiszę ten plik to zostanie on poprawnie

0:37przeformatowany natomiast to miasto wynika z tego że w ustawieniach ustawiliśmy

0:42coś takiego jak format on save tutaj jest false ale jak na to najadę

0:46to po prawej stronie widzimy że jest to ustawione na true więc to

0:50wynika właśnie z tego że vs code ma wbudowane taki formater i to może być w porządku natomiast

0:55chciałbym w tej lekcji pokazać ci plikiem a prettier a prettier jest to narzędzie które

0:59pozwala na nie tylko przeformatować kod ale też zmienić w

1:03nim pewne rzeczy takie jak na przykład apostrofy które są tutaj możemy powiedzieć

1:07prettierowi że my w naszym projekcie korzystamy z cudzysłowów i wtedy kiedy zapiszemy

1:11plik to prettier zamieni wszystkie apostrofy na cudzysłowy przeformatuje

1:15nam to inaczej i tak dalej z tym że prettier mówi się z angielskiego że jest

1:19opinionated nie wiem czy jest dobre słowo po polsku aby to przetłumaczyć

1:23chodzi o to że pewne rzeczy nam narzuca i nie wszystko da się tam ustawić i

1:28jest to z jednej strony dobre dlatego że będzie mieli spójne formatowanie

1:32plików przy zapisywaniu z innymi członkami na przykład naszego zespołu

1:36także pewne rzeczy takie jak apostrofy czy cudzysłowy można ustawić jest

1:40jeszcze kilka innych rzeczy a pewne rzeczy są narzucone natomiast ja odkąd korzystam

1:44z prettiera nie wyobrażam sobie pracy bez tego narzędzia dlatego zainstalujmy sobie

1:49ten dodatek wyszukując prettier po prostu w ten sposób przejdziemy

1:54tutaj klikniemy install i zainstalujemy sobie prettier i od razu ważna rzecz

1:59musimy ustawić rzeczy które są tutaj podane w naszych ustawieniach bo jak widziałeś

2:03vs code potrafi nam przeformatowywać na przykład plik javascript

2:07ale chcemy teraz ustawić że głównym formaterem ma być prettier on jest nie tylko

2:11dla języka javascript ale także na przykład dla css'a więc

2:15te ustawienia będziemy chcieli skopiować ale już zdążyłem się zorientować że stąd nie

2:20za bardzo da się to skopiować dlatego klikniemy tutaj na prettier code

2:24formatter otworzy nam się to w przeglądarce i stąd skopiujemy natomiast nie całość

2:28tylko te dwa klucze przejdziemy sobie do ustawień postawię

2:33tutaj przecinek i wkleję te dwa ustawienia i zapiszę okej

2:38teraz jak wrócimy do pliku plugins to zobaczysz co się stanie jak zapiszę

2:42dużo się stało prawda po pierwsze tutaj mamy

2:46już cudzysłowy a nie apostrofy po drugie to wszystko zostało zapisane każde

2:51w nowej linii i nie każdemu może to się podobać ale to jest to o czym wspomniałem że prettier

2:55jest opinionated czyli pewne rzeczy nam narzuca ale dzięki temu wszyscy w naszym

2:59zespole będą mieli dokładnie tak samo wyglądające pliki no i oczywiście jeżeli

3:03coś tutaj poknocę będzie to brzydko wyglądać to tak samo jak wcześniej zostanie odpowiednio

3:08zapisane ale jeśli tu bym dodał taką linię ona fajnie zostanie usunięta i

3:12będzie to wszystko ładnie czysto wyglądać teraz prettiera można

3:16do pewnego stopnia skonfigurować i można to zrobić w ustawieniach vs code

3:20ale warto wiedzieć że generalnie robi się to per projekt czyli jak tutaj mamy

3:24otwarty jeden projekt to powinniśmy utworzyć plik kropka prettier rc

3:28to jest jedna możliwość można też stworzyć plik z rozszerzeniem js

3:33to na stronie prettiera można znaleźć i w tym pliku podajemy konfigurację natomiast

3:37taką zapasową dodatkową konfiguracją jest konfiguracja vs code którą

3:42możemy tutaj ustawić i jeżeli prettier nie znajdzie pliku z konfiguracją

3:46dla danego projektu to wtedy skorzysta z konfiguracji która znajduje się tutaj wprost

3:51w ustawieniach edytora więc chciałbym tutaj wpisać na przykład prettier i

3:56coś takiego jak trailing comma i ustalimy sobie to na es5

4:00i teraz zobacz co się stanie tutaj po ostatnim elemencie tablicy

4:05nie ma przecinka jeżeli to zapisze to

4:09powinien się tutaj pojawić przecinek i teraz tak się nie stało z pewnego powodu dlatego

4:14że prettier może być skonfigurowany między innymi w pliku editor config i tak

4:18długo jak ten plik tutaj jest prettier uznaje że znajdzie tam

4:22również ustawienia dla siebie i z tego powodu nie bierze pod uwagę ustawień które

4:26znajdują się tutaj więc to tak jak wspomniałem są tylko takie zapasowe ustawienia na

4:30wypadek gdybyśmy jakiś plik javascriptowy sobie otworzyli i go

4:35na przykład zapisali żeby był przeformatowany natomiast mam ten plik editorconfig nie jest potrzebny

4:39ja ci o nim nie wspominałem ale jest to pewnego rodzaju standard który

4:43pozwala nam w takim pliku zdefiniować ile na przykład ma być indent size czy

4:48mamy dodawać tą linię nową linię którą ci pokazałem na końcu pliku

4:52i tak dalej i są różne edytory kodu które wspierają ten plik my

4:57byśmy musieli do vs code doinstalować sobie dodatek do editorconfig możesz

5:01to zrobić on wtedy będzie respektował takie pliki więc jak na przykład pobierzesz czyjś

5:05kod z repozytorium na githubie i tam będzie editorconfig to będziesz miał takie

5:09same ustawienia jak ten ktoś ja natomiast ten plik usunę bo on nam teraz przeszkadza

5:13i teraz jeżeli zapiszę zauważ że przecinek

5:17został tutaj dodany bo prettier już nie znalazł żadnego pliku w którym mogłaby

5:21być jego konfiguracja i przez to wziął konfigurację stąd teraz

5:26po co tutaj dodawać taki przecinek od es5 od tego standardu

5:30który jest już od bardzo dawna wspierany w przeglądarkach nie mówimy o najnowszym standardzie

5:34ale o tym trochę starszym można stawiać przecinek po którym nie ma

5:38już elementu tablicy i z punktu widzenia na przykład kontroli wersji takie

5:42jak git jeżeli dodajemy takie przecinki dodajemy kolejne elementy dużo

5:46ładniej i dużo lepiej to wygląda potem w divie kiedy porównujemy różne pliki więc

5:51generalnie jest to dobrą praktyką aby dodawać przecinek na końcu tablicy i jak

5:55widzisz prettier zrobi to za nas gdybyśmy tutaj mieli apostrofy zapisuje

5:59zostało to zamienione w ten sposób i został dodany przecinek tu możemy sobie jeszcze ustawić

6:04parę rzeczy ale zaraz pokażę ci jak je ustawić w pliku konfiguracyjnym ja

6:08na przykład mam ustawione jeszcze tab width prettier tab width

6:13na cztery czyli cztery spacje to będzie jeden tabulator zauważ

6:17że tutaj nie było to ustawione i przez to mamy dwie i też tutaj u dołu gdzieś

6:22to znajdziemy spaces 2 jeżeli to przestawimy w ten sposób i zapiszę

6:26wrócimy tutaj i zapiszę ten plik od razu zostało to przeformatowane

6:30na cztery więc dzięki temu wszystkie pliki będziemy

6:34mieli wspójne następnie to co ja jeszcze mam ustawione to jest print width

6:39czyli

6:43ile znaków może być w linii zanim ona zostanie przez prettiera złamana

6:47dobrą praktyką ją ustawienie tego na około 100 czyli jak linia nie będzie dłuższa

6:51z kodem niż sto to prettier ją po prostu złamie tutaj nic się nie zmieni

6:55natomiast takie ustawienie warto również mieć teraz jeżeli przyjdziemy

6:59do html zobaczmy czy coś się zmieni jak zapisze też się zmieniło bo okazuje

7:04się że prettier też formatuje html ja tego nie lubię wolę ten domyślny

7:08formatter który jest jest w vs code dlatego pokażę ci że możemy wyłączyć prettier

7:12dla języka html i zrobimy to w ten sposób prettier

7:18disable languages i tutaj musimy podać nazwy tych języków

7:22więc na przykład jest to html jeżeli teraz tutaj wrócę i zapiszę

7:26to jak widzisz prettier już ten plik zignorował także tutaj naprawdę można wszystko

7:30sobie poustawiać okej ale te ustawienia traktujemy tylko jako tak zwany

7:34fallback gdybyśmy nie mieli pliku konfiguracyjnego teraz natomiast za pomocą

7:38advanced new file utworzymy sobie w głównym katalogu plik prettier

7:43rc w ten sposób okej

7:48nie taka nazwa więc skorzystajmy z rename i nazwiemy go poprawnie prettier rc

7:55i od razu został on poprawnie pokolorowany też przez te ikonki które zainstalowaliśmy

7:59na początku tego kursu super i tutaj będziemy mogli wstawić sobie te ustawienia

8:03w ogóle to przejdźmy może na stronę prettiera na moment i

8:07tutaj znajdziemy ustawienia które możemy przypisać przede wszystkim jakie

8:12są pliki konfiguracyjne możemy mieć klucz w pliku package json jeżeli byśmy taki

8:16mieli i tamte ustawienia możemy mieć plik taki jak ja utworzyłem prettier rc

8:20i on może być i json'owy i w formacie yaml możemy

8:25mieć plik prettier rc js i toml i tak dalej więc

8:29json'owo możemy to zapisać i w zasadzie zróbmy coś takiego

8:33w tym pliku trailing comma es5 to co już mieliśmy to

8:38sobie usuniemy i single quote damy false czyli nie chcemy pojedynczych

8:42apostrofów tylko właśnie takie jak przed momentem czyli

8:46podwójne tak jak nam to tutaj formatował jeżeli teraz zapisze nic się nie zmienia ale zauważ

8:50że jeżeli tu bym zmienił teraz na 2 zapisał ten plik to ten plik

8:54jest teraz brany pod uwagę a nie te ustawienia które mieliśmy tutaj pokażę

8:59ci jeszcze co prettier może zrobić dla nas nie tylko tak to przeformatować ale

9:03dużo więcej rzeczy zrobić gdybyśmy na przykład mieli jakąś funkcję powiedzmy skorzystali

9:07byśmy z fetch z takiej funkcji przy okazji widzisz że vs code

9:11nam już podpowiada jak z niej korzystać wie o co nam tak naprawdę chodzi powiedzmy

9:15że podamy tutaj jakiś adres url w zasadzie możemy

9:20skorzystać z dodatku faker który wcześniej zainstalowaliśmy i znaleźć sobie coś

9:24takiego jak url powinno nam znaleźć internet i

9:30url wkleimy sobie jakiś fejkowy url następnie then

9:34powiedzmy że tutaj jest jakieś data i

9:38chcemy zwrócić data i tutaj cokolwiek na

9:42przykład res w momencie jak ja to zapisze co ciekawe nawet nie muszę średnika dodawać

9:46na końcu zapisuję średnik został dodany i prettier nam to sformatował

9:51zostawiając to w taki sposób ale gdybym tutaj dodał kolejne then i powiedzmy tu

9:55będzie res i byśmy zrobili console.log res zapiszę

9:59zauważ jak prettier nam to już ładnie połamał do tego trzeba się przyzwyczaić

10:03że nie mamy na to wpływu ale zapewniam cię że przestajemy w ogóle o tym myśleć

10:08i zapisujemy plik i prettier wykonuje swoją pracę i co ważne jeżeli

10:13z tym projektem udostępnimy ten plik prettier rc będzie on w repozytorium ktoś

10:17kto korzysta z naszego projektu również będzie miał takie samo formatowanie pod warunkiem oczywiście

10:21że ma zainstalowany prettier na koniec jeszcze taka uwaga że

10:26prettier jest razem z tym dodatkiem który pobraliśmy zbundle'owany

10:30czyli jest on dostępny ale gdybyśmy tutaj mieli projekt w którym znajduje się plik

10:34package json czyli korzystamy z npm to wtedy możemy zainstalować sobie

10:38prettier lokalnie jako dev dependency i wtedy ten dodatek

10:42będzie z tej wersji prettiera korzystał w zasadzie nie ma tutaj jakiejś

10:46dużej różnicy ale warto o tym wiedzieć