Visual Studio Code: Podstawy Emmeta

1.42+

0:00W tym rozdziale pokażę ci jak wydajnie pracować z kodem

0:04html i css w edytorze vs code który jest do tego bardzo

0:08dobrze przystosowany przejdziemy sobie na przykład do pliku index html i

0:13powiedzmy że chciałbym tutaj dodać gdzieś w body jakiś element

0:17div po pierwsze nie podoba mi się tutaj formatowanie bo mamy tutaj jak widzisz

0:21u dołu dwie spacje więc możemy to zmienić zmienimy to na

0:254 okej i teraz jeszcze możemy w command

0:29palette wybrać format i znajdziemy coś takiego jak format document

0:34i zauważ że nam to wszystko przeformatuje właśnie zgodnie z tym co ustawiliśmy

0:38więc fajna opcja warto o tym wiedzieć i teraz chciałbym sobie tutaj dodać jakiegoś

0:42diva oczywiście czasy gdy pisaliśmy to w ten sposób div class i tak dalej

0:47mam nadzieję że minęły mam nadzieję że nikt tego nie robi w ten sposób ale

0:51jeżeli to robisz w ten sposób to chciałbym ci pokazać w tej i w kilku kolejnych lekcjach

0:55jak można to zrobić wydajniej mamy zainstalowane już od razu razem

0:59z edytorem vs code coś takiego jak emmet który pozwala nam w taki

1:04css-owy sposób rozwijać selektory czyli wiemy że w css gdybym chciał stworzyć

1:08diva z klasą na przykład cls 1 to dokładnie

1:12tak bym go stargetował gdybym chciał w css powiedzieć że do takiego

1:16diva chcę przypisać klasę no i tutaj możemy zrobić to samo czyli robię

1:20sobie coś takiego i naciskam tab i to powinno zostać rozwinięte ale nie

1:24jest bo najpierw musimy przejść do ustawień i tutaj sobie wyszukać coś

1:28takiego jak tab expansion i mamy coś takiego jak emmet

1:33trigger expansion on tab zmienimy to na wartość true i

1:37teraz nam to już powinno działać zauważ pisze coś takiego jak w css naciskam

1:41tab i od razu nam taki div został utworzony w środku mamy kursor mogę

1:45kontynuować tworzenie kodu dalej to jest super wygodne i

1:50jeżeli chodzi o takie podstawy emmetta no właśnie tutaj piszemy takie selektory

1:54jak byśmy to robili w css czyli gdybym chciał jeszcze tutaj dodać na przykład

1:58id id 1 to zrobię to w ten sposób i

2:02zostanie to odpowiednio rozwinięte gdybym chciał sobie dodać jakiś

2:06atrybut na przykład title równa się i tutaj będzie example

2:10muszę przeskoczyć na koniec linii oczywiście rozwinąć to i zauważ

2:14że wszystko zostanie poprawnie dodane co ciekawe możemy

2:18również tutaj zagnieżdżać sobie kolejne elementy czyli

2:22gdybym chciał stworzyć takiego diva od wewnątrz jakiś paragraf to mogę to zrobić właśnie

2:26w taki sposób i tak to będzie wyglądać jeżeli na tym samym paragrafie

2:31gdzie na tym samym poziomie gdzie jest paragraf chciałbym dodać jeszcze powiedzmy span to można

2:35zrobić w ten sposób i rozwinąć i tak to będzie wyglądać

2:39więc jest to bardzo proste i intuicyjne co ważne emmet też ma

2:43pewne domyślne ustawienia czyli jeżeli wpiszę samą klasę na przykład cls 1

2:47i nie podałem że jest to div to emmet założy że był to div natomiast

2:51gdybyśmy tworzyli na przykład ul w ten sposób wystarczy nawet sam tak napisać

2:56zauważ nie musimy żadnych klas podawać to jeżeli w środku będę chciał utworzyć

3:00cokolwiek z klasą item to emmet powinien

