Warsztat kodera | Odcinek video

01. Użyteczne skróty klawiaturowe w Visual Studio Code

MIROSŁAW ZELENT

Pogadajmy o skrótach klawiaturowych przyspieszających pracę w edytorze kodu, który gorąco polecam - w Visual Studio Code. Ten edytor jest w dodatku darmowy, open-source’owy i zdecydowanie super gdy już ogarniamy fundamenty kodowania.

Dzięki skrótom klawiaturowym i sztuczkom, które poznamy w filmie i w niniejszym artykule blogowym zdołasz pisać więcej i szybciej - ten zainwestowany tutaj czas pięknie Ci się później zwróci!

Partnerem kanału i odcinka jest justjoin.it - portal z ofertami pracy od najlepszych firm z branży IT. Szukasz ofert pracy np. w Pythonie? Dzięki partnerowi ten długi film oglądamy całkowicie bez reklam!

Znajdź w filmie

Tutoriale posiadają tzw. timestamps (chwile czasowe) - dzięki nim łatwo odnajdziesz interesujące fragmenty wiedzy. Wystarczy kliknąć na podane w nawiasach kwadratowych momenty filmu, by przewinąć tutorial dokładnie do interesującego Cię miejsca w odcinku.

[ 00:00:00 ] Wstęp, agenda wykładu, dla kogo jest ten film?
[ 00:04:57 ] Partner odcinka
[ 00:05:43 ] Przygotowanie plików do testowania skrótów
[ 00:07:45 ] Panel boczny (Ctrl+B)
[ 00:08:36 ] Przełączanie się pomiędzy zakładkami
[ 00:11:24 ] Wiersz (paleta) poleceń (Ctrl+Shift+P)
[ 00:15:51 ] Pełny ekran, tryb zen
[ 00:17:04 ] Akord (Ctrl+K) i kilka przykładów zastosowania
[ 00:19:35 ] Edycja jednoczesna w wielu miejscach w pliku
[ 00:23:42 ] Duplikowanie pojedynczej linii kodu
[ 00:28:17 ] Przesunięcie kodu bez wycinania i wklejania
[ 00:30:26 ] Zarządzanie wcięciami w kodzie
[ 00:31:19 ] Używaj zaznaczeń klawiaturowych
[ 00:32:32 ] Zabiegi edycyjne podczas pisania, bez użycia myszki
[ 00:37:47 ] Włączenie lub wyłączenie zakomentowania kodu
[ 00:41:32 ] Wygodne przeglądanie wystąpień frazy w pliku
[ 00:43:21 ] Podział edytora na wiele grup, nawigacja w grupach
[ 00:44:34 ] Edycja tego samego pliku w dwóch zakładkach
[ 00:46:04 ] Zmiana kolejności zakładek z użyciem klawiatury
[ 00:47:15 ] Skróty uruchamiania i debugowania
[ 00:49:20 ] Rozszerzenie Live Server
[ 00:51:39 ] Włączenie autozapisu wprowadzanych zmian
[ 00:53:15 ] Stosowanie skrótów z rozszerzenia Emmet
[ 00:57:06 ] Część podcastowa na temat edytorów kodu
[ 01:14:12 ] Podsumowanie odcinka

Poniżej, podobnie jak na filmie, zaprezentujemy zawsze najpierw windowsowy skrót klawiszowy, a zaraz potem pojawi się wersja na MacOS (łatwo rozpoznać która jest która, wprost po używanych klawiszach).

Skróty dotyczące interfejsu edytora

Pokaż / ukryj panel boczny

• Ctrl + B - pierwszy skrót na liście = Windows
• Command + B - drugi skrót na liście = MacOS

Przełączanie się pomiędzy otwartymi zakładkami

Takie działanie można zrealizować na co najmniej cztery różne sposoby - poznajmy je teraz wszystkie!

