Podczas wpisywania poleceń w VS Code próba zachowania porządku może być czasem ostatnią rzeczą, o której myślisz. Chociaż formatowanie nie jest wymagane do uruchomienia programu, bardzo pomaga podczas debugowania i prób lokalizowania błędów.
W tym artykule pokażemy, jak sformatować kod w programie VS Code, wraz z innymi pomocnymi wskazówkami dotyczącymi uporządkowania kodu.
Jak sformatować kod?
VS Code ma wbudowane polecenia do uporządkowania aktualnie wpisanego kodu do standardowego formatu. Te klawisze skrótów nie wymagają dodatkowych rozszerzeń i mogą być używane w dowolnym momencie. Skróty są następujące:
Na PC
Sformatuj cały dokument:
Otwórz plik z kodem, który chcesz sformatować.
Naciśnij „Shift + Alt + F”.
Zapisz zmiany, klikając „Plik” w lewym górnym rogu, a następnie wybierając „Zapisz” lub naciskając „Ctrl + S”.
Formatowanie tylko wybranego kodu:
W pliku z wierszami kodu, który chcesz sformatować, zaznacz wiersze, podświetlając je myszą.
Naciśnij „Ctrl + K”.
Naciśnij „Ctrl + F”.
Zapisz zmiany, wybierając „Zapisz” w menu Plik w lewym górnym rogu lub naciskając „Ctrl + S”.
Pamiętaj, że jeśli naciśniesz „Ctrl + F” bez uprzedniego naciśnięcia „Ctrl + K”, otworzysz menu wyszukiwania. Jeśli tak się stanie, po prostu zamknij kliknięcie przycisku „x” lub naciśnięcie Esc.
Przenieś wiersze w górę lub w dół:
Przesuń kursor na początek wiersza, który chcesz przenieść.
Przytrzymaj klawisz Alt.
Aby przesunąć linię w górę, naciśnij strzałkę w górę. Aby przesunąć go w dół, naciśnij strzałkę w dół.
Zapisz plik, wybierając go z menu Plik w lewym górnym rogu okna lub naciskając „Ctrl + S”.
Zmień wcięcie pojedynczej linii:
Przesuń kursor na początek wiersza, w którym chcesz zmienić wcięcie.
Naciśnij „Ctrl + ]”, aby zwiększyć wcięcie.
Naciśnij „Ctrl + [“ to decrease the indent.
Save changes by selecting Save from the File menu or by pressing “Ctrl + S”.
For Mac
Format the entire document:
Open the file with the code that you wish to format.
Press “⇧ + ⌥ + F.”
Save your changes by clicking “File” on the upper left then choosing “Save” or pressing “⌘ + S”.
Formatting selected code only:
Highlight the part of the document that you wish to format.
Press “⌘ + K”.
Press “⌘ + F”.
Save your file by pressing “⌘ + S” or by choosing “Save” from the File menu on the upper left corner of the window.
Note that using “⌘ + F” without pressing “⌘ + K” beforehand will only open the Find Menu. To close the Find Menu just press “x” on the right side or press Esc.
Move lines up or down:
Place your cursor at the beginning of the line you want to edit.
Hold down the “⌥” Key.
To move a line up, press the up arrow. To move it down, press the down arrow.
Save your changes by choosing “Save” from the File menu or by pressing “⌘ + S”.
Change indentation of a single line:
Move your cursor to the beginning of the line in which you want to change the indention.
Press “⌘ + ]”, aby zwiększyć wcięcie.
Naciśnij „⌘ +[”abyzmniejszyćwcięcie[“todecreasetheindent
Zapisz plik, naciskając „⌘ + S” lub wybierając „Zapisz” z menu Plik w lewym górnym rogu okna.
Kod formatu kodu VS przy zapisie
VS Code nie ma natywnego polecenia, które formatuje dokument podczas zapisywania. Zamiast tego można to zrobić, instalując rozszerzenie formatowania w aplikacji VS Code. Najpopularniejszym z tych rozszerzeń jest Prettier, które zapewnia wiele funkcji formatowania w VS Code. Prettier można zainstalować, wykonując następujące czynności:
Otwórz kod VS.
Kliknij przycisk Rozszerzenia znajdujący się w lewym menu. To jest ikona, która wygląda jak cztery pudełka. Możesz też nacisnąć „Ctrl + Shit + x” na PC lub „⌘ + ⇧ + x” na Macu.
W pasku wyszukiwania u góry menu wpisz Ładniejsze.
Kliknij przycisk Instaluj w prawym dolnym rogu ikony Ładniejsza.
Poczekaj, aż rozszerzenie zakończy instalację.
Zanim Prettier zacznie automatycznie formatować dokument podczas zapisywania, musisz skonfigurować rozszerzenie, aby aktywować tę funkcję. Odbywa się to, wykonując następujące czynności:
Otwórz okno ustawień, naciskając „Ctrl +” na komputerze PC lub „⌘ +” na komputerze Mac.
Na pasku wyszukiwania wpisz formatter. Powinno to wywołać kilka ustawień formatowania.
W ustawieniu Edytor: Domyślny program formatujący upewnij się, że wybrane rozszerzenie jest Ładniejsze. Jeśli nie ma domyślnego programu formatującego lub program VS Code domyślnie używa innego programu formatującego, naciśnij strzałkę w dół. Wybierz „Ładniejsze – Formater kodu” z listy. Alternatywnie, Prettier może pojawić się na liście jako „esbenp.prettier-vscode”.
Upewnij się, że opcja „Edytor: Formatuj przy zapisie” została zaznaczona. Jeśli nie, przełącz znacznik wyboru.
Wpisz „Ładniejsze” w pasku wyszukiwania ustawień.
Przewiń w dół, aż znajdziesz wiersz „Ładniejsza: Wymagaj konfiguracji”. Upewnij się, że pole wyboru zostało zaznaczone. To ustawienie uniemożliwia Prettier formatowanie dokumentów bez pliku konfiguracyjnego. Jest to przydatne, gdy patrzysz na pobrany kod, który może mieć własne reguły formatowania. Zapobiega to przypadkowemu zastąpieniu opcji formatowania. Zwróć uwagę, że pliki bez tytułu będą nadal formatowane automatycznie, nawet jeśli to ustawienie jest zaznaczone.
Możesz edytować określone ustawienia ładniejszego w zależności od swoich preferencji. Gdy skończysz, możesz wyjść z tego menu.
Ponieważ skonfigurowałeś Prettier do automatycznego formatowania tylko wtedy, gdy istnieje plik konfiguracyjny, musisz utworzyć jeden dla każdego projektu. Odbywa się to, wykonując następujące kroki:
Wybierz katalog główny swojego projektu w menu po lewej stronie.
Kliknij przycisk nowego pliku, aby utworzyć plik konfiguracyjny.
Nazwij ten plik „.prettierrc”.
W pliku wpisz po prostu {}.
Ładniejsza będzie teraz automatycznie formatować Twój dokument za każdym razem, gdy go zapiszesz.
Wskazówki dotyczące utrzymywania porządku w kodzie
Chociaż wcięcie nie jest konieczne do uruchomienia programu, może pomóc w debugowaniu, dzieląc kod na łatwe w zarządzaniu moduły. Na przykład instrukcje If-Then lub zagnieżdżone przypadki mogą na tym skorzystać, czyniąc każdą alternatywną opcję wizualnie odróżniającą się od siebie. Przydaje się to, gdy masz do czynienia z błędami logicznymi, a nie składniowymi.
Jeśli nazywasz moduły lub krótkie linijki kodu, przyzwyczaj się do używania opisowych tytułów, zamiast po prostu nazywać je modułem 1, modułem 2 itd. Dzięki temu łatwiej będzie zorientować się, która część kodu pełni konkretną funkcję.
Zawsze dobrze jest wykorzystać komentarze na swoją korzyść. Niezależnie od tego, czy dołączasz krótki opis, czy po prostu dodajesz notatkę dla siebie, komentarze ogromnie pomagają podczas debugowania.
Kod Organizacyjny
Właściwe sformatowanie projektów nie tylko ułatwia ich odczytywanie, ale także pomaga w identyfikowaniu błędów i utrzymuje porządek w kodzie. Chociaż nie jest to konieczne do działania programu, wiedza o tym, jak sformatować pliki w VS Code, jest zdecydowaną zaletą.
Czy znasz inne sposoby formatowania plików w VS Code? Podziel się swoimi przemyśleniami w sekcji komentarzy poniżej.
