Visual Studio Code: Komendy dla Emmet

1.42+

0:00Chciałbym ci pokazać jeszcze kilka rzeczy związanych z emmetem które mogą

0:04być bardzo przydatne pierwszą z nich jest coś takiego

0:08że jak jesteśmy w jakimś kodzie gdzie będziemy mieli bardzo wiele zagnieżdżonych elementów tutaj

0:12tego nie ma bo chciałbym żeby to było bardziej czytelne i powiedzmy chcielibyśmy zaznaczyć

0:16wszystko wewnątrz takiego diva wyobraź sobie że on jest tak duży tutaj jest tyle elementów

0:20że w ogóle nie widzimy ich całych na ekranie to możemy będąc na poziomie

0:25takiego diva albo gdzieś wewnątrz tego tagu wszystko jedno z command palette

0:29wybrać coś takiego jak balance mamy and balance inward

0:33i zostanie zaznaczone wszystko co jest wewnątrz takiego elementu

0:37dzięki temu będziemy widzieli gdzie on się zaczyna i kończy również będziemy mogli

0:41to na przykład usunąć mamy również odwrotność czyli balance outward jeżeli

0:45byśmy byli gdzieś tutaj balance outward to zostanie

0:49zaznaczone wszystko do góry czyli można powiedzieć że wszystko w tym

0:53rodzicu wszystko będziemy mogli wtedy usunąć oczywiście każdą z tych rzeczy będziemy

0:58mogli w keyboard shortcuts ustawić sobie dla jakiegoś

1:02skrótu więc jeżeli coś będzie dla ciebie szczególnie przydatne ustaw to sobie jako skrót

1:06klawiaturowy inną z rzeczy która jest super przydatna to

1:10jest fakt że mamy taką opcję kiedy chcielibyśmy powiedzmy

1:15tego diva zawrzeć w jakimś innym elemencie normalnie musiałbym zrobić tak na przykład jakiś

1:19container wyciąć tego diva któryś się tutaj stworzył i wstawić go

1:23w to miejsce jak zapisze jest okej ale zauważ że też

1:27nie wygląda to dobrze i przy okazji chciałbym ci pokazać pewien trik jeśli przejdziemy do ustawień

1:31wybierzemy format on save i mamy tutaj

1:35takie oto ustawienie wymienimy je na true bo pokazywałem ci wcześniej że

1:39moglibyśmy tutaj zrobić format document ale teraz wystarczy że zapiszemy

1:43dokument będzie formatowany natomiast ważna uwaga formatowane będą również

1:47inne dokumenty jak na przykład javascript czyli inne typy plików ale

1:52okej usuńmy sobie ten element bo widziałeś że dużo czasu mi zajęło żeby w ogóle go

1:56tutaj wstawić chciałbym to wszystko zawrzeć w takim divie więc będąc

2:00super gdziekolwiek na poziomie tego diva może to być tutaj może to być wewnątrz

2:04tagu nie muszę nic zaznaczać wybierzemy sobie command palette i wpiszemy wrap

2:09i mamy coś takiego jak wrap with abbreviation lub wrap

2:13individual lines to każdą linię wtedy nam zamieni i oplecie

2:17natomiast ja chcę wybrać tą opcję i tutaj mogę wpisać właśnie taką skróconą

2:22skrócony zapis emmeta czyli jeżeli wiem że chce to zawrzeć

2:26na przykład w section container zauważ że od razu nawet mam podgląd

2:30to wpisuje sobie coś takiego wciskam enter i wszystko zostało ujęte

2:34właśnie w takim elemencie więc jest to bardzo bardzo przydatne następnie

2:38mogę stwierdzić że w sumie nie chcę żeby to było section tylko żeby to był div no więc mógłbym

2:42to zaznaczyć pamiętasz że command albo control d mógłbym zaznaczyć kolejne

2:47wystąpienie i zmienić to na div w tym przypadku byłoby okej ale co jeżeli

2:51gdzieś po drodze znowu mam wystąpienie section musiałbym je omijać tym

2:55trikiem który ci pokazywałem czyli command d i k i tak dalej a będąc tutaj

2:59możemy po prostu z użyciem emmeta wpisać sobie emmet

3:04tag i zrobimy coś takiego jak update tag i po prostu

3:08podamy tutaj nowy tag jak na przykład div zauważ że emmet zmienił

3:13nam i otwierający i zamykający tag i jeśli chodzi o emmeta

3:17to jest chyba jeszcze więcej opcji gdybyś sobie wyszukał zauważ że jest ich całkiem sporo

3:21więc polecam ci z nimi poeksperymentować

3:25i te które uznasz za szczególnie przydatne w których chciałbyś korzystać

3:29często możesz przypisać do skrótów klawiaturowych chociaż w moim przypadku ja

3:33jestem w stanie szybko sobie to wszystko wpisać czyli emmet i na

3:37przykład wrap samo wrap nawet wystarczy i też

3:41można to szybko wykonać bez dodatkowego skrótu klawiaturowego