Skróty klawiaturowe w programie VS Code: Które z nich używać i dlaczego?

Spis treści:

• 1. Wywołanie wyszukiwania
• 2. Formatowanie komentarzy w kodzie
• 3. Przejście do wiersza o określonym numerze
• 5. Kopiowanie wiersza
• 6. Dostosowanie wpisu do żądanego formatu
• Różnorodność wprowadzanych danych
• 8. Edycja wielopoziomowa
• 9. Skróty tagów i charakterystyk
• 10. Skróty dla wyrażeń wielowierszowych
• 11. Aktywuj terminal
• Podsumujmy

Skróty klawiaturowe znacznie ułatwiają pracę programistom, oszczędzając im czas. Program Visual Studio Code również zawiera takie kombinacje. Użytkownicy mogą również tworzyć własne, ale dla większości, zwłaszcza początkujących, standardowe opcje są wystarczające. Dotyczy to zwłaszcza tych, którzy mają do czynienia z mnóstwem ustawień i mogą się w nich gubić.

Przyjrzyjmy się najprzydatniejszym zasobom dla osób, które dopiero zaczynają przygodę z układem stron. Czytaj dalej i śmiało eksperymentuj.

1. Wywołanie wyszukiwania

Typowe zadanie

Musisz znaleźć wszystkie elementy z klasą „link” i zastosować style do wybranych z nich, jednocześnie dodając nową klasę.

Co zrobić

Aby wyszukać potrzebne informacje na stronie, użyj skrótu klawiaturowego Ctrl + F w systemie Windows lub ⌘Cmd + F w systemie macOS. Następnie wpisz wyszukiwany tekst, a zobaczysz wszystkie pasujące wyniki. Następnie wystarczy poruszać się między nimi za pomocą strzałek nawigacyjnych.

2. Formatowanie komentarzy w kodzie

Sytuacja

Jeśli chcesz dodać komentarz lub tymczasowo wyłączyć pewien fragment kodu (na przykład w celu przetestowania działania innych części), możesz to zrobić.

Co zrobić

Zaznacz wymagany fragment tekstu i naciśnij Ctrl + / , jeśli używasz systemu Windows lub ⌘Cmd + / w systemie macOS. Jeśli nic nie zostanie zaznaczone, wiersz, w którym znajduje się kursor, zostanie zakomentowany. Można go również odkomentować w ten sam sposób.

3. Przejdź do wiersza o określonym numerze

Typowe sytuacje

• Podczas kontroli układu konieczne okazało się zidentyfikowanie i poprawienie określonej właściwości. Inspektor kodu przeglądarki udostępnia informacje o ścieżce do odpowiedniego pliku, zazwyczaj powiązanego ze stylami, a także wskazuje numer wiersza, w którym znajduje się ta właściwość.
• W edytorze kodu programu pojawia się powiadomienie o błędzie w określonym wierszu.

Co zrobić

Aby szybko przejść do żądanego wiersza, naciśnij Ctrl + G (w systemie Windows) lub ⌃Ctrl + G (w systemie macOS), a następnie wpisz numer wiersza. Nie będziesz musiał przewijać dokumentu ręcznie.

5. Kopiowanie ciągu znaków

Sytuacja

Konieczne jest szybkie wstawienie identycznych elementów do kodu. Oznacza to, że musisz utworzyć duplikat wiersza, umieszczając go nad lub pod oryginałem.

Co zrobić

Umieść kursor na żądanym wierszu, a następnie naciśnij skrót klawiaturowy Shift + Alt + ↓ / ↑ w systemie Windows lub ⇧Shift + ⌥Option + ↓ / ↑ w systemie macOS.

6. Doprowadzenie listingu do pożądanego formatu

Typowa potrzeba

Przyspiesz proces porządkowania kodu, aby stał się bardziej uporządkowany, zrozumiały, estetyczny i spełniał Twoje standardy kodowania (na przykład możesz dowiedzieć się więcej o stylu Java tutaj).

Co zrobić

Naciśnij kombinację klawiszy Shift+Alt+F w systemie Windows lub Shift+Option+F w systemie macOS.

Aby zapewnić poprawne formatowanie:

