Visual Studio Code: Popularny edytor kodu
Visual Studio Code, szeroko znany jako VS Code, to jeden z najczęściej wybieranych edytorów kodu przez programistów. Posiada on natywną obsługę Node.js, JavaScript oraz TypeScript. Jednakże, dzięki bogatej bibliotece rozszerzeń, można go dostosować do niemal każdego języka programowania i środowiska uruchomieniowego.
Za rozwój tego darmowego i otwartego edytora kodu odpowiada firma Microsoft.
Popularność VS Code wynika z jego licznych zalet, takich jak:
- Intellisense: Edytor ten oferuje inteligentne podpowiedzi kodu oraz kolorowanie składni, co znacząco przyspiesza pisanie i minimalizuje ryzyko popełnienia błędów.
- Wieloplatformowość: VS Code działa bezproblemowo na systemach Linux, Windows i macOS, zapewniając spójne środowisko pracy niezależnie od używanego systemu.
- Bogactwo rozszerzeń: Dostępność rozmaitych rozszerzeń pozwala przekształcić VS Code w potężne, zintegrowane środowisko programistyczne (IDE), dostosowane do indywidualnych potrzeb.
- Obsługa wielu języków: Dzięki rozszerzeniom, VS Code umożliwia pracę z niemal każdym językiem programowania, zapewniając elastyczność i uniwersalność.
- Zintegrowany terminal: Wbudowany terminal umożliwia programistom wykonywanie poleceń Git bezpośrednio z poziomu edytora, co usprawnia proces zarządzania kodem i zmianami.
Automatyczne formatowanie kodu w VS Code
Zanim zaczniesz, upewnij się, że masz:
- VS Code: Pobierz edytor bezpłatnie z oficjalnej strony i zainstaluj go, jeśli jeszcze go nie masz.
- Wybrany język: Zdecyduj, w jakim języku chcesz pracować, ponieważ formatowanie może się różnić w zależności od języka.
- Formater: VS Code wykorzystuje rozszerzenia do formatowania kodu. W tym artykule użyjemy Prettier, ale możesz wybrać inny, który pasuje do Twoich potrzeb.
Automatyczne formatowanie to funkcja, która porządkuje kod, stosując zdefiniowane zasady dotyczące wcięć, podziałów wierszy oraz odstępów. Zasady te są przechowywane w pliku konfiguracyjnym.
Gdy automatyczne formatowanie jest włączone, reguły są stosowane do wszystkich plików w projekcie podczas pisania kodu.
Możesz także wyłączyć automatyczne formatowanie dla określonych fragmentów kodu, umieszczając je w bloku komentarza, który informuje edytor, jakie reguły ma zastosować.
Korzyści wynikające z automatycznego formatowania kodu
- Oszczędność czasu: Automatyczne formatowanie eliminuje konieczność ręcznego układania kodu, co oszczędza cenny czas i pozwala skupić się na logice i składni.
- Spójność: Zapewnia jednolity wygląd kodu, co jest szczególnie ważne w dużych projektach z wieloma osobami pracującymi nad kodem.
- Zgodność z dobrymi praktykami: Automatyczne formatowanie wymusza stosowanie spójnych konwencji wcięć, odstępów i nazewnictwa.
- Lepsza czytelność: Dobrze sformatowany kod jest łatwiejszy do zrozumienia, co ułatwia przeglądanie kodu i pracę zespołową.
Jak włączyć i dostosować automatyczne formatowanie w VS Code
Aby włączyć automatyczne formatowanie, wykonaj następujące kroki:
Po instalacji Prettier, możesz aktywować automatyczne formatowanie.
Posłużymy się przykładowym kodem HTML, aby zademonstrować, jak działa automatyczne formatowanie.
Użyjemy następującego 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>
Chociaż ten kod działa, jego czytelność jest niska ze względu na brak wcięć. Użyjemy Prettier, aby go sformatować.
Wykonaj te kroki:
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
}
Ten kod ustawia cztery opcje: dodawanie przecinków na końcu, szerokość tabulacji, używanie średników oraz preferencje dotyczące cudzysłowów. W tym przypadku:
- Przecinki na końcu będą dodawane tylko, gdy kod jest transpilowany do es5.
- Szerokość tabulacji, czyli liczba spacji na tabulację, ustawiona jest na 4.
- Semi określa, czy na końcu instrukcji mają być umieszczane średniki (ustawione na fałsz – brak średników).
- W kodzie używane będą pojedyncze cudzysłowy zamiast podwójnych.
Więcej informacji o konfiguracji Prettier znajdziesz w jego dokumentacji.
Najlepsze praktyki automatycznego formatowania w VS Code
Używaj odpowiedniego formatera
Chociaż użyliśmy Prettier jako przykładu, wybierz formater dopasowany do języka, którego używasz. VS Code oferuje mnóstwo rozszerzeń, np. Prettier i Beautify dla HTML i CSS, oraz Black i Python Formatter dla Pythona.
Utrzymuj spójny styl kodu
Dostosuj ustawienia formatera i upewnij się, że cały zespół korzysta z tej samej konfiguracji. Najlepszym rozwiązaniem jest użycie pliku `.prettierrc.extension`, aby zachować spójność w całym projekcie.
Używaj lintera
Lintery pomagają znaleźć błędy składniowe i naruszenia stylu. Połączenie lintera z automatycznym formatowaniem znacznie poprawia jakość kodu i przyspiesza jego debugowanie.
Korzystaj ze skrótów klawiaturowych
VS Code ma wiele skrótów, które przyspieszają pracę. Możesz również dostosować skróty do własnych potrzeb.
Sprawdzaj kod przed zatwierdzeniem
Nawet jeśli automatyczne formatowanie i lintery pomagają w wyłapywaniu błędów, zawsze przeglądaj kod przed zatwierdzeniem zmian.
Skróty klawiszowe do formatowania kodu
VS Code jest dostępny na platformach Windows, macOS i Linux, takich jak Ubuntu. Poniżej przedstawiamy skróty klawiszowe, które pozwalają na formatowanie całego dokumentu lub jego fragmentów.
Windows
- Shift + Alt + F: Formatowanie całego dokumentu.
- Ctrl + K, Ctrl + F: Formatowanie zaznaczonego fragmentu kodu.
macOS
- Shift + Option + F: Formatowanie całego dokumentu.
- Ctrl + K, Ctrl + F: Formatowanie zaznaczonego fragmentu kodu.
Ubuntu
- Ctrl + Shift + I: Formatowanie całego dokumentu.
- Ctrl + K, Ctrl + F: Formatowanie zaznaczonego fragmentu kodu.
Pamiętaj, że niektóre skróty mogą nie działać, jeśli masz dostosowane skróty klawiszowe w VS Code.
Aby sprawdzić skróty w VS Code:
- Otwórz VS Code i kliknij „Plik” w lewym górnym rogu.
- Przejdź do „Preferencje”.
- Wybierz „Skróty klawiszowe”, aby zobaczyć wszystkie dostępne skróty.
Podsumowanie
Automatyczne formatowanie znacząco przyspiesza pracę i poprawia jakość kodu. Wybór formatera zależy od używanego języka. Warto zainstalować kilka rozszerzeń, aby dostosować edytor do potrzeb różnych projektów.
Zawsze warto zapoznać się z dokumentacją wybranego formatera, aby w pełni wykorzystać jego możliwości.
Zachęcamy do zapoznania się z naszym artykułem o najlepszych rozszerzeniach VS Code dla programistów.