Sposób (#1)

• Alt + 1, 2, 3 ...
• Control + 1, 2, 3 ...

Sposób (#2)

• Ctrl + PgUp lub Ctrl + PgDown
• Option + Command + → lub Option + Command + ←

Sposób (#3)

• Ctrl + P
• Command + P

Sposób (#4)

• Ctrl + Tab
• Control + Tab

Wywołanie wiersza (palety) poleceń

• Ctrl + Shift + P
• Command + Shift + P

Zawijanie wierszy

• Alt + Z
• Option + Z

Pełna lista skrótów przedstawionych w odcinku już niebawem!

Tryb pełnego ekranu

• F11
• Command + Control + F

Tryb zen

• Ctrl + K, Z
• Command + K, Z

Skrót poprzedzający, czyli Ctrl + K to tzw. akord (sprzęgło). Opuszczenie trybu zen następuje dwukrotnym wciśnięciem: Escape, Escape.

Pokaż listę wszystkich skrótów klawiaturowych

• Ctrl + K, Ctrl + S
• Command + K, Command + S

Zwiń wszystkie regiony w kodzie (ciała funkcji, bloki)

• Ctrl + K, Ctrl + 0
• Command + K, Command + 0

Rozwiń wszystkie regiony w kodzie (ciała funkcji, bloki)

• Ctrl + K, Ctrl + J
• Command + K, Command + J

Skopiuj do schowka ścieżkę dyskową do bieżącego pliku

• Ctrl + K, P
• Command + K, P

Pokaż ustawienia Visual Studio Code

• Ctrl + ,
• Command + ,

Skróty edycyjne podczas pisania kodu

Edycja jednoczesna w wielu miejscach w pliku

Naciskamy tę kombinację klawiszy tyle razy, ile planujemy dokonać zmian:

• Ctrl + D
• Command + D

Aby od razu zaznaczyć wszystkie wystąpienia frazy do zastąpienia wystarczy użyć:

• Ctrl + Shift + L
• Command + Shift + L

Możliwość pisania w wielu miejscach:

• Alt + lewy klik myszką
• Option + lewy klik myszką

Duplikowanie pojedynczej linii kodu

• Shift + Alt + ↑ lub Shift + Alt + ↓
• Shift + Option+ ↑ lub Shift + Option + ↓

Przesunięcie zaznaczonego kodu bez potrzeby wycinania i wklejania

• Alt + ↑ lub Alt + ↓
• Option + ↑ lub Option + ↓

Zarządzanie "wcięciami" w kodzie

• Tab lub Shift + Tab (zarówno Windows jak i MacOS)
• Ctrl + [ lub Ctrl + ]
• Command + [ lub Command + ]

Wykasowanie bieżącej linii kodu

• Ctrl + Shift + K
• Command + Shift + K

Wstaw nową linię powyżej bieżącej linii

• Ctrl + Shift + Enter
• Command + Shift + Enter

Usunięcie ostatniego wpisanego wyrazu

• Ctrl + Backspace
• Option + Backspace

Przeskocz kursorem o jeden wyraz

• Ctrl + → lub Ctrl + ←
• Option + → lub Option + ←

Włączenie lub wyłączenie zakomentowania kodu

Komentarz będzie odpowiedni do używanego w pliku języka:

• Ctrl + /
• Command + /

Szybkie zaznaczenie bieżącej linii, bez użycia myszki:

• End, Shift + Home lub Home, Shift + End

Na Macu odpowiedniki tych klasycznych klawiszy sterujących są następujące:

• Command + ← odpowiada Home
• Command + → odpowiada End
• fn + ↑ odpowiada PgUp
• fn + ↓ odpowiada PgDown

Wygodne przeglądanie wystąpień frazy w pliku

• F3 oraz Shift + F3 (tak samo Windows i MacOS)

Podział edytora na kilka grup (kart, zakładek)

• Ctrl + 2, 3, 4...
• Command + 2, 3, 4...

Przeniesienie aktywności kursora do innej grupy

• Ctrl + K, Ctrl + → lub Ctrl + K, Ctrl + ←
• Command + K, Command + → lub Command + K, Command + ←

Edycja tego samego pliku w dwóch zakładkach

• Ctrl + \
• Command + \

Przesunięcie aktywnej zakładki w prawo lub lewo na liście

• Ctrl + Shift + PgUp lub Ctrl + Shift + PgDown
• Command + K, Command + Shift + ← lub Command + K, Command + Shift + →

Skróty związane z uruchomieniem kodu

• F5 (uruchom z debugowaniem) lub Ctrl + F5 (uruchom bez debugowania)
• F5 (uruchom z debugowaniem) lub Control + F5 (uruchom bez debugowania)

Uruchom rozszerzenie Live Server

• Alt + L, Alt + O
• Command + L, Command + O

Dodatkowe linki, warto zajrzeć

• Informacje o rozszerzeniu Emmet
• Cheatsheet - pełna lista skrótów w Emmet
• Reference skrótów na oficjalnej stronie VSC
• Skróty Visual Studio Code dla Windows
• Skróty Visual Studio Code dla Linux
• Skróty Visual Studio Code dla MacOS
• Podcast o błędach w nauce programowania