W trakcie pisania kodu w VS Code, utrzymanie porządku może nie być zawsze priorytetem. Mimo że poprawne formatowanie nie jest niezbędne do uruchomienia aplikacji, znacząco ułatwia proces debugowania oraz lokalizowania błędów.
W tym artykule omówimy, jak skutecznie formatować kod w VS Code, a także podzielimy się dodatkowymi wskazówkami na temat organizacji kodu.
Jak sformatować kod?
VS Code oferuje wbudowane opcje do formatowania aktualnie edytowanego kodu według ustalonych standardów. Te skróty klawiaturowe nie wymagają instalacji dodatkowych rozszerzeń i można je stosować w dowolnym momencie. Oto informacje na temat użycia tych skrótów:
Na komputerze PC
Formatowanie całego dokumentu:
Otwórz plik z kodem, który chcesz uporządkować.
Naciśnij „Shift + Alt + F”.
Zapisz zmiany, klikając „Plik” w lewym górnym rogu, a następnie wybierając „Zapisz” lub użyj skrótu „Ctrl + S”.
Formatowanie wybranych fragmentów kodu:
W pliku, w którym znajdują się linie kodu, które chcesz sformatować, zaznacz te linie za pomocą myszy.
Naciśnij „Ctrl + K”.
Naciśnij „Ctrl + F”.
Zapisz zmiany, wybierając „Zapisz” w menu Plik lub naciskając „Ctrl + S”.
Pamiętaj, że jeśli naciśniesz „Ctrl + F” bez wcześniejszego użycia „Ctrl + K”, otworzy się menu wyszukiwania. W takim przypadku możesz zamknąć to okno, klikając „x” lub naciskając klawisz Esc.
Przenoszenie linii w górę lub w dół:
Umieść kursor na początku wiersza, który chcesz przesunąć.
Przytrzymaj klawisz Alt.
Aby przesunąć linię w górę, naciśnij strzałkę w górę, a aby przesunąć w dół, naciśnij strzałkę w dół.
Zapisz plik, wybierając „Zapisz” z menu Plik lub używając skrótu „Ctrl + S”.
Zmiana wcięcia pojedynczej linii:
Umieść kursor na początku wiersza, którego wcięcie chcesz zmienić.
Naciśnij „Ctrl + ]”, aby zwiększyć wcięcie.
Naciśnij „Ctrl + [”, aby zmniejszyć wcięcie.
Zapisz zmiany, wybierając „Zapisz” w menu Plik lub naciskając „Ctrl + S”.
Dla Mac
Formatowanie całego dokumentu:
Otwórz plik z kodem, który chcesz sformatować.
Naciśnij „⇧ + ⌥ + F”.
Zapisz zmiany, klikając „Plik” w lewym górnym rogu, a następnie wybierając „Zapisz” lub używając skrótu „⌘ + S”.
Formatowanie tylko wybranego kodu:
Zaznacz fragment dokumentu, który chcesz sformatować.
Naciśnij „⌘ + K”.
Naciśnij „⌘ + F”.
Zapisz zmiany, naciskając „⌘ + S” lub wybierając „Zapisz” z menu Plik w lewym górnym rogu okna.
Pamiętaj, że użycie „⌘ + F” bez wcześniejszego naciśnięcia „⌘ + K” otworzy tylko menu wyszukiwania. Aby je zamknąć, wystarczy nacisnąć „x” po prawej stronie lub klawisz Esc.
Przenoszenie linii w górę lub w dół:
Umieść kursor na początku wiersza, który chcesz przesunąć.
Przytrzymaj klawisz „⌥”.
Aby przesunąć linię w górę, naciśnij strzałkę w górę, a aby przesunąć w dół, naciśnij strzałkę w dół.
Zapisz zmiany, wybierając „Zapisz” z menu Plik lub naciskając „⌘ + S”.
Zmiana wcięcia pojedynczej linii:
Umieść kursor na początku linii, w której chcesz zmienić wcięcie.
Naciśnij „⌘ + ]”, aby zwiększyć wcięcie.
Naciśnij „⌘ + [”, aby zmniejszyć wcięcie.
Zapisz plik, naciskając „⌘ + S” lub wybierając „Zapisz” z menu Plik w lewym górnym rogu.
Automatyczne formatowanie kodu przy zapisywaniu
VS Code nie oferuje wbudowanej opcji, która automatycznie formatuje dokument podczas zapisywania. Można to osiągnąć przez zainstalowanie odpowiedniego rozszerzenia. Najpopularniejszym z takich rozszerzeń jest Prettier, które dostarcza wiele opcji formatowania. Instalacja Prettiera przebiega następująco:
Uruchom VS Code.
Wybierz zakładkę Rozszerzenia w lewym menu, która wygląda jak cztery pudełka. Możesz także wcisnąć „Ctrl + Shift + X” na PC lub „⌘ + ⇧ + X” na Macu.
Wpisz „Prettier” w pasku wyszukiwania na górze menu.
Kliknij przycisk „Instaluj” w prawym dolnym rogu obok ikony Prettier.
Poczekaj na zakończenie instalacji rozszerzenia.
Aby Prettier automatycznie formatował dokumenty przy zapisywaniu, musisz skonfigurować to rozszerzenie. Oto jak to zrobić:
Otwórz okno ustawień, naciskając „Ctrl +” na PC lub „⌘ +” na Mac.
Wpisz „formatter” w pasku wyszukiwania. Powinno to pokazać kilka opcji związanych z formatowaniem.
W ustawieniu „Edytor: Domyślny program formatujący” upewnij się, że wybrano Prettiera. Jeśli pole to jest puste lub VS Code używa innego domyślnego formatera, wybierz „Prettier – Code formatter” z listy. Może być także wymieniony jako „esbenp.prettier-vscode”.
Sprawdź, czy opcja „Edytor: Formatuj przy zapisie” jest zaznaczona. Jeśli nie, włącz tę opcję.
Wpisz „Prettier” w pasku wyszukiwania w ustawieniach.
Przewiń w dół do opcji „Prettier: Require Config”. Upewnij się, że to pole jest zaznaczone, co zapobiega autoformatowaniu dokumentów bez pliku konfiguracyjnego. To ustawienie jest przydatne, gdy pracujesz z kodem, który może mieć własne zasady formatowania.
Możesz dostosować konkretne ustawienia Prettiera zgodnie z własnymi preferencjami. Gdy skończysz, zamknij menu ustawień.
Aby Prettier automatycznie formatował kod przy zapisywaniu, musisz stworzyć plik konfiguracyjny dla każdego projektu. Oto jak to zrobić:
Wybierz główny folder projektu w lewym menu.
Utwórz nowy plik, aby stworzyć plik konfiguracyjny.
Nazwij plik „.prettierrc”.
W pliku wpisz po prostu {}.
Od teraz Prettier będzie automatycznie formatować dokument przy każdym zapisie.
Wskazówki dotyczące organizacji kodu
Choć wcięcia nie są konieczne do prawidłowego działania programu, znacznie ułatwiają debugowanie, dzieląc kod na bardziej zrozumiałe sekcje. Przykładowo, instrukcje warunkowe mogą być wizualnie bardziej przejrzyste dzięki odpowiedniemu wcięciu, co jest przydatne w przypadku lokalizowania błędów logicznych.
Podczas nazywania modułów lub krótkich fragmentów kodu, warto używać opisowych nazw, zamiast nazywać je np. „moduł 1”, „moduł 2” itd. Ułatwia to identyfikację funkcji poszczególnych części kodu.
Zawsze warto stosować komentarze, które mogą być pomocne podczas debugowania. Krótkie opisy lub notatki dla siebie mogą znacząco ułatwić zrozumienie kodu w przyszłości.
Organizacja kodu
Odpowiednie formatowanie projektów nie tylko ułatwia ich zrozumienie, ale także ułatwia identyfikację błędów i utrzymanie porządku w kodzie. Chociaż nie jest to warunek konieczny do działania programu, umiejętność formatowania plików w VS Code jest niewątpliwie korzystna.
Czy masz inne sprawdzone metody formatowania plików w VS Code? Zachęcamy do dzielenia się swoimi uwagami w sekcji komentarzy poniżej.
