Home-theater-designers
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.
WYKORZYSTAJ WIDEO DNIA PRZEWIŃ, ABY KONTYNUOWAĆ TREŚĆ
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.
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 prettier
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:
function sum(a, b) { return a + b }
const user = { name: "Kyle", age: 27,
isProgrammer: true,
longKey: "Value",
moreData: 3
}
Aby sformatować kod w tym pliku script.js za pomocą wiersza poleceń, uruchom następujące polecenie:
npx prettier --write script.js
Polecenie ponownie formatuje kod JavaScript w script.js do domyślnego standardu Prettier. To będzie wynik:
function sum(a, b) {
return a + b;
}
const user = {
name: "Kyle",
age: 27,
isProgrammer: true,
longKey: "Value",
moreData: 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:
<header>
<div>
<img src="" alt="" class="weather-icon large">
<div class="currentHeaderTemp"><span>21</span></div>
</div>
</header>
Aby sformatować kod HTML, uruchom to polecenie:
jak podłączyć kontroler do konsoli Xbox One?
npx prettier --write index.html
To polecenie ponownie formatuje HTML do domyślnego standardu Prettier, co skutkuje następującym kodem:
<header>
<div>
<img src="" alt="" class="weather-icon large" />
<div class="currentHeaderTemp"><span>21</span></div>
</div>
</header>
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 prettier --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:
{
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
prettier: {
// options go here
}
}
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:
dodaj pinezkę do map google
{
"semi": true,
"overrides": [
{
"files": ".ts",
"options": {
"semi": false
}
}
]
}
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):
{
"extends": [
"some-other-config-you-use",
"prettier"
],
"rules": {
"indent": "error"
}
}
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ą.