10 skrótów klawiszowych Visual Studio Code, które powinieneś znać

Visual Studio Code jest obecnie jednym z najpopularniejszych edytorów kodu wykorzystywanych przez programistów, testerów automatyzujących, specjalistów DevOps oraz osoby uczące się programowania. Jego popularność wynika między innymi z prostego interfejsu, dużej liczby rozszerzeń oraz możliwości dopasowania środowiska do własnych potrzeb.

Jedną z funkcji, które mogą najbardziej przyspieszyć codzienną pracę w Visual Studio Code, są skróty klawiszowe.

Na początku wiele osób wykonuje większość operacji za pomocą myszy. Otwiera kolejne katalogi, wyszukuje pliki w panelu bocznym, wybiera polecenia z menu i ręcznie zaznacza fragmenty kodu. Nie ma w tym nic złego, szczególnie podczas nauki obsługi edytora. Z czasem warto jednak stopniowo wprowadzać skróty klawiszowe.

Nie musisz od razu zapamiętywać kilkudziesięciu kombinacji. Wystarczy zacząć od kilku najczęściej używanych operacji. Po pewnym czasie korzystanie z nich stanie się naturalne, a poruszanie się po projekcie będzie znacznie szybsze.

Poniżej znajdziesz 10 praktycznych skrótów Visual Studio Code, które przydadzą się niezależnie od tego, czy pracujesz z JavaScriptem, TypeScriptem, Pythonem, Javą, plikami konfiguracyjnymi czy testami automatycznymi.

W artykule podaję skróty zarówno dla systemów Windows i Linux, jak i dla systemu macOS.

1. Szybkie otwieranie plików

Windows/Linux: Ctrl + P
macOS: Command + P

Podczas pracy nad większym projektem ręczne wyszukiwanie pliku w panelu Explorer może zajmować sporo czasu. Projekt może przecież zawierać dziesiątki katalogów oraz setki plików.

Skrót Ctrl + P otwiera pole szybkiego wyszukiwania plików. Wystarczy zacząć wpisywać fragment nazwy, a Visual Studio Code pokaże pasujące wyniki.

Załóżmy, że w projekcie znajduje się plik:

src/components/UserProfile.tsx

Zamiast rozwijać katalog src, następnie components, a później szukać odpowiedniego pliku, możesz nacisnąć Ctrl + P i wpisać:

userprofile

Po wybraniu wyniku plik zostanie natychmiast otwarty.

Nie musisz podawać całej nazwy ani pełnej ścieżki. Wyszukiwarka potrafi dopasować plik na podstawie fragmentów nazwy. Jest to jeden z tych skrótów, które bardzo szybko zaczynają oszczędzać realny czas.

2. Otwieranie palety poleceń

Windows/Linux: Ctrl + Shift + P
macOS: Command + Shift + P

Paleta poleceń, czyli Command Palette, umożliwia dostęp do większości funkcji dostępnych w Visual Studio Code.

Po jej otwarciu możesz wyszukać polecenie, wpisując fragment jego nazwy. Nie musisz pamiętać, w którym miejscu menu znajduje się dana opcja.

Za pomocą palety poleceń możesz między innymi:

• zmienić motyw edytora,
• sformatować dokument,
• otworzyć ustawienia,
• przeładować okno Visual Studio Code,
• uruchomić zadanie,
• wybrać interpreter języka,
• wykonać polecenie dodane przez rozszerzenie,
• zmienić język składni aktualnego pliku.

Przykładowo, aby zmienić motyw, możesz otworzyć paletę poleceń i wpisać:

Color Theme

Następnie wystarczy wybrać interesujący Cię motyw.

Command Palette jest szczególnie przydatna wtedy, gdy wiesz, co chcesz zrobić, ale nie pamiętasz odpowiedniego skrótu klawiszowego. Możesz potraktować ją jako centralną wyszukiwarkę wszystkich funkcji edytora.

3. Wyszukiwanie tekstu w całym projekcie

Windows/Linux: Ctrl + Shift + F
macOS: Command + Shift + F

Wyszukiwanie tekstu w jednym pliku jest przydatne, ale w codziennej pracy często potrzebujemy znaleźć wszystkie miejsca, w których użyto określonej nazwy, wartości lub komunikatu.

Skrót Ctrl + Shift + F otwiera wyszukiwarkę działającą w całym projekcie.

