VS Code – skróty, które przyspieszą Twoją pracę

W tym artykule znajdziesz listę skrótów dla VS Code zarówno dla systemu Windows (w nagłówkach i w treści), jak i macOS (w nawiasach w treści). Uwaga: nie wszystkie skróty znajdują się w nagłówkach! ;) Nie masz zainstalowanego VS Code’a? Skorzystaj z codesandbox.io (na przykład z gotowego playgroundu). Przedstawione poniżej skróty działają w nim bez zarzutu!

`Ctrl + D` i `Ctrl + Shift + L` – czyli multiselect

Zdarza się, że jednej nazwy użyliśmy w pliku kilkukrotnie lub omyłkowo dodaliśmy średniki zamiast przecinków wewnątrz obiektu. Co zrobić, gdy chcemy to poprawić za jednym zamachem? Wystarczy zaznaczyć fragment kodu, który wymaga poprawki, i nacisnąć jedną z poniższych kombinacji:

Ctrl + D (Cmd + D) – zaznaczysz wówczas kolejne wystąpienie zaznaczonego fragmentu kodu,
Ctrl + Shift + L (Cmd + Shift + L) – zaznaczysz wszystkie wystąpienia fragmentu w całym pliku.

A teraz przejdź do kolejnego akapitu i poznaj prawdziwą siłę multiselecta ;)

Przytrzymaj scroll i przeciągnij w górę lub w dół – znów multiselect! + supertip

No to do dzieła! Do czego może nam się to przydać? Załóżmy, że stworzyłeś poniższy kod: zmienne w vsc Dochodzisz do wniosku, że powyższe dane lepiej prezentowałyby się w obiekcie przypisanym do zmiennej article. Musimy zatem:

pozbyć się const oraz =,
wstawić przecinki i dwukropki,
usunąć słowo „article”,
dodać nawiasy klamrowe {}.

Jak zamienić kilka zmiennych na obiekt?

