Visual Studio Code: Bracket Pair Colorizer

1.42+

0:00W tym rozdziale pokażę ci kilka godnych uwagi rozszerzeń do vs code

0:04z których ja też na codzień korzystam po pierwsze chciałam ci pokazać jeszcze

0:08stronę na której nie byliśmy do tej pory jest to strona z marketplace visual

0:12studio i tutaj jesteśmy w zakładce visual studio code tutaj są wszystkie

0:16rozszerzenia jakie możesz dla code zainstalować i są podzielone na pewne

0:20grupy natomiast jeżeli w tej wyszukiwarce wciśniemy enter nic nie wpisując to

0:25zostaniemy przeniesieni do takiej strony gdzie widzimy że mamy 16 tysięcy różnych

0:29rozszerzeń możemy je filtrować poprzez kategorię a także poprzez

0:33na przykład liczbę zainstalowań i tak dalej więc

0:38warto z tej strony czasami sobie skorzystać ale co ważne z wnętrza edytora to co już

0:42robiliśmy z panelu extensions możemy dokładnie tych samych rozszerzeń wyszukać

0:46i tak że podobnie jak tutaj gdzie mamy opisy tych rozszerzeń te opisy

0:50będziemy widzieć w edytorze ja będę chciał w tej lekcji pokazać ci

0:54niewielkie ale bardzo przydatne rozszerzenia które nazywa się bracket

0:58pair colarizer wystarczy że tak wyszukamy jest to dokładnie

1:02to rozszerzenie i będziemy chcieli sobie je zainstalować więc

1:06wystarczy nawet że skopiujemy tą nazwę chociaż też możemy tam kliknąć install ale

1:11przejdziemy do panelu extensions czyli command shift x albo control shift

1:15x wyszukamy sobie mamy takie oto rozszerzenie to jest dokładnie

1:19ten sam opis stąd co ciekawe możemy przejść do repozytorium na

1:23githubie lub możemy przejść do tej strony czyli jeżeli tutaj bym kliknął na

1:27ten tytuł to nas przyniesie dokładnie do takiej strony w przeglądarce jak przed momentem widzieliśmy

1:31klikamy zatem install i nam się zainstaluję takie rozszerzenie

1:35co ważne każde rozszerzenie można jeszcze usunąć czasami

1:39można je też wyłączyć okej jak widzisz jak wrócimy

1:43do rozszerzenia to możemy kliknąć disabled i możemy je wyłączyć globalnie albo

1:47tylko dla tego workspace jeżeli wyłączymy tylko dlatego workspace to oznacza

1:51tylko tyle że jak będziemy mieli więcej innych instancji w vs code z innymi projektami otwartych

1:56to tylko w tym będzie ten dodatek wyłączony możemy go usunąć również bez

2:00żadnego problemu teraz jak działa bracket pair colorizer może ja wyłączę

2:04na początek to rozszerzenie i tutaj widzimy reload required więc musimy przeładować

2:08wszystko ważna uwaga że takie przeładowanie również ubija sesję

2:12terminala gdybyś miał jakieś rzeczy pootwierane w terminalu chcesz jakiś dodatek wyłączyć i

2:17klikasz reload to pamiętaj że to wszystko zostanie zakończone przejdziemy

2:22sobie na przykład do plugins albo tutaj do plugin i zauważ że nawiasy

2:26takie jak tutaj tu jest czerwone tu jest czerwony można powiedzieć że

2:30są tego samego koloru ale jeżeli byśmy tutaj mieli na przykład console

2:34log i w środku byśmy mieli jakąś inną funkcję na przykład alert

2:38no to co tutaj robimy nie ma większego sensu ale chodzi o to że

2:42mamy wszystkie nawiasy czerwone i trudno się jest z tym połapać czasami jak jest dużo

2:46takich nawiasów i to rozszerzenie czyli bracket pair

2:50colorizer swoją drogą jak wrócimy do naszych rozszerzeń to możemy wpisać

2:54lubię małpka installed i zobaczyć tylko te które mamy zainstalowane

2:59lub wpisać enabled żeby zobaczyć tylko te które są włączone można

3:03to zrobić również tutaj i przejdziemy sobie do bracket

3:08pair colorizer i włączymy jak widzisz to od

3:13razu nam się te pary nawiasów zaczynają inaczej kolorować i to jest bardzo przydatne

3:17w tym rozszerzeniu jak widzisz teraz console log ma niebieskie nawiasy

3:22natomiast alert ma żółte i jeżeli tutaj byśmy dodawali jeszcze kolejne funkcje

3:26zagnieżdżali to te nawiasy będą odpowiednio kolorowane i to będzie podobnie działać

3:30również w plikach z innymi językami nie tylko w języku javascript a

3:34więc takie niewielkie rozszerzenie które wizualnie poprawia nam

3:38wygląd tego edytora co sprawia że ten kod jest bardziej czytelny i łatwiej

3:42się z nim pracuje polecam ci żebyś go zainstalował