Visual Studio Code: Przegląd UI edytora

1.42+

0:00Na początek rzućmy okiem jak wygląda ten edytor można

0:04powiedzieć out-of-the-box czy bez żadnych dodatkowych ustawień my później

0:08bardzo mocno zmienimy wygląd tego edytora pewne rzeczy ukryjemy i tak dalej natomiast

0:12po uruchomieniu wygląda on dokładnie w ten sposób ja pobrałem sobie paczkę

0:17ze strony html5 boilerplate com właśnie

0:21z kodem abyśmy tutaj nie musieli wymyślać jakiegoś swojego projektu i będę

0:25chciał przeciągnąć ten folder tutaj to sprawi że vs code

0:29nam ten folder czy cały ten projekt możemy powiedzieć uruchomi i tutaj

0:33w sidebarze będziemy mieli wszystkie pliki możemy po tych plikach przechodzić

0:37oczywiście w taki standardowy sposób jak w każdym innym edytorze natomiast

0:41w tej lekcji chciałbym się bardziej skupić na tym jakie panele znajdują się w edytorze vs

0:46code dlatego może powiększę ten edytor na cały ekran i zajmiemy

0:50się tym co mamy po tej stronie pierwszy panel który tutaj mamy to jest taki

0:54activity tab i tutaj mamy najważniejsze

0:59panele gdzie możemy je po prostu zmieniać pierwszy jest to explorer i przy okazji jak widzisz

1:03po najechaniu pokazuje nam skrót klawiaturowy dla maca jest to shift

1:07command e w windowsie będzie to prawdopodobnie shift

1:11control e dlatego że na macu i na windowsie zazwyczaj command

1:15to samo co control także niektóre skróty jeżeli nie korzystasz z maca możesz

1:19mieć inne niż ja nie mniej jednak po najechaniu tutaj będziesz je widział i pamiętaj

1:24że prawie zawsze jak ja mówię command to na windowsie oznacza to control podobnie zresztą w

1:28systemie linux więc to jest pierwszy panel i jest to explorer ten panel

1:32pokazuje nam po prostu otwarte foldery i pliki i tutaj może być więc wygląda

1:37to mniej więcej w ten sposób tutaj możemy tworzyć nowe pliki dodawać katalogi pracować

1:41z tymi plikami gdzie pod prawym przyciskiem mamy pewne opcje które też będziemy

1:45mogli potem zmodyfikować i tak dalej czyli tutaj widzimy strukturę naszego projektu kolejny

1:50panel jest to panel search czyli wyszukiwania gdzie mamy takie

1:55standardowe wyszukiwanie możemy wyszukiwać i zastępować to jest standardowe wyszukiwanie

1:59tutaj z zastępowaniem tutaj mamy jeszcze dodatkowe opcje cały ten panel będziemy też

2:03omawiać w dedykowanej lekcji następny panel jest to panel source

2:08control i tutaj będziemy pracować w naszym przypadku z gitem będziemy

2:12tutaj mogli commitować zmiany przywracać te zmiany sprawdzać historię i tak

2:16dalej temu też będzie poświęcony zupełnie osobny rozdział kolejny panel

2:20jest panel do debugowania i też przypomnę że każdy z tych paneli

2:24jak widzisz ma swój skrót klawiaturowy aby można było bez klikania bezpośrednio

2:29do niego przyjść w tym panelu będziemy mogli debugować nasze aplikacje o

2:33czym powiemy sobie również w stosownej lekcji i ostatni panel który się tutaj pojawia

2:37jest to panel z instalacją dodatków jest to bardzo

2:41wygodne dlatego że właśnie z tego miejsca wprost możemy instalować rozszerzenia

2:45takie jak na przykład szablony skórki czy na przykład

2:49zestawy ikon ale także różne rozszerzenia do walidacji kodu i tak dalej

2:54czym również będziemy się zajmować i tyle tutaj jest tych ikon domyślnie

2:58ale niektóre rozszerzenia mogą w tym miejscu poniżej dokładać swoje

3:02kolejne ikony więc warto wiedzieć że z czasem jak zainstalujesz jakieś dodatki mogą

3:06się tutaj pojawić jeszcze nowe ikony niżej mamy jeszcze taką ikonkę

3:10zębatki tutaj możemy przejść do ustawień i tak dalej ale tam będziemy

3:14przechodzić w prostszy sposób co ci później pokażę i następną rzeczą którą

3:18mamy tutaj u dołu jest statusbar na razie na nim za wiele

3:22się nie dzieje ale w zależności od tego co robimy czy w jakim pliku jesteśmy

3:26jak widzisz tutaj u dołu mogą się zmieniać różne te statystyki

3:30które są pokazywane różne informacje czy wręcz opcje które możemy

3:34zmieniać jak na przykład tutaj kliknąłem pokazała to pokazała nam się opcja indent

3:38using spaces i możemy wybrać ile spacji ma mieć wcięcie które

3:42robimy na tabulaturze także tutaj jest trochę takich różnych opcji no

3:47i jest jeszcze jeden panel którego na razie nie widzimy ale możemy go otworzyć

3:51i możemy to zrobić skrótem klawiaturowym lub na przykład tutaj z

3:55menu górnego możemy otworzyć sobie na przykład terminal wtedy nam się pojawi

3:59jeszcze jeden taki panel gdzie nie tylko jest terminal o którym będziemy potem

4:04mówić ale także jeszcze dodatkowe panele jak output debug console

4:08czy problems gdzie będą się wyświetlać błędy na przykład w naszym kodzie i

4:12to jest właśnie taki ostatni panel z tych które tutaj mamy oprócz

4:16tego mamy jeszcze panele można powiedzieć jakby wysuwane z góry jeżeli na macu

4:20wcisnę command shift p na windowsie i na linuksie jest to control

4:25shift p to pojawia nam się tak zwany command palette bardzo dużo

4:29będziemy z tego korzystać tutaj będziemy mogli różne polecenia wybierać

4:33ale również będziemy z tego poziomu mogli przeskakiwać po plikach dlatego że command

4:37shift p pokazuje nam takie menu gdzie na początku jest wpisany taki

4:42nawias ostry ale jeżeli bym go usunął to mamy zupełnie podobny

4:46panel ale tym razem z listą plików więc okazuje się że tak naprawdę wystarczy

4:51wcisnąć command p lub control p na windowsie i pojawi nam się dokładnie

4:55takie samo okienko a gdybyśmy tu wpisali nawias ostry to przejdziemy do

4:59command palette czyli tak jak byśmy wcisnęli command shift

5:03p tutaj bardzo wiele różnych rzeczy będzie można wpisywać co ci później pokażę

5:07na przykład aby przejść do linii ósmej możemy wpisać dwukropek 8 wcisnąć

5:11enter i w tym pliku znajdziemy się w linii ósmej tak więc to

5:15jest taki ogólny przegląd paneli które się tutaj pojawiają pokażę

5:19ci jak część z nich ukryć jeżeli nie będziesz chciał z nich korzystać bo ja na co dzień na przykład większość z nich ukrywam

5:25bo wolę do nich przechodzić po prostu używając skrótów klawiaturowych to

5:29zatem tyle na początek w kolejnej lekcji zobaczymy jak wyglądają ustawienia gdzie

5:33będziemy mogli skonfigurować bardzo wiele rzeczy