Visual Studio Code: Zmiana szablonu

1.42+

0:00W tym rozdziale zajmiemy się moją ulubioną rzeczą mianowicie

0:04zmianą wyglądu edytora jest to również rzecz o którą najczęściej jestem

0:08pytany to znaczy jaką skórkę mam ustawioną jaki font jakie ikonki i tak

0:12dalej więc będę chciał ci pokazać gdzie możemy znaleźć szablony jak je instalować

0:16i które z nich polecam mamy tutaj otwarty edytor i on tak

0:20wygląda domyślnie po instalacji natomiast jeżeli byśmy sobie przeszli do rozszerzeń

0:25czyli będzie to tutaj skrót klawiaturowy jeśli najedziemy myszą to nam pokaże

0:29na macu shift command x na windowsie powinien

0:33to być shift control x i tutaj możemy wyszukiwać

0:38sobie rozszerzeń o czym powiemy jeszcze później natomiast rozszerzenia są podzielone

0:42na różne kategorie ale kiedy skorzystamy tutaj z tej wyszukiwarki to wyszukuje

0:46wśród wszystkich kategorii więc jeżeli byśmy sobie wypisali team w ten sposób

0:50to znajdziemy najróżniejsze szablony i jak już się domyślasz

0:54bardzo łatwo jest je zainstalować ja polecam ci na przykład material team

0:58chociaż ja przez kilka lat korzystania z vs code mam tych szablonów myślę

1:02że już ponad 100 przynajmniej zainstalowanych ale korzystam tylko z kilku przejdźmy

1:07sobie do takiego może szablonu tutaj będziemy widzieli że on jest zainstalowany

1:11łącznie ponad 1 790 000 razy

1:15czyli jest bardzo popularny tutaj swoją drogą można również sortować na

1:19przykład po popularności po liczbie zainstalowań

1:23i tak dalej i tutaj jest opis takiego szablonu natomiast

1:28najpierw skupmy się na instalacji klikniemy sobie install musimy chwilę poczekać i

1:32od razu mam się otworzy command palette gdzie możemy ten material team ustawić od razu widzimy

1:36że ich jest kilka a w takim rozszerzeniu najróżniejsze można ustawiać więc

1:40wcisnę enter żeby ustawić ten pierwszy z nich teraz tutaj wrócę

1:45sobie do edytora żebyśmy mogli zobaczyć jak cały ten material team

1:49wygląda i na przykład otworzymy sobie plik index bardzo

1:53ładnie jak widzisz wygląda ten szablon jest to jeden z najpopularniejszych i też moich ulubionych natomiast

1:57to co ja bym w nim najchętniej zmienił to fakt że nie mamy tutaj odcięcia

2:02na przykład od tego sidebara czy gdybyśmy sobie otworzyli ten

2:06panel dolny ja w tym momencie nie pamiętam skrótu ale to tylko dlatego że go zmieniłem

2:10u siebie a do lekcji jak konfigurować skróty klawiaturowe dopiero dojdziemy także domyślnego

2:15skrótu nie pamiętam dlatego przejdźmy sobie na przykład w ten sposób do

2:19terminala i to jest właśnie ten panel który też swoją drogą można na prawo

2:23lub w lewo przerzucić na przykład tutaj no i mi tutaj brakuje tak jak wspomniałem tego odcięcia

2:27te panele możemy oczywiście tutaj skalować i tak dalej więc teraz

2:31żeby zmienić szablon wciskamy command shift p lub control shift p żeby przejść

2:35command palette wpiszemy sobie team i znajdziemy coś takiego jak preferences

2:40color team w ten sposób będziemy zmieniać szablon tutaj nam się pokaże lista

2:44wszystkich szablonów i zauważ że ja od razu zainstalowałem material team a nie pokazałem

2:48ci że tutaj są inne domyślnie preinstalowane szablony więc mógłbyś

2:52je zmienić w ten sposób ale okej mamy ten material team i teraz jak

2:56byśmy sobie zerknęli to material team ma taką wersję jak material

3:01team tutaj gdzieś powinno być o właśnie to jest ten darker chociaż nie

3:05high contrast okej chodzi o ten i on nam już oddziela te sidebary

