Visual Studio Code: Praca z Vue.js

1.42+

0:00W tej lekcji pokażę ci w jaki sposób możemy skonfigurować sobie workflow

0:04do pracy z frameworkiem vue js i chodzi tutaj i o dodatki do edytora vs code

0:08i o konfigurację prettier oraz eslint i tutaj ważna

0:13uwaga oczywiście podobny workflow można skonfigurować dla dowolnego frameworka

0:17takiego jak na przykład jak na przykład react czy angular ale tego już pokazywał nie będę chciałbym

0:21na początek przejść sobie do terminala tutaj u mnie w systemie i przyszedłem już na pulpit

0:26i będziemy chcieli z użyciem vue cli które możesz sobie wcześniej zainstalować

0:30utworzyć nowy projekt napiszemy vue create i i na przykład nazwiemy

0:34go test tutaj nas vue zapyta czy chcemy zainstalować domyślnie

0:39babel i eslint wybierzemy że tak chociaż pokażę ci jak to później troszeczkę

0:43zmodyfikować już w plikach no i poczekamy chwilę aż wszystko zostanie

0:47zainstalowane udało się wszystko zainstalować po drodze było

0:51parę błędów ale one nie są istotne i teraz gdybyśmy wpisali npm run serve to

0:55będziemy mogli uruchomić taką aplikację w przeglądarce natomiast dla nas nie jest to istotne bardziej

1:01chciałem ci pokazać jak skonfigurować ten workflow vs code więc

1:05będziemy mogli sobie teraz mając tutaj taki folder jak widzisz jak

1:09test będziemy mogli do tego folderu przejść bo ten folder został

1:13utworzony przez vue cli i otworzyć go w edytorze code za pomocą polecenia

1:18code test okej otworzy nam się edytor code

1:22i teraz będę chciał ci pokazać co my tutaj w ogóle mamy mamy babel config

1:26to jest do transpilowania kodu es6 do

1:30starszych wersji nie jest to dla nas na razie istotne natomiast wybraliśmy

1:34eslint a zauważ że tutaj nigdzie tego eslint rc nie widać czyli tego pliku

1:38i jak ja ci wspominałem w lekcji o eslint możemy również konfiguracje

1:42eslinta zapisać sobie tutaj czyli wewnątrz pliku package json

1:46i to właśnie zostało tutaj zrobione teraz gdybyśmy sobie przeszli gdzieś do

1:50aplikacji na przykład do app zauważ że od razu sugeruje nam rozszerzenie

1:55vetur i to jest właśnie to co chciałbym żebyśmy zainstalowali bo domyślnie jak widzisz

1:59nie ma tutaj nawet ładnego kolorowania składni dlatego przejdziemy sobie tutaj

2:03i wyszukamy vetur oczywiście jest sporo rozszerzeń do pracy z vue

2:07ale vetur jest jednym z najpopularniejszych i ono ma w sobie bardzo wiele fajnych funkcji

2:12oprócz oczywiście kolorowania składni jak widzisz również będzie nam działał emmet są

2:16jakieś snippety jest auto completion czyli podpowiadanie pewnych rzeczy

2:20i tak dalej naprawdę świetne rozszerzenie i tuż po instalacji od razu tutaj

2:24składnia zaczęła być poprawnie kolorowana nam natomiast zależy na tym aby tutaj wszystko

2:29było dobrze formatowane no i teraz zobaczmy gdybyśmy mieli tutaj w tej wersji czy

2:33w tej templatce w tej części html'owej jakieś takie brzydkie formatowanie

2:37jak zapisze jak widzisz zostało to poprawnie ładnie przeformatowane zobaczmy

2:42jak jest z walidacją błędów gdybyśmy tutaj na przykład zrobili taki błąd czy

2:46nam się coś pokażę jak widzisz od razu jest tutaj to podświetlane i

2:50gdybyśmy sobie otworzyli ten panel przeszli do problems to zauważ

2:54że vetur nam pokazuje że mamy tutaj jakieś problemy czyli mamy również

2:58walidację jeżeli byśmy sobie zobaczyli tutaj style

3:02i chcielibyśmy w stylach coś również dodać to zauważ że działa tutaj emmet

3:07mogę wpisać to w ten sposób backgroud color zapisać jest okej

