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:

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?

1. Przytrzymaj scroll i przeciągnij kursor nad wszystkimi wystąpieniami `const`. Usuń je, lecz nie odznaczaj jeszcze multiselecta.
2. 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:
   
3. 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.
4. 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.
5. 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”.
     
6. 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.
7. 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.

`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

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 + [`).

`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!

Chcesz poznać więcej skrótów?

Oto skróty klawiszowe dla Visual Studio Code w systemie Windows.

A tutaj skróty klawiszowe dla VSC w systemie macOS.