So verwenden Sie ESLint mit dem JavaScript-Styleguide von Airbnb

Der Styleguide von Airbnb ist eine Reihe von Richtlinien zum Schreiben sauberen und konsistenten Codes. Es wurde 2012 veröffentlicht und hat sich seitdem zu einem der beliebtesten Styleguides für JavaScript-Projekte entwickelt.

Es bietet eine Reihe von Richtlinien zum Schreiben von konsistentem Code, der leicht zu pflegen ist, indem eine Vielzahl von Stilregeln für Einzüge, Kommentare, maximale Zeilenlänge, Namenskonventionen für Variablen, Anführungszeichen und Funktionsdefinitionen durchgesetzt werden. Um den Styleguide von Airbnb in einem JavaScript-Projekt einzurichten, müssen Sie ein Linting-Tool wie ESLint verwenden.

ESLint installieren

ESLint ist ein Open-Source-JavaScript-Linting-Tool, das Entwicklern hilft, sauberen Code zu schreiben, indem es Probleme findet und behebt. Es kann Probleme in Ihrem Code wie Syntaxfehler, ungültige Parameter und undefinierte Variablen erkennen. Wenn Sie ESLint mit dem Tag – -fix ausführen , werden alle behebbaren Probleme im Code automatisch identifiziert und behoben, wodurch Sie Zeit sparen.

Sie können ESLint verwenden, um Styleguides wie den Airbnb-Styleguide durchzusetzen.

Führen Sie zunächst den folgenden Befehl im Terminal aus, um ESLint als Dev-Abhängigkeit zu installieren:

npm install --save-dev eslint eslint-config-airbnb


Initialisieren Sie dann ESLint.

npx eslint --init


Ihnen werden Fragen zu Ihrem Projekt gestellt. Bei Aufforderung mit:

? How would you like to use EsLint?


Wählen Sie diese Option:

> To check syntax, find problems and enforce code style


Beantworten Sie die nächsten Fragen gemäß Ihrem Projekt, bis Sie auf die folgende Aufforderung stoßen.

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


Dann antworten Sie wie folgt.

> Use a popular style guide


Wählen Sie den Airbnb-Styleguide für die nächste Eingabeaufforderung aus.

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


Installieren Sie abschließend die erforderlichen Abhängigkeiten, indem Sie in der nächsten Eingabeaufforderung „Ja“ auswählen.

Sobald die Installation abgeschlossen ist, sollten Sie eine .eslintsrc.json -Datei im Stammverzeichnis Ihres Ordners haben.

Anpassen des Airbnb-Styleguides

Der Styleguide von Airbnb ermöglicht Anpassungen. Sie können zusätzliche Regeln hinzufügen oder vorhandene Regeln in der Konfigurationsdatei .eslintsrc.json überschreiben.

Um beispielsweise maximal 80 Zeichen pro Zeile zuzulassen, können Sie diese Regel im Abschnitt „Regeln“ hinzufügen.

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


Ausführen von ESLint in package.json

Fügen Sie ein Skript in der Datei „ package.json “ hinzu , um ESLint auszuführen.

"scripts": {
   "lint": "eslint"
}


Führen Sie das Lint-Skript aus, um nach Linting-Fehlern zu suchen, indem Sie diesen Befehl ausführen.

npm run lint


Sie können auch ein Skript hinzufügen, um Probleme im Code zu beheben, indem Sie das Flag –fix verwenden.

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


Wenn Sie npm run lint:fix auf dem Terminal ausführen, werden alle Probleme, die der Linter beheben kann, automatisch behoben.

Linting beim Speichern in VS Code aktivieren

Das Ausführen eines Skripts jedes Mal, wenn Sie Ihren Code linten möchten, kann mühsam werden. Führen Sie die folgenden Schritte aus, um Linting beim Speichern in VS Code zu aktivieren.

1. Gehen Sie zur Registerkarte „Erweiterungen“ auf der linken Seite des VS Code-Fensters.
2. Suchen Sie nach der ESLint-Erweiterung und installieren Sie sie.
3. Sobald die Erweiterung installiert ist, öffnen Sie die VS Code-Einstellungen (Datei > Einstellungen > Einstellungen oder durch Drücken von Strg +,).
4. Suchen Sie im Einstellungseditor nach „Codeaktionen beim Speichern“.
5. Klicken Sie auf „In settings.json bearbeiten“ und fügen Sie die folgenden Einstellungen zur Datei settings.json hinzu.

{
 "editor.codeActionsOnSave": {


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


Dadurch kann die ESLint-Erweiterung Ihren Code beim Speichern automatisch reparieren.

Vorteile der Verwendung eines Styleguides

Der Hauptvorteil der Verwendung eines Styleguides wie des Airbnb-Styleguides besteht darin, dass er Ihnen hilft, eine konsistente Codebasis aufrechtzuerhalten. Dies ist in einem Team nützlich, da Entwickler die Codebasis leicht verstehen und dazu beitragen können. Es hilft Ihnen auch, Best Practices durchzusetzen und häufige Programmierfehler zu vermeiden.