Visual Studio Code: Przeszukiwanie symboli

1.42+

0:00W tej lekcji pokażę ci jak możemy wewnątrz plików wyszukiwać

0:04tak zwanych symboli i będzie to coś więcej niż wyszukiwanie tak jak za pomocą wyszukiwarki

0:08po prostu tekstu ale tutaj już edytor będzie można powiedzieć wiedział

0:12w jaki sposób podzielić nasz plik i wyekstrahować pewne symbole

0:16przejdźmy do rzeczy będziesz wtedy wiedział o co chodzi utworzyłem sobie plik plugin js

0:21jestto taka prosta klasa w języku javascript i zazwyczaj te pliki oczywiście

0:25są znacznie większe jeżeli byśmy sobie przeszli teraz do command palette

0:29możemy tutaj usunąć tą strzałeczkę i wtedy będziemy mieli tą paletę

0:33do której można przyjść za pomocą command p i wpiszemy tutaj małpkę to

0:38otworzy nam się taki taka przeglądarka symbolów i zauważ

0:42że tutaj od razu klasa plugin została zaznaczona pod

0:46spodem mamy poszczególne metody i to jest super przydatne jeżeli w pliku chcę przejść do

0:50jakiejś metody mam duży plik na przykład w vue js gdzie mam i templatkę i

0:54style i powiedzmy jakieś metody to zamiast scrollować i szukać gdzie jest taka metoda

0:58albo używać wyszukiwarki za pomocą command f to wolę to zrobić

1:02za pomocą właśnie edytora czy tego eksploratora symboli przechodzę

1:07obrazu do metody na przykład say hello i mogę sobie ją podejrzeć czy edytować więc

1:11to jest bardzo wygodne podobnie na przykład w css czyli domyślnie

1:16edytor vs code on jest przygotowany do pracy z językiem javascript html

1:20czy css natomiast będzie można również zainstalować sobie co później pokażę dodatki

1:25dla języka php które również taki eksplorator symboli będą nam oferowały

1:29ale przejdźmy może tutaj do pliku main css i

1:33zauważ że jak tutaj zrobimy to samo czyli wpiszemy sobie małpkę to został

1:37ten plik podzielony na wiele różnych symboli i możemy sobie je wyszukiwać

1:41na przykład gdybym chciał znaleźć klasę invisible została znaleziona mogę

1:45do niej przejść więc ten sposób bardzo łatwo jest nawigować po plikach jeżeli wiesz

1:49na przykład jaką klasę css chcesz zmienić ja natomiast na codzień

1:53ustawiam to sobie na skrócie klawiaturowym który jest wygodniejszy bo domyślnie jest to command shift

1:57o lub na windowsie będzie to prawdopodobnie control shift o ja

2:02sobie to przedstawiam na command r bo możesz tutaj też przejść wpisując

2:06po prostu tą małpkę ale ja sobie to przestawiam więc mogę ci pokazać jak to zrobić

2:10keyboard shortcuts zróbmy to tutaj i

2:14wyszukałem sobie tutaj też wcześniej symbol i wystarczy że zmienimy ten oto skrót

2:18na command r widzimy że coś znowu nadpisaliśmy

2:23więc wystarczy znaleźć co to było i to jest

2:27reload window nie jest mi to potrzebne w żaden sposób chodzi o to żeby odświeżyć

2:31całe okno wszystko przeładować mogę to zrobić z poziomu tutaj jeśli dobrze pamiętam view i gdzieś tutaj

2:36jest prawdopodobnie reload window jeżeli nie to w którymś z tych na

2:41pewno menu tutaj się to znajduje więc to będę chciał po prostu usunąć

2:45i powiem ci że z tego skrótu korzystam bardzo

2:49bardzo często czyli command r i od razu sobie tutaj wpisuje na przykład do work

2:54przeskakuje do takiej metody oczywiście w takim małym pliku wydaje się to bezcelowe

2:58natomiast w dużych plikach naprawdę bardzo przyspiesza to pracę zerknijmy

3:03jeszcze na koniec na plik html czy tutaj również będzie w stanie nam coś podpowiedzieć utworzymy

3:07sobie tutaj na przykład jakiś container w ten sposób później jeszcze powiem jak

3:11to działa bo skorzystam tutaj z emmeta i znowu jeżeli skorzystamy tutaj

3:15z edytora czy z eksploratora symboli mogę wpisać container

3:20zauważy ten div został znaleziony mogę od razu do niego przeskoczyć więc

3:24jeszcze raz możemy to zrobić i jak widzisz mamy tutaj pełną listę wszystkich

3:28symboli to zatem tyle w tej lekcji znowu poćwicz sobie

3:32korzystanie z tego skrótu ustaw go sobie tak jak będzie ci wygodnie i na swoich

3:37projektach przetestuj zobaczysz że to naprawdę bardzo bardzo przyspiesza pracę