Visual Studio Code, popularnie znany jako VS Code, jest jednym z najczęściej używanych edytorów kodu. VS Code ma wbudowaną obsługę Node.js, JavaScript i TypeScript. Możesz jednak użyć różnych rozszerzeń, aby uczynić go dostępnym dla większości innych języków i środowisk wykonawczych.
Microsoft to firma, która opracowała ten darmowy edytor kodu typu open source.
Dzięki tym funkcjom VS Code jest popularny;
- Intellisense: VS Code zapewnia autouzupełnianie kodu i podświetlanie składni.
- Wieloplatformowość: tego edytora kodu można używać w systemach operacyjnych Linux, Windows i macOS.
- Dostępność różnych rozszerzeń: Dostępność różnych rozszerzeń może również przekształcić VS Code w zintegrowane środowisko programistyczne (IDE).
- Obsługa wielu języków: Możesz używać tego narzędzia z prawie wszystkimi językami programowania dzięki rozszerzeniom VS Code.
- Zintegrowany terminal: wbudowany terminal w VS Code umożliwia programistom wykonywanie poleceń Git bezpośrednio z edytora kodu. W ten sposób możesz zatwierdzać, wypychać i pobierać zmiany z tego edytora.
Spis treści:
Automatyczne formatowanie w VS Code
Wymagania wstępne
- VS Code: ten edytor kodu można pobrać bezpłatnie. Jeśli nie masz go zainstalowanego na swoim komputerze, pobierz go z oficjalnej strony, w zależności od systemu operacyjnego.
- Wybierz język, którego chcesz używać: musisz zdecydować, jakiego języka chcesz używać, ponieważ istnieją różne programy formatujące dla różnych języków.
- Formater: VS Code używa rozszerzeń do formatowania kodu. W tym artykule użyjemy Prettier. Możesz jednak użyć dowolnego formatera, który pasuje do używanego języka.
Automatyczne formatowanie to funkcja, która automatycznie formatuje bloki/wiersze kodu lub plik w edytorze kodu w oparciu o określone zasady i wytyczne. Ta funkcja jest oparta na pliku konfiguracyjnym określającym reguły formatowania dotyczące wcięć, podziałów wierszy i odstępów.
Gdy funkcja automatycznego formatowania jest włączona, wszystkie te reguły zostaną zastosowane do wszystkich plików w bazie kodu podczas pisania.
Możesz jednak również wyłączyć automatyczne formatowanie dla określonego bloku kodu, jeśli chcesz, aby wyróżniał się na tle innych. Aby to osiągnąć, możesz umieścić fragment kodu w bloku komentarza, który określa reguły, które mają zostać zastosowane.
Korzyści z automatycznego formatowania kodów w kodzie VS
- Oszczędność czasu: pisanie kodu i formatowanie może być czasochłonne. Automatyczne formatowanie oszczędza czas, dzięki czemu możesz bardziej skoncentrować się na procesie pisania i składni.
- Spójność: mimo że kod źródłowy nie pojawia się po stronie klienta, powinna być pewna spójność. Automatyczne formatowanie jest przydatne, zwłaszcza w przypadku dużych projektów z wieloma współtwórcami.
- Przestrzega najlepszych praktyk: funkcja automatycznego formatowania przydaje się w egzekwowaniu spójnych konwencji wcięć, odstępów i nazewnictwa.
- Łatwe czytanie kodu: Dobrze sformatowany kod jest łatwy do śledzenia podczas przeglądania kodu. Nowi programiści, którzy dołączą do Twojej organizacji, z łatwością zrozumieją dobrze sformatowany kod.
Jak włączyć automatyczne formatowanie w kodzie VS i dostosować go
Wykonaj następujące kroki, aby włączyć automatyczne formatowanie:
Po zainstalowaniu Prettier na twoim kodzie VS możesz włączyć funkcję automatycznego formatowania.
Używamy prostego pliku HTML strony logowania, aby zademonstrować, jak włączyć automatyczne formatowanie.
Użyjemy tego kodu:
<!DOCTYPE html> <html> <head> <title>Login Form</title> </head> <body style> <h2 style="text-align: center; margin-top: 50px;">Login </h2> <form action="" method="POST" style="max-width: 250px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 5px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);"> <label for="email" style="display: block; margin-bottom: 10px;">Enter Email</label> <input type="email" id="email" name="email" required style="width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc;"><br><br> <label for="password" style="display: block; margin-bottom: 10px;">Enter Password</label> <input type="password" id="password" name="password" required style="width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc;"><br><br> <input type="submit" value="Login" style="background-color: #af4c9e; color: white; padding: 10px 20px; border: none; border-radius: 3px; cursor: pointer;"> </form> </body> </html>
Mimo że powyższy kod jest funkcjonalny, jest trudny do odczytania i śledzenia, ponieważ nie jest wcięty zgodnie z oczekiwaniami. Użyjemy Prettier do automatycznego formatowania kodu.
Wykonaj następujące kroki.
3. Wpisz Formatter w pasku wyszukiwania i wybierz Prettier w zakładce Editor:Default Formatter.
4. Zlokalizuj Edytor: Formatuj przy zapisywaniu i zaznacz pole.
5. Zapisz plik HTML, wybierz dane wejściowe w dokumencie HTML, kliknij prawym przyciskiem myszy i wybierz opcję Formatuj dokument.
6. Sprawdź, czy dokument został sformatowany. To rozszerzenie automatycznie sformatuje cały inny kod, który napiszesz w kodzie VS.
6. Dostosuj ustawienia Prettier Configuration: Prettier jest domyślnie skonfigurowany do wykonywania wielu rzeczy. Nadal jednak możesz dostosować go do swoich potrzeb. Przejdź do Ustawień w kodzie VS, wyszukaj Prettier i dostosuj ustawienia do swoich upodobań.
7. Utwórz ładniejszy plik konfiguracyjny: ustawienia skonfigurowane na komputerze mogą różnić się od innych, jeśli pracujesz w zespole. Plik konfiguracyjny Prettier zapewni spójny styl kodu dla twojego projektu. Utwórz plik .prettierrc z rozszerzeniem .json, aby skonfigurować ustawienia projektu. Możemy dodać ten kod do pliku JSON w celach demonstracyjnych;
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
}
Powyższy blok kodu określa cztery rzeczy, końcowe przecinki, szerokość tabulacji, użycie średników oraz to, czy używać pojedynczych, czy podwójnych cudzysłowów. W tym przypadku;
- Końcowy przecinek zostanie dodany tylko wtedy, gdy kod zostanie przetransponowany do es5.
- Szerokość tabulacji, czyli liczba spacji dla każdej tabulacji, jest ustawiona na 4.
- Semi wskazuje, czy należy dodawać średniki do kodu na końcu instrukcji. Ustawiliśmy to jako fałszywe, co oznacza, że średniki nie zostaną dodane.
- W swoim kodzie możesz używać pojedynczych lub podwójnych cudzysłowów. Określiliśmy, że w tym projekcie powinniśmy używać pojedynczych cudzysłowów.
Możesz sprawdzić dokumenty Prettier, aby zrozumieć, jak tworzyć spójne ustawienia konfiguracji.
Najlepsze praktyki dotyczące automatycznego formatowania w VS Code
Użyj odpowiedniego formatu
Mimo że użyliśmy Prettier w tym artykule w celach demonstracyjnych, nie oznacza to, że dotyczy to wszystkich języków. Istnieją setki rozszerzeń formatowania dla VS Code i od Ciebie zależy, które z nich odpowiada Twoim potrzebom. Na przykład programy formatujące, takie jak Prettier i Beautify, pasują do HTML i CSS. Z drugiej strony możesz użyć rozszerzeń Black lub Python, aby sformatować swój kod Pythona.
Używaj spójnego stylu kodu
Jak widziałeś, możesz dostosować ustawienia formatyzatora. Jeśli pracujesz jako zespół, upewnij się, że masz te same konfiguracje, aby utworzyć spójny styl kodu. Najlepszym podejściem jest utworzenie pliku .prettierrc.extension w celu uwzględnienia wszystkich konfiguracji projektu.
Użyj lintersu
Linters można używać do sprawdzania naruszeń stylów, błędów składniowych i błędów programistycznych w kodzie. Połączenie lintersu z automatycznym formatowaniem pozwoli Ci zaoszczędzić dużo czasu i wysiłku związanego z czytelnością kodu i debugowaniem.
Korzystaj ze skrótów klawiaturowych
VS Code ma setki skrótów, które oszczędzają czas podczas formatowania. Możesz nawet dostosować te polecenia do czegoś niezapomnianego.
Sprawdź swój kod przed zatwierdzeniem
Nawet jeśli linting i automatyczne formatowanie mogą rozwiązać niektóre problemy z twoim kodem; nadal musisz przejrzeć swój kod przed wprowadzeniem polecenia zatwierdzenia.
Skróty formatowania kodu
VS Code to wieloplatformowy edytor kodu, którego można używać w systemach Windows, Mac i Linux, takich jak Ubuntu. Możesz użyć poniższych skrótów, aby sformatować cały dokument lub określone podświetlone obszary kodu;
Okna
- Kombinacja Shift + Alt + F formatuje cały dokument.
- Kombinacja Ctrl + K, Ctrl + F formatuje wybraną sekcję kodu. Na przykład div.
System operacyjny Mac
- Kombinacja Shift + Option + F formatuje cały dokument.
- Kombinacja Ctrl + K, Ctrl + F formatuje wybraną sekcję kodu. Na przykład div.
Ubuntu
- Kombinacja Ctrl + Shift + I formatuje cały dokument.
- Kombinacja Ctrl + K, Ctrl + F formatuje wybraną sekcję kodu. Na przykład div.
Pamiętaj jednak, że niektóre z tych skrótów mogą się nie powieść, jeśli dostosujesz kod VS za pomocą różnych skrótów.
Możesz sprawdzić skróty VS Code, wykonując następujące czynności;
- Otwórz kod VS i kliknij element Plik w lewym górnym rogu.
- Przewiń do Preferencji
- Kliknij Skróty klawiaturowe, aby wyświetlić wszystkie skróty, których możesz użyć.
Wniosek
Automatyczne formatowanie może zaoszczędzić dużo czasu, gdy jest włączone. Wybór rozszerzenia będzie się różnić w zależności od używanego języka. Możesz zainstalować wiele formaterów kodu w zależności od języków programowania używanych w projektach.
Zawsze sprawdzaj dokumentację programu formatującego, który wybrałeś dla swojego kodu. Dzięki temu zrozumiesz języki, które obsługuje i jak najlepiej je wykorzystać.
Sprawdź nasz artykuł na temat najlepszych rozszerzeń VS Code, z których powinni korzystać programiści.