3:11gdyby to było źle sformatowane zostanie automatycznie przeformatowanie do odpowiedniej

3:15postaci czyli wydawałoby się że wystarczy jedno rozszerzenie takie jak vetur i już

3:19tutaj wszystko jest okej ale ja chcę ci pokazać jak można pójść dalej i pokażę ci podobny workflow

3:24jak mamy skonfigurowany w eduweb czyli co możemy tutaj zrobić jak korzystać

3:29z configa takiego jak wcześniej pokazywałem na przykład airbnb jak korzystać tutaj

3:33bardziej z eslint i jak to wszystko skonfigurować razem z prettierem żeby

3:37nam to działało wewnątrz vue po pierwsze będziemy potrzebowali zainstalować parę rzeczy

3:41może ten panel sobie do prawej strony przesunę powiększę troszkę i

3:46kilka rzeczy będziemy chcieli zainstalować do package json wpiszemy npm

3:50i minus d żeby zapisać do dev dependencies i zainstalujemy eslint

3:54czyli to co już robiliśmy wcześniej eslint config airbnb

4:00base to jest dokładnie to samo co już robiliśmy

4:04w jednej z poprzednich lekcji razem z airbnb base musimy zainstalować

4:08eslint plugin import zainstalujemy

4:13również eslint plugin prettier czyli

4:17to co też robiliśmy już wcześniej i dla vue doinstalujemy to jest nowość eslint

4:22plugin vue no i na koniec oczywiście sam prettier to

4:26wszystko nam się za moment zainstaluje okej jakieś błędy są ale one znowu

4:30nie są istotne zerknijmy sobie do pliku package json co nam się tutaj zainstalowało i

4:35widzę że jeszcze jedną rzecz pominąłem więc doinstalujmy npm install minus

4:39d i to będzie eslint config prettier to

4:43nie jest nic nowego to już robiliśmy wcześniej okej i teraz skoro tutaj już mamy tą

4:48konfigurację oczywiście ja preferuję ją w pliku eslint rc więc moglibyśmy to stąd

4:52wyciąć i wstawić do takiego pliku ale pokażę ci że również tutaj można z powodzeniem to

4:56skonfigurować i domyślnie vue cli skonfigurował dla nas plugin vue essential

5:01i eslint recommended ja będę chciał żebyśmy sobie to zamienili

5:05natomiast od razu wkleję tutaj wszystkie ustawienia jakie mam ty możesz

5:09je sobie również skopiować na linii czasu zobaczysz q point i skopiuj sobie

5:13również ten kod wkleiłem to wszystko tutaj jeszcze będziemy musieli postawić

5:17przecinek zobacz jak to wygląda mamy eslint config i

5:22tutaj airbnb base jest dokładnie to co już mieliśmy wcześniej potem dodaliśmy

5:26plugin vue recommended i na końcu prettier czyli na razie wygląda to bardzo podobnie

5:30do tego co już robiliśmy wcześniej poniżej jak możesz zobaczyć mamy rules czyli

5:34tu generalnie chodzi o to że airbnb base oraz plugin vue recommended pewne

5:38rzeczy nam narzucają tak jak ci wcześniej pokazywałem i pewne z tych rzeczy to są

5:43takie z którymi ja się nie zgadzam więc po prostu je sobie tutaj wyłączyłem no i niektóre

5:47są specyficzne dla jakichś pluginów instalowaliśmy przed momentem plugin import i

5:51on właśnie ma swoje reguły czy na przykład plugin vue ma swoje reguły no

5:55i w ten sposób jak sobie to skonfigurujemy tutaj jeszcze resolver to chodzi generalnie o to że

5:59jak tutaj robimy na przykład import from i nie podamy

6:03rozszerzenia vue to mówimy tutaj że mają być przeszukiwane wszystkie pliki z

6:08rozszerzeniem i js i vue żebyśmy tego nie musieli podawać ja to zapiszę i

6:12zobaczymy jak nam się tutaj zmieni zobacz że od razu eslint nam mówi

6:16że nie powinniśmy używać rozszerzenia vue więc to jest oczywiście kwestia preferencji

6:20ale jak widzisz to wszystko znajduje się tutaj w tych ustawieniach plus w samym

6:24takim configu oraz airbnb base który nie jest zależny od vue tutaj nie