Możesz dzięki niej znaleźć między innymi:

• nazwę funkcji,
• adres endpointu API,
• komunikat błędu,
• selektor używany w testach,
• nazwę zmiennej środowiskowej,
• fragment zapytania SQL,
• konfigurację konkretnej usługi.

Załóżmy, że chcesz sprawdzić, gdzie w projekcie wykorzystywana jest funkcja createUser. Po wpisaniu jej nazwy Visual Studio Code wyświetli wszystkie pliki i linie zawierające wskazany tekst.

Wyszukiwanie możesz dodatkowo ograniczyć do określonych plików albo katalogów. Możliwe jest również wykluczenie wybranych lokalizacji, na przykład katalogu z wygenerowanymi raportami.

Funkcja obsługuje także wyrażenia regularne, co daje znacznie większe możliwości wyszukiwania bardziej złożonych wzorców.

4. Otwieranie i ukrywanie terminala

Windows/Linux: Ctrl + `` **macOS:** Control + ``

Visual Studio Code ma wbudowany terminal, dlatego w wielu przypadkach nie trzeba otwierać osobnego okna konsoli.

Za pomocą skrótu z klawiszem grawisu możesz szybko pokazywać i ukrywać panel terminala. Klawisz grawisu zazwyczaj znajduje się w lewej górnej części klawiatury, w pobliżu klawisza 1.

W terminalu możesz uruchamiać między innymi:

npm install
npm run dev
npm test
git status
git pull
npx playwright test
docker compose up

Jest to szczególnie wygodne podczas tworzenia aplikacji internetowych, testów automatycznych oraz konfiguracji projektów DevOps.

Zamiast przełączać się pomiędzy edytorem i osobnym oknem terminala, możesz wykonywać wszystkie najważniejsze operacje w jednym środowisku.

Visual Studio Code pozwala również utworzyć kilka terminali i korzystać z różnych powłok, takich jak PowerShell, Command Prompt, Git Bash czy Zsh.

5. Pokazywanie i ukrywanie panelu bocznego

Windows/Linux: Ctrl + B
macOS: Command + B

Panel boczny Visual Studio Code zawiera między innymi eksplorator plików, wyszukiwarkę, kontrolę wersji Git oraz listę zainstalowanych rozszerzeń.

Panel jest bardzo przydatny, ale na mniejszym ekranie może zajmować znaczną część przestrzeni roboczej. Skrót Ctrl + B pozwala go szybko ukryć, a następnie ponownie wyświetlić.

Może się to przydać, gdy:

• pracujesz na laptopie,
• chcesz zobaczyć dłuższą linię kodu,
• porównujesz dwa pliki obok siebie,
• nagrywasz materiał szkoleniowy,
• chcesz skupić się wyłącznie na aktualnie edytowanym pliku.

To prosty skrót, ale potrafi znacznie poprawić komfort pracy. Zamiast zmieniać szerokość panelu za pomocą myszy, możesz jednym ruchem odzyskać dodatkowe miejsce na kod.

6. Przenoszenie linii kodu

Windows/Linux: Alt + strzałka w górę lub Alt + strzałka w dół
macOS: Option + strzałka w górę lub Option + strzałka w dół

Podczas edycji kodu często okazuje się, że dana linia powinna znaleźć się kilka miejsc wyżej albo niżej.

Standardowym rozwiązaniem byłoby zaznaczenie linii, wycięcie jej, ustawienie kursora w odpowiednim miejscu i wklejenie zawartości. W Visual Studio Code można zrobić to znacznie szybciej.

Ustaw kursor w wybranej linii i naciśnij Alt wraz ze strzałką w górę albo w dół. Cała linia zostanie przesunięta.

Skrót działa również dla kilku zaznaczonych linii.

Przykładowo, jeżeli import znajduje się w nieodpowiednim miejscu, możesz przesunąć go wyżej bez używania schowka. Podobnie możesz zmieniać kolejność elementów tablicy, właściwości obiektu, kroków testu albo reguł w pliku konfiguracyjnym.

Edytor zachowuje przy tym formatowanie kodu, dzięki czemu operacja jest szybka i bezpieczna.

7. Dodawanie wielu kursorów

Windows/Linux: Alt + kliknięcie myszą
macOS: Option + kliknięcie myszą

Wiele kursorów, czyli multicursor, to jedna z najbardziej charakterystycznych funkcji nowoczesnych edytorów kodu.

