Jeden łatwy sekret, dzięki któremu Twój kod będzie automatycznie bardziej czytelny

(Ryan Chong) (2 grudnia 2020 r.)

Tabulatory czy spacje?

Oto jest pytanie. Deweloperzy to bardzo uparta gromada. Tak więc, gdy nadejdzie czas, aby zdecydować się na coś, co wydaje się trywialne, jak używanie tabulatorów lub spacji, może to szybko przekształcić się w wojny ognia. Mój obóz kontra twój obóz.

Ale to nie jedyna rzecz, o którą spierają się deweloperzy. W dawnych czasach często otrzymujemy wiele komentarzy na temat naszego formatowania kodu podczas procesu przeglądu kodu.

Na przykład otrzymujemy komentarze dotyczące:

  • Niespójne wcięcia
  • Niespójne użycie pojedynczych i podwójnych cudzysłowów
  • Niespójne wstawianie średników
  • Niespójne użycie tabulatorów i spacji

Na szczęście programiści są również bardzo wydajnymi ludźmi. Nie zajęło im dużo czasu, zanim zdecydowali, że spędzanie dni na kłótniach o to, która z konwencji jest ważniejsza od drugiej, nie jest najlepszym sposobem wykorzystania czasu.

W ten sposób znaleźli rozwiązanie: Code Formatter .

Oto jak to działa. Najpierw zdefiniuj standardową konfigurację. Następnie udostępnij standardową konfigurację wszystkim pracującym nad tym samym projektem. Program formatujący kod automatycznie sformatuje Twój kod na podstawie tej konfiguracji, zanim dotrze do repozytorium kodu. W rezultacie kod każdego będzie spójny, niezależnie od oryginalnego formatowania.

Istnieje wiele odmian formatowania kodu, ale ostatecznie pojawia się standard . Ładniejsze jest przez wielu uważane za standard w rozwoju FE. Za chwilę wyjaśnię, jak to działa.

Ale najpierw porozmawiajmy o instalacji Prettier.

Instalowanie Prettier

Jeśli nie, przejdź do swój ulubiony edytor kodu i zainstaluj rozszerzenie. Używamy Visual Studio Code (VS Code). W programie VS Code po prostu kliknij panel rozszerzeń i wyszukaj hasło „Ładniejsze”. Zobaczysz coś podobnego do poniższego zrzutu ekranu.

Ustawianie ładniejszej konfiguracji

Następnie musimy zdefiniować ładniejszą konfigurację. Ma to na celu wskazanie ładniejszego formatowania kodu za pomocą tabulatorów lub spacji, apostrofów lub podwójnych cudzysłowów i tak dalej. Pełną listę konfiguracji znajdziesz tutaj .

Nasza ładniejsza konfiguracja

Następnie w settings.json VS Code włącz formatowanie javascript a także wybierz, kiedy sformatować.

Nasze ustawienia.json

Alternatywnie możesz również otworzyć wersję GUI (Preferencje> Otwórz ustawienia użytkownika) i ręcznie przełączyć odpowiednie ustawienia.

Nasze ustawienia GUI

Jak działa Prettier

Rozważ przykład poniżej. Pierwszy zrzut ekranu przedstawia fragment kodu javascript w jego niesformatowanej wersji. Trudno jest odgadnąć, gdzie zaczyna się i kończy kod.

Teraz, z programem do formatowania kodu takim jak Prettier, wszystko, co musimy zrobić, to zapisać go i wszystko będzie upiększony ładnie, jak na przykład:

sformatowany kod
After: sformatowany kod

Podsumowanie

Ręczne formatowanie kodu nie jest najlepszym sposobem wykorzystania czasu. Wybierz jeden standard, a następnie wprowadź go jako konfigurację. Wreszcie, nie będziesz spędzać dodatkowego czasu na komentowaniu formatów kodu podczas następnej recenzji kodu.

TeamSpirit zatrudnia starszych / młodszych inżynierów oprogramowania w Singapurze. Jeśli jesteś zainteresowany współpracą z przyjaznymi współpracownikami, którzy cenią Twoje sugestie i dają dużo autonomii, prześlij swoje CV na adres recruit.sg @ teamspirit.com