Utrzymywanie czystego kodu dzięki ładniejszemu

Formatowanie kodu wydaje się banalnym tematem, ale jest to coś, co może wpłynąć na jakość i poprawność kodu, sposób, w jaki jest on kontrolowany pod kątem wersji oraz na sposób współpracy z innymi osobami. Jeśli jednak nie chcesz grzęznąć w szczegółach, dokąd zmierza każda ostatnia klamra, spróbuj outsourcingu problemu do narzędzia open source, Prettier.

Formatowanie ma znaczenie

Zespoły programistyczne zmarnowały niezliczone godziny w całej historii, spierając się o maksymalną długość linii lub o to, w której linii powinna znajdować się klamra. Niezależnie od osobistych preferencji większość ludzi zgadza się co najmniej w jednym: formatowanie kodu powinno być spójne w całym projekcie.

Ładniejsze to narzędzie zaprojektowane do tego celu. Daj mu trochę kodu, a zwróci ten sam kod, sformatowany w spójny sposób. Prettier ma integrację z edytorem tekstu, narzędzie wiersza poleceń i demo online.

Mówienie we właściwym języku

Przede wszystkim chcesz wiedzieć, czy Prettier jest kompatybilny z językiem lub językami, z którymi zazwyczaj pracujesz. Prettier koncentruje się obecnie na podstawowym zestawie języków poświęconych głównie tworzeniu stron internetowych typu front-end, w tym:

• JavaScript
• HTML
• CSS
• Sass
• Obniżka cen
• YAML

Istnieje również otwarte wsparcie dla dodatkowych języków za pośrednictwem wtyczek.

Wypróbuj ładniej, korzystając z placu zabaw online

Zanim jeszcze spróbujesz zainstalować Prettier, możesz to sprawdzić plac zabaw. Korzystając z interfejsu internetowego, możesz wkleić przykładowy kod i obserwować, jak Prettier go przekształci. Jest to świetny sposób na uzyskanie wrażenia, co faktycznie robi narzędzie, ale może również działać jako podstawowa metoda korzystania z Prettier, jeśli Twoje wymagania są po jaśniejszej stronie.

Domyślnie plac zabaw powinien wyglądać jak dwa podstawowe panele edytora tekstu, jeden po lewej stronie do wprowadzania danych, a drugi po prawej stronie przedstawiający wyjście Prettier. Na początku zobaczysz przykładowy kod, ale możesz go po prostu usunąć i wkleić samodzielnie.

Na przykład spróbuj wprowadzić następujący JavaScript:

(funkcja ()
{
window.alert ('ok')
}())

Ładniejszy powinien zamienić go na:

(funkcja () {
window.alert ("ok");
})();

Zauważ, że domyślnie zmiany, które wprowadza Prettier, obejmują:

• Konwersja ciągów znaków w apostrofach w cudzysłowy
• Dodawanie średników
• Zamiana wcięć na dwie spacje

W lewym dolnym rogu znajduje się przycisk umożliwiający przeglądanie opcji. W poprzednim przykładzie spróbuj dostosować szerokość karty, przełączając - pojedynczy cudzysłów flaga pod Wspólnylub przełączanie --no-semi flaga pod JavaScript.

Konfigurowanie opcji

Ładniejsza jest opisana jako „uparta”, świadomy wybór projektu, który oznacza poświęcenie kontroli nad szczegółami dla prostoty i spójności. Został zaprojektowany tak, abyś mógł go skonfigurować, a potem o nim zapomnieć, zamiast zajmować się każdym szczegółem formatowania kodu. (Aby uzyskać alternatywę zapewniającą znacznie bardziej szczegółową kontrolę nad każdym szczegółem formatowania, wypróbuj eslint.)

Jednak autorzy uznają również, że niektóre decyzje mają wpływ funkcjonalny nie tylko na wygląd kodu. Niektóre opcje - w tym niektóre do celów starszych - pozostają, więc powinieneś przynajmniej zrozumieć, co robią, nawet jeśli używasz Prettier w stanie domyślnym.

Najlepszy sposób zarządzania Ładniejsze opcje polega na zapisaniu ich w pliku konfiguracyjnym. Jest wiele sposobów, aby to zorganizować, ale zacznij od utworzenia pliku o nazwie .prettierrc.json w lokalnym katalogu projektu. Może zawierać dowolną z obsługiwanych opcji w standardowym obiekcie JSON, np.

{
„tabWidth”: 8
}

Prettier odczyta ten sam plik konfiguracyjny, niezależnie od tego, czy uruchomisz go za pomocą wiersza poleceń, czy obsługiwanego edytora tekstu.

Używając przędzy lub npm, instalacja powinna być prosta. Do przędzy:

$ yarn global dodaje ładniej

A dla npm:

$ npm install --global ładniejszy

Po zainstalowaniu Prettier na całym świecie powinieneś móc wpisać:

$ ładniejsza

Domyślnie pojawi się ekran z tekstem pomocy, który potwierdzi, że narzędzie jest zainstalowane i działa poprawnie.

Czyszczenie pliku

Aby sformatować plik, użyj polecenia podobnego do:

$ ładniejsze --write nazwa_pliku.js

Spowoduje to nadpisanie oryginalnego pliku, co jest często najwygodniejszym podejściem. Alternatywnie możesz po prostu chcieć ładniej działać na każdym pliku w projekcie:

$ ładniejsze --write.

Ładniejszy będzie działać we wszystkich plikach w bieżącym katalogu, formatując wszystkie rozpoznane.

