Visual Studio Code: Jak tworzyć snippety

1.42+

0:00W tej i w kolejnej lekcji pokażę ci jak konfigurować snippety

0:04no i snippety to są takie po prostu skrawki kodu które możemy rozwinąć

0:09jakimś skrótem i snippetów jest sporo w takim edytorze jak vs code

0:13już jakichś domyślnych jak zaczynamy cokolwiek wpisywać na przykład console

0:17to zauważ że już tutaj mi coś podpowiada okej to sobie

0:22wziął vs code tutaj z tych lokalnych zmiennych ale różne tutaj

0:26się pojawiają z których możemy skorzystać teraz możemy skonfigurować własne

0:30snippety ja na przykład przez bardzo wiele lat przyzwyczaiłem

0:34się i tak też robię to dzisiaj że console.log zapisuje jako cl

0:38i zauważ że tutaj mam różne snippety które już mi podpowiada

0:43vs code związany na przykład językiem javascript ale nie ma czegoś takiego jak

0:47console.log aby to krótko zapisać dlatego pokażę ci jak to skonfigurować

0:51dla języka javascript oczywiście command palette control shift p piszemy

0:55sobie snippet i wybierzemy configure user snippets i teraz

0:59musimy wybrać język dla jakiego chcemy je skonfigurować zamiast global tutaj

1:04wybiorę javascript i teraz jakie

1:08to ma znaczenie otóż w vs code są różne języki część z nich jest predefiniowana

1:12cześć może być zainstalowana wraz z jakimś dodatkiem na przykład jeśli zainstalujesz

1:16dodatek na przykład dla frameworka laravel to może być

1:20tak że będzie wgrany nowy język taki jak blade dla szablonów i tak dalej

1:25i teraz możemy snippety ustawić w ten sposób aby tylko w plikach javascriptowych

1:29na przykład były one dostępne tu jest pokazane jak to powinno wyglądać jest

1:33taki przykład więc my sobie tutaj będziemy chcieli zrobić

1:37swój własny na podobnej zasadzie i będę chciał sobie zrobić właśnie ten console.log

1:41więc stworzymy tutaj taki oto obiekt chociaż

1:46najpierw musimy nadać mu nazwę napiszemy print to

1:51console chociaż w zasadzie z tego co widzę to tutaj dokładnie taki już jest

1:55więc nawet nie musimy robić swojego od nowa tylko ten co tutaj jest to odkomentujemy

1:59nie zwróciłem od razu uwagi że jest

2:03on identyczny jak ten który chcę zrobić więc

2:10tylko powiem ci na jakiej zasadzie to działa czyli najpierw

2:14mamy nazwę a potem mamy prefix i tenże prefix to jest to co będziemy wpisywać

2:18a więc skrót ja chcę żeby to było cl body to jest taka

2:22tablica gdzie w każdym elemencie tej tablicy mamy jakby jedną

2:26linijkę czyli chcemy zrobić console.log jak chcę żeby tutaj były takie

2:31cudzysłowy bo z takich korzystam na co dzień chociaż w zasadzie nawet bez cudzysłowu

2:35bo mogę tutaj po prostu jakąś zmienną wyrzucać czyli to jest to co zostanie rozwinięte

2:39po wpisaniu przez nas cl i naciśnięciu tabulatora więc coś

2:43takiego i mamy tutaj tak zwane stopy czyli dolar 1 test pierwszy stop a więc po rozwinięciu

2:47w tym miejscu będzie znajdował się kursor po prostu potem jak wciśniemy tab

2:52to nam ten kursor przeskoczy do kolejnego stopu mi ten kolejny stop tutaj nie

2:56jest potrzebny okej i możemy to zapisać i teraz jeżeli

3:00sobie przejdziemy do plugins czyli tutaj to jak wpiszę cl

3:04zauważ że już na samej górze mamy ten opis który podaliśmy czyli od output

3:09mogę wcisnąć tab i console.log nam się pojawił i w tym miejscu już mogę

3:13wpisać cokolwiek bym tylko chciał więc tak możemy tworzyć snippety