3:09te panele w taki wyraźny sposób więc ja bardziej preferuję właśnie taki szablon czyli

3:14jak widzisz zmiana szablonów jest bardzo prosta jeżeli sobie zainstalujesz jakiś nowy szablon to

3:18control lub command shift p tutaj preferences color team

3:22i możesz sobie podejrzeć tylko strzałkami przeskakując a jeżeli wciśniesz enter

3:26to taki szablon ustawisz oczywiście na escape możemy taki wybór

3:30anulować gdybyśmy teraz przeszli do ustawień w czyli command i

3:35przecinek to zauważ może sobie zamknę ten panel

3:39to jest z kolei command albo control j że tutaj mamy w

3:43naszych ustawieniach w tym jsonie wpisane to co ustawiliśmy czyli jest tutaj nazwa

3:47tego szablonu a więc moglibyśmy również z poziomu tego jsona

3:51to zmienić dlaczego ci pokazałem te ustawienia po pierwsze żebyś wiedział że nie ma jakiegoś

3:56magicznego miejsca gdzie wieśvs code przechowuje inne ustawienia one się znajdą tutaj

4:01czyli wszystkie nasze a więc użytkownika ustawienia a po drugie dlatego że

4:05jak wrócimy na stronę takiego szablonu to warto zwrócić uwagę na to że

4:09takie szablony często mają dodatkowe opcje które możesz właśnie do tego szablonu

4:13ustawić no i tutaj jest to pokazane więc jeżeli byśmy sobie taką opcję

4:18skopiowali to możemy ją właśnie wkleić tutaj do ustawień czyli

4:22tutaj byśmy postawili na końcu przecinek i wkleili to wszystko dostosowując oczywiście

4:26tak jak to tutaj było napisane czyli powiedzmy tutaj material team albo

4:30material team i variant trzeba po prostu to słowo variant zamienić na przykład na darker czyli

4:35tak jak widzieliśmy tutaj albo na przykład high contrast zatem

4:40zawsze zerkaj sobie przy takim szablonie na dodatkowe jakieś opcje które są

4:44które mogą sprawić że on będzie ładniej wyglądał natomiast jeżeli chodzi o sam o same

4:49szablony to te które ja mógłbym ci jeszcze polecić z których korzystam to

4:53jest na przykład nord bardzo

4:59fajny taki delikatny szablon on wygląda w ten sposób fajny jest też slack

5:03jeżeli korzystasz z aplikacji slack i nie masz jej dość to tutaj również

5:07możesz zobaczyć że slack ma fajny szablon oczywiście

5:11tutaj teraz go może nie będę instalował chociaż może rzućmy okiem dlatego że na tym

5:15podglądzie tego wszystkiego nie ma nie ups przez przypadek zainstalowałem odinstalujmy

5:20to nie szablon slack przepraszam tylko jakieś inne rozszerzenie

5:25więc wpiszmy slack team okej chodziło

5:29mi dokładnie o ten szablon no właśnie i tutaj on ma kilka fajnych wersji

5:33które możesz sobie później zmieniać w zależności od twojego nastroju czy na przykład

5:37pory dnia bardzo fajnym szablonem jest też panda

5:41powinno nam go znaleźć on wygląda w ten sposób

5:45okej tutaj znowu nie ma zbyt wielu podglądów jest taki pogląd

5:49ale on ma też kilka wersji więc polecam fajne szablony

5:54i też takie szanujące nasze oczy te są solarized i

6:02tutaj będzie wersja właśnie ta ciemna i jasna one są tak dobrane aby były jak

6:06najlżejsze dla naszych oczu w razie czego też polecam tak jak wspomniałem

6:10ja na pewno ponad 100 przynajmniej tych szablonów mam zainstalowanych chociaż z większości z nich

6:14nie korzystam i może jeszcze jakiś jeden który lubię to będzie night

6:18owl czyli taka nocna sowa okej

6:23on wygląda w ten sposób on ma też jasną i ciemną wersję zatem pobaw się trochę

6:27z tymi szablonami i zainstaluj taki który ci się podoba i będziemy mogli dalej przejść

6:31w poznawaniu i dostosowaniu wyglądu vs code