6:28ma żadnych reguł dotyczących vue więc teraz sobie usunę takie rozszerzenie i

6:33również to będzie poprawnie znalezione zobaczmy co jeszcze tutaj się wydarzy

6:37na przykład i to jest super rzecz szczególnie jeśli pracujesz w zespole jeżeli byśmy

6:41mieli tutaj methods czyli metody zapiszę

6:45i chcielibyśmy sobie dodać na przykład taki hook jak computed czy

6:49w zasadzie mounted to zauważ co mi tutaj powie

6:55eslint że mounted properties should be above methods czyli że powinno

7:00być wyżej i znowu to jest pewnego rodzaju wymuszenie standardów kodowania ale

7:04ono jest dlatego dobre bo wszyscy w zespole będą to robili spójnie i dużo łatwiej się czyta taki plik

7:09kiedy ja wiem że takie hooki jak mounted czy created będą na methods i

7:13co ciekawe jeżeli zapiszę to automatycznie poprzez auto fix on save czyli

7:17w eslint eslint mi to naprawił tego nie zrobił prettier bo prettier tylko

7:21formatuje kod natomiast naprawił to eslint tu jednak

7:25będziemy mieć pewien problem bo mamy w tych regułach jeszcze inne rzeczy na przykład liczbę

7:30atrybutów w jednej linii zobacz tutaj są dwa atrybuty alt i src powiedzmy

7:34że mielibyśmy jeszcze atrybut title w ten sposób i teraz

7:38eslint mi tutaj podpowie że title should be on a new line czyli

7:42jest to reguła vue attributes per line no i chodzi o to żeby

7:46te atrybuty był złamane na nowe linie żeby były bardziej czytelne i znowu eslint potrafi

7:50to naprawić więc jeżeli zapiszę to być może widzisz że on to naprawia ale

7:54to z powrotem wraca poprzez domyślne formatowanie jakiego używa

7:59vetur więc tutaj jest taki konflikt i zapewniam cię że ja czasami godzinami siedziałem

8:03nad tym żeby rozgryźć takie rzeczy teraz pokażę ci jak można je naprawić

8:07jeżeli przejdziemy sobie do ustawień i wyszukamy vetur to tutaj

8:11znajdziemy coś takiego jak vetur czyli to jest ten dodatek co zainstalowaliśmy przed

8:16momentem i default formatter html czyli jaki

8:20jest domyślny formatter dla tej templatki i vetur tutaj używa a

8:25jak możesz zobaczyć pretty html możemy to zmienić na przykład na prettier ale

8:29jeżeli korzystasz z eslint z auto fix to ustaw to na none czyli

8:33powiedz mu żeby tego nie formatował teraz jeszcze nam się tutaj sytuacja

8:37nie naprawi bo prettier tak czy siak sam sobie to jeszcze formatuje ale

8:42jeżeli przejdziemy do miejsca w którym już w tym kursie wykluczaliśmy z prettiera

8:46jakieś języki czyli prettier disabled languages tutaj mieliśmy html dajmy

8:51jeszcze język vue teraz jeżeli zapiszę i tutaj wrócę

8:55zapisuję plik i zauważ że eslint był w stanie ten plik przeformatować

8:59i prettier później już nie próbował go ustawić po swojemu a eslint

9:04przeformatował go zgodnie z regułami jakie mamy tutaj zapisane if plugin vue

9:08recommend i w tych które tutaj ustawiliśmy czyli tutaj moglibyśmy sobie

9:12zmienić ile ma być atrybutów w linii i tak dalej ale to wymusza w zespole

9:16pewne standardy żeby to wyglądało tak samo podobnie gdybym tutaj

9:20dodał na przykład v-if czyli warunkowość na przykład v-if true to będzie

9:25to chciał przenieść na sam początek i będzie tutaj napisane should go before title

9:29naciskam command s żeby zapisać i jest to na samym początku i

9:33zapewniam cię że jeżeli przyzwyczaisz się do takiego workflow do takiej pracy to

9:38nie będziesz sobie wyobrażał życia bez tych narzędzi dzięki temu zawsze

9:42wiemy że v-if będzie na początku inne atrybuty tutaj w 100%

9:46nie ma znaczenia gdybyśmy te dwa zamienili ze sobą to nie będzie problemu