Przytrzymaj scroll i przeciągnij kursor nad wszystkimi wystąpieniami const. Usuń je, lecz nie odznaczaj jeszcze multiselecta.
Naciśnij Ctrl + prawa strzałka (Cmd + prawa strzałka). Dzięki temu przeniesiesz kursor na koniec nazwy każdej zmiennej. Wstaw tam dwukropek i usuń =. Sytuacja wygląda tak:
Teraz wypada usunąć średniki. Użycie Ctrl + Shift + L (Cmd + Shift + L) jest ryzykowne (zaznaczysz wszystkie średniki w dokumencie). Lepiej więc zaznaczyć pierwszy średnik przeciągnięciem kursora, a pozostałe kilkukrotnym naciśnięciem skrótu Ctrl + D (Cmd + D). Po zaznaczeniu usuń je i wstaw przecinki.
Ponieważ obiekt będziemy przechowywać w zmiennej article, dobrze jest pozbyć się powtarzającego się we właściwościach słowa „article”. Zaznacz jedno wystąpienie słowa „article”, a następnie użyj Ctrl + Shift + L (Cmd + Shift + L). Usuń wszystkie wystąpienia.
Zamień wielkie litery na małe:
- przez Alt + lewy przycisk myszy (Opt + lewy przycisk myszy) wstaw kursor na początku wszystkich właściwości, w których chcesz pozbyć się wielkich liter. Zaznacz je, klikając Ctrl + Shfit + strzałka w prawo (Control + Shfit + strzałka w prawo),
- przez Ctrl + Shift + P (Cmd + Shift + P) otwórz wiersz poleceń. Wpisz tam słowo „lower” i wybierz polecenie „Transform To Lowercase”.
Na końcu dodaj nawiasy klamrowe – wystarczy, że zaznaczysz całość stworzonego właśnie kodu i wciśniesz Shift + {. Dzięki temu automatycznie pojawi się także nawias zamykający. Teraz przypisz obiekt do zmiennej. Nad odpowiednim formatowaniem kodu powinien czuwać np. Prettier.
Efekt końcowy:

`Ctrl + L` – zaznaczenie bieżącej linii + wskazówka

Zaznaczenie bieżącej linii (Cmd + L) nie jest bardzo odkrywcze. Jeśli jednak połączymy ją ze skrótem Alt + lewy przycisk myszy (Opt + lewy przycisk myszy), możemy zaoszczędzić trochę czasu! Kombinacja obu skrótów doskonale sprawdzi się np. tam, gdzie mamy do usunięcia kilka rozmieszczonych „losowo” linii kodu. kilka linii kodu zaznaczonych w vsc

`Alt + strzałka w górę/dół` – przenoszenie kodu do innej linii

Alt + strzałka w górę/dół (Opt + strzałka w górę/dół) to bardzo szybki sposób na przeniesienie fragmentu kodu (jednej linii lub całego bloku) w górę lub w dół naszego dokumentu. Sprawdza się świetnie np. podczas podczas refaktoryzacji.

`Alt + Shift + strzałka w górę/dół` – kopiowanie kodu do linii powyżej/poniżej zaznaczonego fragmentu

Kolejny skrót to tylko rozwinięcie poprzedniego. Alt + Shift + strzałka w górę/dół (Opt + Shift + strzałka w górę/dół) pozwala na skopiowanie fragmentu kodu (jednej linii lub całego bloku) i natychmiastowe umieszczenie jej powyżej lub poniżej oryginału. To prosty sposób na ekspresowe „rozmnożenie” powtarzających się elementów. Skrót sprawdza się doskonale, gdy np. decydujemy się dodać jeszcze jeden element <li> do listy czy jeszcze jeden obiekt z danymi.

`Ctrl + lewy przycisk myszy`

Ta kombinacja pozwoli Ci na szybką nawigację pomiędzy fragmentami kodu. Przytrzymaj klawisz Ctrl i najedź kursorem na nazwę zmiennej, funkcji czy komponentu (powinna się podświetlić). Po jej kliknięciu zostaniesz przeniesiony do miejsca, w którym dany fragment kodu jest wykorzystywany, np.:

z miejsca wywołania funkcji do jej deklaracji (i na odwrót),
z miejsca użycia zmiennej do miejsca jej deklaracji (i na odwrót),
z miejsca wykorzystania komponentu do pliku tego komponentu itd.

`Ctrl + spacja` – wyświetlenie podpowiedzi Emmeta

podpowiedź od emmeta w vsc Okno z podpowiedziami Emmeta „zaginęło w akcji” i przestało się wyświetlać? Przywrócisz je dzięki skrótowi Ctrl + spacja (Control + spacja).

`Ctrl + Enter` – utworzenie nowej linii bez potrzeby przenoszenia kursora na koniec wiersza

Jeżeli do tej pory nie znałeś tego skrótu, to koniecznie go zapamiętaj! Oszczędzi Ci on ciągłego przenoszenia kursora na koniec wiersza tylko po to, by za chwilę kliknąć Enter i znaleźć się w nowej linii. Utrwal więc sobie: Ctrl + Enter’ (Cmd + Enter`).

`Ctrl + Shift +` – znalezienie pasującego nawiasu

Funkcja, w środku pętla, a w niej jeszcze metoda tablicowa – można pogubić się w nawiasach! Jeśli chcemy szybko „przeskoczyć” z nawiasu otwierającego do zamykającego (lub na odwrót) wystarczy użyć Ctrl + Shift + (Cmd + Shift + ). Co prawda VS Code podświetla nam pary nawiasów, gdy ustawimy przy nich kursor, jednak przy bardziej rozbudowanych blokach kodu łatwiej nawigować za pomocą skrótu.

`Alt + Z` – włączenie/wyłączenie zawijania wierszy

Powyższy skrót umożliwia szybkie przełączanie zawijania wierszy w VS Code. Zwykle zawijanie wierszy mamy włączone na stałe (lub liczbę znaków w jednej linii ogranicza nam np. ESLint.

Jak pozbyć się poziomego paska przewijania w VS Code?

Jeżeli pojawia się nam poziomy pasek przewijania, z łatwością przełączymy się w tryb zawijania wierszy przez skrót Alt + Z (Opt + Z). Działa to także w drugą stronę: jeśli np. w pliku HTML wstawimy bardzo długi paragraf, który wymusza na nas długie scrollowanie, możemy wyłączyć zawijanie wierszy w ten sam sposób: Alt + Z (Opt + Z). Inna możliwość poradzenia sobie z przydługim paragrafem to ukrycie (zwinięcie) części kodu (zwanego regionem) za pomocą pojawiającej się przy numerze linii strzałki lub skrótu Ctrl + Shift + [ (Cmd + Opt + [). zwinięcie części kodu zwanego regionem w vsc

`Ctrl +` ` – szybki dostęp do terminala

Jeśli chcemy szybko dostać się do terminala z poziomu klawiatury, wystarczy wcisnąć Ctrl + (Control +) – ta mała kreska to tzw. backtick, który znajduje się zwykle na lewo od klawisza z numerem 1. Gdy terminal jest ukryty, skrót spowoduje jego rozwinięcie. Jeśli terminal jest widoczny, skrót przeniesie nasz kursor do ostatniej linii terminala.

`Ctrl + Shift +` ` – utworzenie kolejnego terminala

Chcąc stworzyć nowy terminal, nie musimy fatygować się po myszkę i klikać plusika w prawym górnym rogu konsoli VS Code. Wystarczy skrót Ctrl + Shift + (Control + Shift +) i gotowe! tworzenie nowego terminala w vsc