• Zainstaluj wtyczkę do formatowania kodu.
• Skonfiguruj edytor zgodnie ze swoim stylem kodowania. Nie zapomnij również ustawić prawidłowej wartości wcięcia, która zazwyczaj wynosi 2 lub 4 spacje.

Różnorodność wprowadzanych danych

Funkcja wielu kursorów jest imponująca i znacznie zwiększa szybkość pracy projektanta układu.

Sytuacja

Musiałeś umieścić te same informacje w kilku różnych miejscach jednocześnie.

Aby utworzyć kopię kursora:

• Przytrzymaj klawisz Alt w systemie Windows lub ⌥Option w systemie macOS, a następnie kliknij lewym przyciskiem myszy w miejscu, w którym chcesz umieścić kursor.
• Aby zaznaczyć wiele wierszy, naciśnij i przytrzymaj środkowy przycisk myszy. W rezultacie kursor zostanie wyświetlony w każdym z zaznaczonych wierszy.
• Jeśli nie chcesz ciągle klikać myszą, możesz powielić kursor za pomocą skrótów klawiaturowych: w systemie Windows jest to Ctrl + Alt + ↑ / ↓, a w systemie macOS jest to ⌥Option + ⌘Cmd + ↑ / ↓.

8. Edycja wielopoziomowa

Sytuacja

Musisz wprowadzić zmiany w tym samym kodzie w kilku miejscach jednocześnie.

Co zrobić

Zaznacz żądane znaki myszką i użyj skrótu klawiaturowego Ctrl + D w systemie Windows lub ⌘Cmd + D w systemie macOS. Wielokrotne kliknięcia dodadzą kolejne dopasowanie wybranego fragmentu, znajdujące się dalej w tekście. Następnie będziesz mógł jednocześnie edytować wszystkie zaznaczone obszary, które zostaną podświetlone na niebiesko.

9. Skróty tagów i właściwości

Jak to działa

Gdy wpisujesz jeden lub dwa znaki, funkcja autouzupełniania zaczyna sugerować nazwę tagu HTML (wraz z tagiem zamykającym) lub nazwę właściwości CSS. Poczekaj, aż edytor podświetli sugerowaną opcję (jeśli dostępnych jest kilka opcji, wybierz tę, której potrzebujesz), a następnie naciśnij Tab lub Enter.

Wszystkie dostępne skróty są tutaj przedstawione. W miarę ich zapamiętywania Twoje umiejętności i szybkość wykonywania zadań wzrosną, a uwierz mi, przyniesie Ci to ogromną radość.

10. Skróty dla wyrażeń wielowierszowych

Dlaczego tego potrzebujesz

Aby przyspieszyć proces generowania struktur składających się z powiązanych ze sobą tagów.

Na przykład, musisz wygenerować nieuporządkowaną listę składającą się z czterech elementów. Każdy z tych elementów powinien zawierać link należący do klasy link. Wszystko to musi być zrobione bardzo szybko.

Co zrobić

Po prostu wpisz ul>li*4>a.link, poczekaj, aż ta opcja zostanie podświetlona (jest jedyną na liście rozwijanej) i naciśnij Tab lub Enter. Edytor automatycznie wstawi pełną strukturę. Technika ta znacznie przyspiesza proces pracy, choć na początku może wydawać się czymś zaskakującym.

11. Aktywuj terminal

Trudno wyobrazić sobie pełnoprawny przepływ pracy w VS Code bez użycia terminala.

Sytuacja

Należy otworzyć terminal, co uprości proces wyszukiwania błędów w kodzie (powiadomienia będą wyświetlane w sekcji Problemy), a także umożliwi wygodną interakcję z Gitem, rozproszonym systemem kontroli wersji.

Co zrobić

Użytkownicy systemu Windows powinni nacisnąć kombinację klawiszy Ctrl + `, a użytkownicy systemu macOS powinni nacisnąć ⌃Ctrl + `.

Podsumowując

Zapamiętywanie skrótów klawiszowych jest dość łatwe, gdy już zaczniesz ich używać. Pełną listę skrótów można znaleźć tutaj i tutaj, a skróty są dostępne pod tym linkiem.

Mamy nadzieję, że praca w VS Code będzie dla Ciebie łatwa i przyjemna!