9:50ale jak na przykład dodam jakieś zdarzenia typu click to wiemy że one będą poza

9:55atrybutami nie będą gdzieś w środku i dla nas będzie eslint próbował je

9:59sam zreformatować czyli po prostu naprawić poprzez auto fix

10:03oczywiście tutaj cały czas i chcę ci to pokazać działa ten config

10:07który mamy czyli airbnb base razem z regułami które wykluczyliśmy czyli

10:11gdybym na przykład w mouted chciał powiedzieć cl jak console log to jest snippet

10:17który konfigurowaliśmy dla javascriptu zauważ że on tutaj też działa

10:21bez problemu jeżeli w console log chciałbym zrobić coś takiego jak na przykład

10:25hello i do tego bym chciał skonkatenować this name oczywiście

10:29tutaj name my nie mamy ale gdybym chciał zrobić coś takiego to poprzez config airbnb base

10:34zauważ że eslint mówi nam unexpected string concatenation

10:38czyli że nie powinniśmy używać konkatenacji ale tego nowego zapisu string

10:42template sing i co ciekawe command s żeby zapisać czasami

10:46trzeba to zrobić drugi raz żeby się to tutaj sformatowało okej tutaj zostało to w ten sposób bo

10:51jeszcze pewnie prettier tutaj to tak zostawił ale nie ma to większego znaczenia w

10:55każdym razie zostało to automatycznie zamieniane na taki oto zapis no i oczywiście tutaj będzie prettier

11:01robił swoją robotę razem z eslint czyli tak jak już to

11:05konfigurowaliśmy w jednej z poprzednich lekcji tutaj nam brakuje jeszcze

11:09tylko jednej rzeczy w zasadzie czyli powinniśmy sobie utworzyć plik

11:13prettier rc możemy go utworzyć w głównym katalogu mieliśmy

11:18ten plik w poprzednich lekcjach i mieliśmy tam coś takiego jak tab width

11:22na przykład konfigurację o tym zapomniałem na początku tej

11:26lekcji następnie trailing comma mieliśmy ustawione na es5 i

11:31na przykład single quote mieliśmy ustawione na false jeżeli

11:35teraz to zapiszemy tutaj już powinno być też w porządku i wiemy że prettier

11:39będzie to reformatował a eslint będzie naprawiał zgodnie z regułami które

11:43zdefiniowaliśmy to zatem tyle jeżeli chodzi o pracę z vue tak na prawdę

11:48to rozszerzenie vetur wystarczy ci do tego aby wygodnie pracować z vue wszystko

11:52jest ładnie pokolorowane mamy tutaj eslint który wymusza pewne standardy

11:56kodowania mamy prettier który nam to reformatuje i można z tym wygodnie

12:00pracować na koniec jeszcze ci pokażę tylko jedną rzecz o której ileś tam lekcji

12:04temu wspominaliśmy czyli że mamy coś takiego ja to mam pod command r jak

12:08symbole i zauważ że one również tutaj poprawnie działają w takim

12:13rozszerzeniu vue czy czy w takim pliku vue i możemy sobie przeskakiwać

12:17do pewnych rzeczy więc jeżeli wiem że mam na przykład w funkcję mounted taką

12:21metodę to mogę szybko do niej przeskoczyć ja z tego cały czas korzystam tutaj

12:25jeszcze jeden ciekawy trik dlatego że tych symboli znalazło 14 ale one nie są

12:29jakoś posortowane jeżeli dopiszemy po małpce dwukropek to zauważ że

12:33one wtedy są grupowane mamy jakby classes fields tutaj następnie

12:38methods modules properties i na przykład variables czyli

12:42jest to fajny sposób również w innych plikach to będzie działać grupowane i gdybyśmy

12:46tutaj tak jak mamy app byłby to długi plik chcielibyśmy przejść do tego selektora bezpośrednio

12:51to wchodzę sobie tutaj wpisuję app i zauważ że mi to znalazło naciskamy

12:55enter mogę od razu edytować takie style to zatem tyle mam nadzieję

12:59że jeśli pracujesz z vue to ta wiedza ci się przyda pamiętaj że również możesz

13:03podobnie skonfigurować ten edytor pod react angular czy jakikolwiek inny framework

13:07w którym pracujesz zerknij sobie jakie do tego dodatki mogą być przydatne