Prettier pomoże Ci wyegzekwować dobre standardy formatowania kodu, więc dlaczego nie połączyć go z VS Code, aby uzyskać lepsze wrażenia z programowania?

Pisanie czystego i czytelnego kodu jest niezbędne, niezależnie od tego, czy pracujesz sam, czy z zespołem programistów. Chociaż wiele czynników wpływa na czytelność kodu, jednym z najważniejszych jest spójne formatowanie kodu.

Ale oto problem: ręczne formatowanie kodu może być absolutnym bólem i bardzo podatne na błędy. Narzędzia takie jak Prettier znacznie ułatwiają formatowanie HTML, CSS, JavaScript i innych języków. Dowiedz się, jak zainstalować i używać rozszerzenia Prettier do formatowania kodu, a także poznać niektóre zaawansowane ustawienia konfiguracji.

Instalowanie ładniejszego

Przed kontynuowaniem upewnij się, że na komputerze jest zainstalowany Node.js. Możesz zainstalować najnowszą wersję z oficjalna strona pobierania Node.js. Pochodzi z menedżer pakietów węzłów (npm) wbudowany, którego będziesz używać do zarządzania pakietami Node.js.

instagram viewer

Po potwierdzeniu, że Node.js jest zainstalowany lokalnie, zacznij od utworzenia pustego katalogu dla swojego projektu. Możesz nazwać katalog ładniejsze-demo.

Następnie przejdź do tego katalogu za pomocą wiersza poleceń, a następnie uruchom następujące polecenie, aby zainicjować projekt Node.js:

npm init -y

To polecenie generuje plik package.json zawierający ustawienia domyślne.

Aby zainstalować rozszerzenie Prettier, uruchom to polecenie terminala:

npm i --save-dev ładniejsza

The --save-dev flag instaluje ładniejszą jako zależność dev, co oznacza, że ​​jest używana tylko podczas programowania.

Teraz, gdy masz go zainstalowanego, możesz zacząć odkrywać, jak działa Prettier, używając go w wierszu poleceń.

Korzystanie z programu Prettier za pomocą wiersza poleceń

Zacznij od utworzenia skrypt.js plik i wypełniając go następującym kodem:

funkcjonowaćsuma(a, b) { powrót a + b }
konst użytkownik = { nazwa: "Kyle", wiek: 27,
 jest programistą: PRAWDA,
 długi klucz: "Wartość",
 więcejDane: 3
}

Aby sformatować kod w tym pliku script.js za pomocą wiersza poleceń, uruchom następujące polecenie:

npx ładniejszy --write script.js

Polecenie ponownie formatuje kod JavaScript w script.js do domyślnego standardu Prettier. To będzie wynik:

funkcjonowaćsuma(a, b) {
powrót a + b;
}
konst użytkownik = {
 nazwa: "Kyle",
 wiek: 27,
 jest programistą: PRAWDA,
 długi klucz: "Wartość",
 więcejDane: 3,
};

Możesz także sformatować znaczniki HTML z wiersza poleceń. Stworzyć indeks.html plik w tym samym katalogu co skrypt.js. Następnie wklej następujący źle sformatowany kod HTML do pliku:




"" alt=""klasa=„duża ikona pogody”>

klasa=„bieżąca temperatura nagłówka”><Zakres>21Zakres></div>
</div>
 </header>

Aby sformatować kod HTML, uruchom to polecenie:

npx ładniejszy --write index.html

To polecenie ponownie formatuje HTML do domyślnego standardu Prettier, co skutkuje następującym kodem:

<nagłówek>
<dz>
<imgźródło=""alt=""klasa=„duża ikona pogody” />
<dzklasa=„bieżąca temperatura nagłówka”><Zakres>21Zakres>dz>
dz>
nagłówek>

Możesz także skorzystać z tzw --sprawdzać flagę, aby sprawdzić, czy kod jest zgodny ze standardami Prettier. Poniższy przykład sprawdza skrypt.js:

npx ładniejszy --check script.js

Jest to przydatne, jeśli chcesz mieć hak przed zatwierdzeniem, aby upewnić się, że ludzie używają Prettier i formatują pliki przed przekazaniem ich do Git. To działa dobrze, gdy przyczyniając się do otwartego oprogramowania.

Integracja Prettier z kodem Visual Studio

Używanie Prettier za pomocą wiersza poleceń może być uciążliwe. Zamiast ręcznie uruchamiać polecenie za każdym razem, gdy chcesz sformatować kod, możesz ustawić automatyczne formatowanie po zmianie pliku. Na szczęście Visual Studio Code (VS Code) ma wbudowany sposób, aby zrobić to za Ciebie.

Idź do Rozszerzenia tab w VS Code i wyszukaj Ładniejszy. Kliknij Prettier — narzędzie do formatowania kodu, zainstaluj go, a następnie włącz.

