Jak korzystać z ESLint dzięki przewodnikowi po stylu JavaScript Airbnb

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.

Zapewnia zestaw wskazówek dotyczących pisania spójnego kodu, który jest łatwy w utrzymaniu dzięki egzekwowaniu różnych reguł stylu dotyczących 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 narzędzie do lintingu JavaScript o otwartym kodzie źródłowym, które 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 tagiem – -fix , automatycznie identyfikuje i naprawia wszelkie możliwe do naprawienia problemy w kodzie, oszczędzając w ten sposób Twój 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


Zostaniesz poproszony o pytania dotyczące Twojego projektu. Po wyświetleniu monitu:

? How would you like to use EsLint?


Wybierz tę opcję:

> To check syntax, find problems and enforce code style


Odpowiadaj na kolejne pytania zgodnie ze swoim projektem, aż pojawi się następujący monit.

? How would you like to define a style for your project?


Następnie odpowiedz w następujący sposób.

> Use a popular style guide


Wybierz przewodnik po stylu Airbnb, aby wyświetlić następny monit.

? Which style guide do you want to follow?
> Airbnb: <https://github.com/airbnb/javascript>


Na koniec zainstaluj wymagane zależności, wybierając „Tak” w następnym monicie.

Po zakończeniu instalacji plik .eslintsrc.json powinien znajdować się 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 pliku konfiguracyjnym .eslintsrc.json .

Na przykład, aby zezwolić na maksymalnie 80 znaków w linii, możesz dodać tę regułę w sekcji reguł.

{
  "extends": [
        "plugin:react/recommended",
        "airbnb"
    ],
  "rules": {
    "max-len": ["error", { "code": 80 }]
  }
}


Uruchamianie ESLint w package.json

Dodaj skrypt w pliku package.json , aby uruchomić ESLint.

"scripts": {
   "lint": "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 naprawić problemy w kodzie, używając flagi –fix .

"scripts": {
    "lint": "eslint",
    "lint:fix": "npm run lint -- --fix"
  },


Uruchomienie npm run lint:fix 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.

1. Przejdź do zakładki „Rozszerzenia” po lewej stronie okna VS Code.
2. Wyszukaj rozszerzenie ESLint i zainstaluj je.
3. Po zainstalowaniu rozszerzenia otwórz ustawienia VS Code (Plik > Preferencje > Ustawienia lub naciskając Ctrl +,).
4. W edytorze ustawień wyszukaj „działania kodu przy zapisywaniu”.
5. Kliknij „Edytuj w settings.json” i dodaj następujące ustawienia do pliku settings.json .

{
 "editor.codeActionsOnSave": {


    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript"],
  "eslint.run": "onSave",
}


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.