Możesz również wydrukować wynik na standardowe wyjście, zamiast zmieniać oryginalny plik, co pozwala na zapisanie wyniku w innym pliku lub przekierowanie go w inne miejsce:

$ ładniejszy test.js> test2.js

Sprawdzanie pliku

Aby uzyskać Ładniejszy raport o czystości kodu bez faktycznego wprowadzania żadnych zmian, użyj --czek flag z jedną nazwą pliku lub wieloma:

$ ładniejsze --check.

Otrzymasz wiersz danych wyjściowych dla każdego pliku, który nie pasuje do oczekiwanego formatu, zgodnie z konfiguracją Prettier:

Sprawdzanie formatowania ...
[ostrzec] .prettierrc
[ostrzec] .prettierrc.json
[ostrzeżenie] Problemy ze stylem kodu znalezione w powyższych plikach. Zapomniałeś uruchomić Prettier?

Opcje wiersza poleceń

Standardowe opcje ładniejsze są dostępne jako opcje wiersza poleceń, jeśli ich potrzebujesz. Oto przykład, w jaki sposób - pojedynczy cudzysłów flaga wpływa na wyjście:

$ ładniejszy tmp.js
function example () {
console.log ("witaj, świecie");
}
$ ładniejsze --single-quote tmp.js
function example () {
console.log ('witaj, świecie');
}

Otrzymywać pomoc

Narzędzie wiersza poleceń zapewnia pomoc informacyjną na temat dowolnej opcji za pośrednictwem rozszerzenia --Wsparcie flaga:

$ ładniejsze --help końcowy-przecinek
--trailing-przecinek 
W przypadku wielu linii drukuj końcowe przecinki wszędzie tam, gdzie to możliwe.
Prawidłowe opcje:
es5 Końcowe przecinki, jeśli są poprawne w ES5 (obiekty, tablice itp.)
none Bez końcowych przecinków.
wszystkie końcowe przecinki, o ile to możliwe (w tym argumenty funkcji).
Domyślnie: es5

Korzystanie z edytora tekstu

Po zainstalowaniu Prettier możesz go używać w różnych scenariuszach, w zależności od tego, jakiego zestawu narzędzi już używasz. Możliwe, że używasz edytora tekstu. Prettier ma wiązania dla większości popularnych, więc oto jak skonfigurować trzy z nich:

Wysublimowany tekst

JsPrettier to wtyczka Sublime Text, która sprawia, że ​​Prettier jest dostępny w edytorze. Chociaż istnieje kilka różnych sposobów instalowania JsPrettier, zalecamy użycie metody kontroli pakietów. Musisz mieć już zainstalowany Prettier, następnie otwórz paletę poleceń Sublime Text i wybierz „Kontrola pakietu: Zainstaluj pakiet”:

Następnie wyszukaj „jsprettier” i kliknij, aby go zainstalować:

Po zainstalowaniu JsPrettier możesz kliknąć prawym przyciskiem myszy dowolny otwarty plik, aby go sformatować. Możesz także ustawić wartość auto_format_on_save do prawdziwe w ustawieniach JsPrettier, co spowoduje, że JsPrettier automatycznie wyczyści wszystkie zgodne pliki po zapisaniu ich w Sublime Text.

Atom

Instalacja dla Atom jest bardzo podobna do Sublime Text: po prostu użyj wbudowanego menedżera pakietów edytora, aby zainstalować ładniejszy atom:

Po zainstalowaniu, użycie jest znajome: skrót lub pozycja menu umożliwia formatowanie pliku na żądanie, podczas gdy ustawienie Atom pozwala automatycznie uruchamiać Prettier za każdym razem, gdy plik jest zapisywany.

Krzepkość

Vim to bardzo potężny edytor oparty na linii poleceń, który nie jest odpowiedni dla początkujących. Uzyskanie ładniejszej pracy z vimem jest odpowiednio skomplikowane, ale to tylko kilka kroków:

mkdir -p ~ / .vim / pack / plugins / start
git clone https://github.com/prettier/vim-prettier \
~ / .vim / pack / plugins / start / vim-ładniejszy

Git to prawdopodobnie najłatwiejszy sposób na pobranie niezbędnych plików, ale jakikolwiek sposób na umieszczenie vima ładniejszego w tym katalogu startowym powinien wykonać pracę.

Po zainstalowaniu Prettier uruchomi się automatycznie, gdy plik zostanie zapisany w vi. Można go również uruchomić ręcznie w dowolnym momencie za pośrednictwem Ładniejsze Komenda:

Co powinno spowodować wyczyszczenie pliku:

Zintegruj ładniej ze swoim projektem

Korzystanie z programu formatującego kod, takiego jak Prettier, może pomóc w utrzymaniu bazy kodu, która jest łatwiejsza do odczytania. Może również pomóc w uniknięciu debat na temat tego, jakiego stylu użyć podczas kodowania - po prostu zleć te decyzje firmie Prettier!

Wreszcie, można skonfigurować hak git, aby zapewnić, że kod zawsze zostanie wyczyszczony, gdy zostanie zatwierdzony w repozytorium projektu. Poszczególni programiści mogą dowolnie formatować swój kod w dowolny sposób, ale centralna kopia zawsze będzie czysta i spójna.

nano vs. Vim: Porównanie najlepszych edytorów tekstu terminala

Szukasz edytora tekstu terminala dla systemu Linux? Główny wybór to Vim i nano! Oto jak się porównują.

O autorze