3:17i one będą dostępne w tym przypadku tylko w języku javascript gdybyś chciał

3:21dodać kolejne to tutaj należy postawić przecinek i kolejne dodawać dokładnie w tym

3:25pliku jsonowym te snippety co ciekawe będą też zsynchronizowane

3:29z dodatkiem sync który ci już w tym kursie przedstawiałem więc

3:33będziesz mógł z nich korzystać na innych urządzeniach pokażę ci może jak

3:37dodać jeszcze jeden snippet z którego często korzystam a jest to prevent

3:41default więc ja sobie go nazwę tak czyli

3:47chciałbym taką funkcję móc sobie wstawiać często robimy to funkcje

3:51obsługi zdarzeń w języku javascript więc ja taki snippet też mam napiszemy

3:55prefix u mnie jest to pd jak prevent default

4:00body czyli

4:04można powiedzieć że ciało tego snippeta to jest po prostu e prevent

4:08default tutaj żadnych tab stopów nie musimy mieć bo nic

4:12nie będziemy wstawiać no i podamy sobie jeszcze description description

4:22ustawię taki sam bo to jest to co mi się tam pojawia więc ja będę wiedział o co chodzi i

4:26teraz jeżeli wrócimy sobie do plugins nacisnąłem command pp w ten sposób szybko

4:30między dwoma plikami może przeskakiwać to jakbym miał jakąś funkcję obsługi zdarzeń właśnie

4:35to mógłbym w niej napisać pd i to jest event prevent default więc

4:39tak te snippety można tworzyć pokażę ci jeszcze jeden przykład jak stworzyć globalny snippet na

4:43przykład gdybym miał nowy plik i chciałbym żeby był to plik php to chciałbym móc żeby coś takiego

4:48było wstawione chciałbym móc wpisać php rozwinąć tabem

4:52i wstawić coś takiego więc musimy stworzyć snippet który będzie niezależny

4:56od języka dlatego że jak stworzę nowy plik to on tutaj nie ma ustawionego na

5:00razie żadnego języka w dolnym rogu tutaj można zobaczyć że jest to plain text więc

5:05ja chcę to ustawić tak aby działało w każdym pliku naciśniemy

5:09zatem command shift p i configure user snippets i wpiszemy tutaj global

5:13new global snippets file możemy to nazwać po prostu global okej

5:18i wstawimy sobie tutaj coś takiego

5:22jak php opening tag i

5:29prefix czyli przedrostek tak jak wspomniałem chciałbym żeby to było php body

5:35czyli to wstawimy to będzie

5:39otwierający znacznik php następnie chciałbym mieć jedną pustą linijkę

5:43więc jeżeli sobie to tak sformatujesz to będzie to dla ciebie bardziej czytelne że zobacz

5:48że to jest po prostu linijka po linijce czyli chcę pustą nową linię

5:52i następnie chciałbym mieć dolar 1 czyli tutaj zacząć coś wpisywać i dodamy

5:56sobie jeszcze description i będzie

6:01to to samo co u góry czyli php opening tag okej

6:05i zapiszę i teraz jeżeli przejdziemy do pliku untitled jeżeli wpiszę samo php i

6:09tab zauważ że dokładnie tak to zadziałało mamy kolejną linijkę i tutaj już mogę

6:13pisać na przykład stworzyć jakąś swoją klasę i jak ten plik zapiszę z rozszerzeniem

6:17php to vs code wtedy wyłapie że jest to plik php lub mogę zmienić jego

6:21language za pomocą command palette wpisując language mode i wybierając tutaj php

6:26od razu wtedy wskakuje mi kolorowanie składni i tak dalej i

6:30jak zatem widzisz tworzenie snippetów jest bardzo proste możesz sobie stworzyć również

6:34snippety na przykład dla css scss czyli jest to sass i

6:38tak dalej natomiast w kolejnej lekcji pokażę ci jeszcze jeden fajny dodatek który pozwoli

6:42nam tworzyć je w prostszy sposób