Przytrzymaj Alt i kliknij w kilku miejscach dokumentu. Visual Studio Code utworzy osobny kursor w każdej wskazanej lokalizacji. Wszystko, co następnie wpiszesz lub usuniesz, zostanie zastosowane jednocześnie w każdym miejscu.

Załóżmy, że masz kilka podobnych linii:

const userName = "Adam";
const userEmail = "adam@example.com";
const userRole = "admin";

Jeżeli chcesz dodać taki sam fragment w kilku miejscach, nie musisz edytować każdej linii osobno. Możesz ustawić wiele kursorów i wprowadzić zmianę tylko raz.

Funkcja jest przydatna podczas:

• modyfikowania podobnych właściwości,
• dodawania prefiksów,
• zmiany struktury danych,
• edytowania wielu selektorów,
• uzupełniania powtarzalnych fragmentów kodu,
• przygotowywania danych testowych.

Należy jednak korzystać z niej uważnie. Jeżeli edytowane linie nie mają identycznej struktury, łatwo przypadkowo zmienić niewłaściwy fragment kodu.

8. Przechodzenie do definicji

Windows/Linux/macOS: F12

Podczas analizowania kodu często widzimy wywołanie funkcji, klasy albo metody, ale nie wiemy, gdzie znajduje się jej implementacja.

Ustaw kursor na nazwie interesującego elementu i naciśnij F12. Visual Studio Code spróbuje przejść bezpośrednio do jego definicji.

Przykładowo, w teście możesz zobaczyć wywołanie:

await loginPage.login(username, password);

Jeżeli chcesz sprawdzić, jak działa metoda login, ustaw na niej kursor i użyj F12. Edytor może automatycznie otworzyć plik zawierający jej implementację.

Funkcja działa szczególnie dobrze w projektach korzystających z TypeScriptu, ponieważ edytor ma dostęp do informacji o typach i strukturze kodu.

Przechodzenie do definicji jest bardzo pomocne podczas:

• poznawania nowego projektu,
• analizowania istniejącego kodu,
• wyszukiwania implementacji interfejsu,
• sprawdzania kodu biblioteki,
• debugowania problemów,
• wykonywania code review.

Powrót do poprzedniego miejsca jest możliwy za pomocą:

Windows/Linux: Alt + strzałka w lewo
macOS: Control + -

Dzięki temu możesz swobodnie przechodzić pomiędzy wywołaniem a implementacją bez ręcznego wyszukiwania plików.

9. Zmiana nazwy symbolu

Windows/Linux/macOS: F2

Zmiana nazwy zmiennej lub funkcji za pomocą zwykłego wyszukiwania i zamiany może być ryzykowna.

Jeżeli w projekcie znajduje się kilka różnych zmiennych o tej samej nazwie, globalna zamiana tekstu może zmodyfikować również miejsca, których nie chcieliśmy zmieniać.

Skrót F2 uruchamia funkcję Rename Symbol.

Ustaw kursor na nazwie zmiennej, funkcji, klasy, metody albo innego symbolu, a następnie naciśnij F2. Po wpisaniu nowej nazwy Visual Studio Code spróbuje zaktualizować wszystkie powiązane odwołania.

Przykładowo:

const result = calculatePrice(products);

Jeżeli nazwa result jest zbyt ogólna, możesz zmienić ją na:

const totalPrice = calculatePrice(products);

Przy poprawnie skonfigurowanym projekcie edytor zaktualizuje także pozostałe miejsca korzystające z tej zmiennej.

Jest to przykład prostego refaktoryzowania kodu. Dzięki tej funkcji zmiana nazwy jest szybsza i bezpieczniejsza niż ręczne poprawianie każdego wystąpienia.

Warto jednak po każdej większej zmianie uruchomić testy, sprawdzanie typów oraz lintowanie projektu.

10. Formatowanie całego dokumentu

Windows/Linux: Shift + Alt + F
macOS: Shift + Option + F

Czytelne formatowanie kodu ma znaczenie zarówno dla autora, jak i dla pozostałych osób pracujących nad projektem.

Skrót Shift + Alt + F formatuje cały aktualnie otwarty dokument. W zależności od języka oraz konfiguracji projektu Visual Studio Code może wykorzystać wbudowany mechanizm formatowania albo zainstalowane rozszerzenie, na przykład Prettier.

Formatowanie może poprawić między innymi:

