Przewodnik po stylu Airbnb to zestaw wskazówek dotyczących pisania czystego i spójnego kodu. Został wydany w 2012 roku i od tego czasu stał się jednym z najpopularniejszych przewodników po stylach dla projektów JavaScript.
Zawiera zestaw wskazówek dotyczących pisania spójnego kodu, który jest łatwy w utrzymaniu dzięki zastosowaniu różnorodnych stylów zasady dotyczące wcięć, komentarzy, maksymalnej długości linii, konwencji nazewnictwa zmiennych, cudzysłowów i definicji funkcji. Aby skonfigurować przewodnik po stylu Airbnb w projekcie JavaScript, musisz użyć narzędzia do lintingu, takiego jak ESLint.
Zainstaluj ESLint
ESLint to JavaScript o otwartym kodzie źródłowym narzędzie do strzyżenia która pomaga programistom pisać czysty kod poprzez znajdowanie i naprawianie problemów. Może wykrywać problemy w kodzie, takie jak błędy składniowe, nieprawidłowe parametry i niezdefiniowane zmienne. Kiedy uruchamiasz ESLint z
- -naprawić tag, automatycznie identyfikuje i naprawia wszelkie możliwe do naprawienia problemy w kodzie, oszczędzając w ten sposób czas.Możesz użyć ESLint do egzekwowania przewodników stylu, takich jak przewodnik stylu Airbnb.
Aby rozpocząć, uruchom następujące polecenie w terminalu, aby zainstalować ESLint jako zależność programistyczną:
npm install --save-dev eslint eslint-config-airbnb
Następnie zainicjuj ESLint.
npx eslint --init
Pojawią się pytania dotyczące Twojego projektu. Po wyświetleniu monitu:
? Jak chcesz używać EsLint?
Wybierz tę opcję:
> Aby sprawdzić składnię, znaleźć problemy i wymusić styl kodu
Odpowiadaj na kolejne pytania zgodnie ze swoim projektem, aż pojawi się następujący monit.
? Jak chciałbyś zdefiniować styl swojego projektu?
Następnie odpowiedz w następujący sposób.
> Skorzystaj z popularnego przewodnika po stylach
Wybierz przewodnik po stylu Airbnb, aby wyświetlić następny monit.
? Z którego przewodnika po stylu chcesz skorzystać?
> Airbnb:
Na koniec zainstaluj wymagane zależności, wybierając „Tak” w następnym monicie.
Po zakończeniu instalacji powinieneś mieć plik .eslintsrc.json plik w katalogu głównym folderu.
Dostosowywanie przewodnika stylistycznego Airbnb
Przewodnik po stylu Airbnb umożliwia personalizację. Możesz dodać dodatkowe reguły lub zastąpić istniejące reguły w .eslintsrc.json plik konfiguracyjny.
Na przykład, aby zezwolić na maksymalnie 80 znaków w linii, możesz dodać tę regułę w sekcji reguł.
{
„rozciąga się”: [
„wtyczka: reaguj/zalecane”,
"airbnb"
],
"zasady": {
"max-len": ["błąd", { "kod": 80 }]
}
}Uruchamianie ESLint w package.json
Dodaj skrypt w pakiet.json plik do uruchomienia ESLint.
„skrypty”: {
"szarpie": "eslint"
}
Uruchom skrypt lint, aby sprawdzić, czy nie występują błędy lintingu, wykonując to polecenie.
npm run lint
Możesz także dodać skrypt, aby rozwiązać problemy w kodzie za pomocą --naprawić flaga.
„skrypty”: {
"szarpie": "eslint",
„kłaczki: napraw”: "npm run lint -- --fix"
},
Działanie npm run lint: popraw na terminalu automatycznie naprawi wszelkie problemy, które może naprawić linter.
Włącz Linting przy zapisywaniu w kodzie VS
Uruchamianie skryptu za każdym razem, gdy chcesz skasować swój kod, może być nużące. Wykonaj poniższe czynności, aby włączyć linting podczas zapisywania w VS Code.
- Przejdź do zakładki „Rozszerzenia” po lewej stronie okna VS Code.
- Wyszukaj rozszerzenie ESLint i zainstaluj go.
- Po zainstalowaniu rozszerzenia otwórz ustawienia VS Code (Plik > Preferencje > Ustawienia lub naciskając Ctrl +,).
- W edytorze ustawień wyszukaj „działania kodu przy zapisywaniu”.
- Kliknij „Edytuj w settings.json” i dodaj następujące ustawienia do pliku ustawienia.json plik.
{
„editor.codeActionsOnSave”: {
"source.fixAll.eslint": PRAWDA
},
"eslint.sprawdzanie poprawności": [„javascript”],
"eslint.run": „na Zapisz”,
}
Dzięki temu rozszerzenie ESLint może automatycznie naprawić kod podczas zapisywania.
Korzyści z korzystania z przewodnika po stylach
Główną zaletą korzystania z przewodnika po stylu, takiego jak przewodnik po stylu Airbnb, jest to, że pomaga on zachować spójną bazę kodu. Jest to przydatne w zespole, ponieważ programiści mogą łatwo zrozumieć i wnieść wkład w bazę kodu. Pomaga także egzekwować najlepsze praktyki i unikać typowych błędów w kodowaniu.