3:05wiedzieć żeby tutaj utworzyć li okej nie zrobił tego ale gdybyśmy

3:09to zrobili tak ul item ok to

3:13zauważ że teraz emmet już wiedział że chodzi o li czyli jeżeli mam wcześniej utworzone ul

3:17to nie ale jeżeli zrobimy to w ten sposób to już owszem i co ciekawe

3:21możemy tutaj zrobić razy na przykład cztery żeby utworzyć cztery takie elementy

3:25tak więc tak można pracować z emmetem jeżeli jeszcze tego

3:29nie robiłeś to polecam zapoznać ci się z emmetem jest to bardzo przydatne

3:33narzędzie i jak widzisz nie musimy nic doinstalować do vs code aby to działało natomiast

3:38to jest tylko html a teraz chciałem ci pokazać że jak byśmy przeszli do

3:42pliku css i tutaj wyszukiwarce command p widzisz

3:46że mogę wyszukiwać też po samym rozszerzeniu i tak dalej przejdźmy sobie

3:50do main css to jak tutaj będziemy w emmecie czy

3:54w tym pliku to emmet też działa i on wie że jesteśmy w pliku css

3:58i ja korzystam z emmeta od tak wielu lat że dla mnie to jest oczywiste żeby

4:04nie pisać wszystkich tych właściwości natomiast jeżeli tobie to się wyda dziwne to

4:09musisz po prostu poeksperymentować ja gdybym chciał zrobić font size to bym napisał

4:13fz na przykład 10 nacisnąłbym tab i

4:17wiedziałbym że to będzie 10 pikseli gdybym chciał 10 remów

4:21to zrobiłbym to w ten sposób czyli to są rzeczy których trzeba się nauczyć ale one są tak intuicyjne

4:25że można się wręcz domyślić co jak działa gdybym chciał overflow

4:29hidden to napisałbym ov zauważ że już mi twoje podpowiada

4:33emmet abbreviation i domyślnie to będzie hidden ale mogę też napisać

4:37ovh wtedy to będzie hidden jeżeli chciałbym overflow auto zrobiłbym

4:42ova i rozwinął na tabie tak więc to jest bardzo wygodne nie musimy

4:46tutaj wszystkiego jak widzisz pisać czyli na przykład color w ten sposób

4:50jeżeli chciałbym width 100 pikseli zrobię to w ten

4:54sposób i świetne jest w vs code że od razu mi podpowiada do czego to zostanie rozwinięte

4:58gdybym chciał sto procent to musimy dać tutaj p gdybym chciał

5:03100 procent mogę też zrobić to w ten sposób mogę zrobić em

5:07i tak dalej ale domyślne są piksele a jak dodamy p to są to procenty

5:11możemy również te procenty wpisać ten sposób więc na przykład width 100 procent height

5:16100 procent i bardzo szybko można tutaj tworzyć sobie taki kod background

5:20color to jest bgc zawsze domyślnie nam wstawia biały ale od razu go możemy

5:24zmienić na jakiś inny i tak dalej zauważ że vs code też domyślnie nie

5:29musimy nic instalować pokazuje nam podgląd takiego koloru razem

5:33z emmetem mamy jeszcze jeden ciekawy snippet który chciałbym ci pokazać i gdybym command n

5:37utworzył nowy plik i ustawił mu language od razu na

5:41html to możemy wpisać html dwukropek 5 i jak widzisz jest

5:45emmet abbreviation naciskam tab i mamy gotowy dokument w którym za

5:50pomocą tab mogę przeskakiwać do kolejnych tab stopów i na przykład zmienić sobie

5:54tutaj tytuł na inny przeskoczyć do body i zacząć tworzenie na

5:58przykład takiego oto dokumentu więc to są podstawy pracy z emmetem jak

6:02widzisz emmet działa zarówno w css jak i w htmlu i

6:07warto jest z niego korzystać bo bardzo bardzo przyspiesza nam pracę