Przejdź do ustawień VS Code, przechodząc do Plik > Preferencje > Ustawienia. W polu wyszukiwania wyszukaj Ładniejszy. Znajdziesz mnóstwo opcji, które pomogą Ci skonfigurować rozszerzenie Prettier.

Zazwyczaj można sobie poradzić z ustawieniami domyślnymi. Jedyną rzeczą, którą możesz rozważyć zmianę, są średniki (możesz je usunąć, jeśli chcesz). W przeciwnym razie wszystko jest ustawione na domyślne, ale możesz to zmienić w dowolny sposób.

Pamiętaj, aby włączyć oszczędzaj formaty opcję, aby kod w każdym pliku był automatycznie formatowany podczas zapisywania tego pliku. Aby go włączyć, po prostu wyszukaj oszczędzaj formaty i zaznacz pole.

Jeśli nie używasz VSCode lub rozszerzenie nie działa z jakiegoś powodu, możesz pobierz bibliotekę onchange. Spowoduje to uruchomienie polecenia formatowania kodu za każdym razem, gdy zmienisz plik.

Jak ignorować pliki podczas formatowania za pomocą programu Prettier

Gdybyś miał poprowadzić ładniejszą --pisać polecenie w całym folderze, przejdzie przez każdy moduł węzła. Ale nie powinieneś tracić czasu na formatowanie kodu innych osób!

Aby obejść ten problem, utwórz plik .prettierignore plik i dołącz termin moduły_węzłów w pliku. Gdybyś miał uruchomić --pisać polecenie w całym folderze, sformatuje wszystkie pliki z wyjątkiem tych w moduły_węzłów teczka.

Możesz także ignorować pliki z określonym rozszerzeniem. Na przykład, jeśli chcesz zignorować wszystkie pliki HTML, po prostu dodaj *.html Do .prettierignore.

Jak skonfigurować ładniejsze

Możesz skonfigurować sposób, w jaki Prettier ma działać z różnymi opcjami. Jednym ze sposobów jest dodanie a ładniejszy klucz do twojego pakiet.json plik. Wartością będzie obiekt zawierający wszystkie opcje konfiguracyjne:

{
 ...
„skrypty”: {
"test": „echo \„Błąd: nie określono testu\” && wyjście 1”
 },
 ładniejsza: {
// opcje przejdź tutaj
 }
}

Drugą opcją (którą zalecamy) jest utworzenie pliku .ładniejszyrc plik. Ten plik pozwoli Ci na wszelkiego rodzaju dostosowania.

Powiedzmy, że nie lubisz średników. Możesz je usunąć, umieszczając w pliku następujący obiekt:

{
"pół": PRAWDA,
„zastępuje”: [
 {
"akta": ".ts",
„opcje”: {
"pół": FAŁSZ
 }
 }
 ]
}

The zastępuje umożliwia zdefiniowanie niestandardowych przesłonięć dla niektórych plików lub rozszerzeń plików. W tym przypadku mówimy, że wszystkie pliki z końcówką ts (czyli pliki maszynopisu) nie powinny zawierać średników.

Używanie ładniejszego z ESLint

ESLint to narzędzie lintingowe do wykrywania błędów w kodzie JavaScript, a także do formatowania go. Jeśli używasz Prettier, prawdopodobnie nie chciałbyś również używać ESLint do formatowania. Aby używać ich razem, musisz je zainstalować i skonfigurować eslint-config-ładniejsza. To narzędzie wyłącza wszystkie konfiguracje ESLint dla rzeczy, które Prettier już obsługuje.

Najpierw musisz go zainstalować:

npm i --save-dev eslint-config-prettier

Następnie dodaj go do listy rozszerzeń w pliku .eslintrc plik (upewnij się, że jest to ostatnia rzecz na liście):

{
„rozciąga się”: [
„jakaś inna konfiguracja, której używasz”,
„ładniejszy”
 ],
"zasady": {
"akapit": "błąd"
 }
}

Teraz ESLint wyłączy wszystkie reguły, którymi Prettier już się zajmuje, aby zapobiec konfliktom.

Oczyść swoją bazę kodu za pomocą Prettier i ESLint

Prettier to idealne narzędzie do czyszczenia kodu i egzekwowania spójnego formatowania w projekcie. Ustawienie go do pracy z VS Code oznacza, że ​​jest zawsze w zasięgu ręki.

ESLint to niezbędne narzędzie JavaScript, które idzie w parze z Prettier. Zapewnia mnóstwo funkcji i opcji dostosowywania, które wykraczają poza podstawowe formatowanie. Dowiedz się, jak używać ESLint z JavaScriptem, jeśli chcesz być bardziej produktywnym programistą.