• wcięcia,
• odstępy,
• rozmieszczenie nawiasów,
• podział długich linii,
• strukturę obiektów,
• czytelność plików JSON,
• sposób zapisu kodu HTML i CSS.

Załóżmy, że otrzymałeś mało czytelny obiekt:

const user={name:"Adam",email:"adam@example.com",active:true};

Po sformatowaniu może on wyglądać następująco:

const user = {
  name: "Adam",
  email: "adam@example.com",
  active: true,
};

W projektach zespołowych warto ustalić wspólne reguły formatowania i przechowywać konfigurację w repozytorium. Dzięki temu kod będzie wyglądał podobnie niezależnie od tego, kto go edytował.

Możliwe jest również włączenie automatycznego formatowania podczas zapisywania pliku. Odpowiada za to ustawienie Format On Save. Takie rozwiązanie ogranicza liczbę niepotrzebnych różnic w repozytorium i pomaga utrzymywać spójny styl kodu.

Jak sprawdzić wszystkie skróty Visual Studio Code?

Visual Studio Code udostępnia osobny widok zawierający wszystkie skonfigurowane skróty klawiszowe.

Możesz go otworzyć za pomocą:

Windows/Linux: Ctrl + K, a następnie Ctrl + S
macOS: Command + K, a następnie Command + S

Kombinacje należy nacisnąć kolejno. Najpierw pierwszą, a następnie drugą.

W widoku Keyboard Shortcuts możesz:

• wyszukiwać dostępne polecenia,
• sprawdzać przypisane kombinacje,
• zmieniać istniejące skróty,
• usuwać przypisania,
• dodawać własne skróty,
• sprawdzać konflikty pomiędzy kombinacjami.

Warto pamiętać, że niektóre skróty mogą działać inaczej w zależności od systemu operacyjnego, układu klawiatury, ustawień edytora oraz zainstalowanych rozszerzeń.

Jeżeli dana kombinacja nie działa, najlepiej wyszukać nazwę polecenia w ustawieniach skrótów i sprawdzić, jaki klawisz jest aktualnie do niego przypisany.

Czy warto uczyć się skrótów klawiszowych?

Skróty klawiszowe nie sprawią automatycznie, że kod będzie lepszy albo pozbawiony błędów. Mogą jednak znacząco usprawnić wykonywanie powtarzalnych operacji.

Największą korzyścią nie jest oszczędzenie jednej czy dwóch sekund. Ważniejsze jest ograniczenie ciągłego odrywania rąk od klawiatury i szukania odpowiednich elementów interfejsu.

Dzięki skrótom można szybciej:

• przechodzić pomiędzy plikami,
• odnajdywać fragmenty kodu,
• uruchamiać polecenia,
• analizować implementację,
• refaktoryzować nazwy,
• porządkować kod,
• obsługiwać terminal.

Nie próbuj jednak zapamiętać wszystkich kombinacji jednego dnia. Najlepiej wybrać dwa lub trzy skróty i świadomie korzystać z nich przez kilka dni. Kiedy staną się naturalną częścią pracy, możesz dodać kolejne.

Dobrym zestawem na początek jest:

• Ctrl + P do otwierania plików,
• Ctrl + Shift + P do uruchamiania poleceń,
• Ctrl + Shift + F do wyszukiwania w całym projekcie,
• `Ctrl + `` do otwierania terminala.

Już te cztery kombinacje mogą zauważalnie usprawnić pracę z Visual Studio Code.

Podsumowanie

Visual Studio Code oferuje setki poleceń i skrótów klawiszowych, ale w praktyce nie trzeba znać ich wszystkich.

Najważniejsze jest opanowanie kombinacji związanych z operacjami, które wykonujesz każdego dnia. Szybkie otwieranie plików, wyszukiwanie w projekcie, korzystanie z terminala, zmiana nazw oraz formatowanie kodu to czynności, które pojawiają się niemal w każdym projekcie.

Poznane skróty warto stopniowo wprowadzać do codziennej pracy. Początkowo może się zdarzyć, że będziesz musiał sprawdzać ich kombinacje. Po pewnym czasie zaczniesz jednak używać ich automatycznie, bez zastanawiania się nad kolejnymi klawiszami.

Właśnie wtedy Visual Studio Code zaczyna być nie tylko edytorem kodu, ale prawdziwie wygodnym środowiskiem pracy.