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 durch die Durchsetzung einer Vielzahl von Stilen einfach zu warten ist Regeln zu Einrückungen, Kommentaren, maximaler Zeilenlänge, Namenskonventionen für Variablen, Anführungszeichen und Funktionsdefinitionen. 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 fusselndes Werkzeug das hilft Entwicklern, 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 der
- -reparieren -Tag identifiziert und behebt es automatisch alle behebbaren Probleme im Code und spart Ihnen so Zeit.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
Sie werden mit Fragen zu Ihrem Projekt konfrontiert. Bei Aufforderung mit:
? Wie möchten Sie EsLint verwenden?
Wählen Sie diese Option:
> Um die Syntax zu überprüfen, Probleme zu finden und den Codestil durchzusetzen
Beantworten Sie die nächsten Fragen gemäß Ihrem Projekt, bis Sie auf die folgende Aufforderung stoßen.
? Wie möchten Sie einen Stil für Ihr Projekt definieren?
Dann antworten Sie wie folgt.
> Verwenden Sie einen beliebten Styleguide
Wählen Sie den Airbnb-Styleguide für die nächste Eingabeaufforderung aus.
? Welchem Styleguide möchten Sie folgen?
> Airbnb:
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 haben .eslintsrc.json Datei im Stammverzeichnis Ihres Ordners.
Anpassen des Airbnb-Styleguides
Der Styleguide von Airbnb ermöglicht Anpassungen. Sie können zusätzliche Regeln hinzufügen oder vorhandene Regeln überschreiben .eslintsrc.json Konfigurationsdatei.
Um beispielsweise maximal 80 Zeichen pro Zeile zuzulassen, können Sie diese Regel im Abschnitt „Regeln“ hinzufügen.
{
"erweitert": [
"plugin: reagieren/empfohlen",
"airbnb"
],
"Regeln": {
"max-länge": ["Fehler", { "Code": 80 }]
}
}Ausführen von ESLint in package.json
Fügen Sie ein Skript in die Paket.json Datei zum Ausführen von ESLint.
"Skripte": {
"Fussel": "eslint"
}
Führen Sie das Lint-Skript aus, um nach Linting-Fehlern zu suchen, indem Sie diesen Befehl ausführen.
npm laufen lint
Sie können auch ein Skript hinzufügen, um Probleme im Code mithilfe von zu beheben --Fix Flagge.
"Skripte": {
"Fussel": "eslint",
"lint: beheben": "npm run lint -- --fix"
},
Betrieb npm run lint: fix auf dem Terminal behebt automatisch alle Probleme, die der Linter beheben kann.
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.
- Gehen Sie zur Registerkarte „Erweiterungen“ auf der linken Seite des VS Code-Fensters.
- Suche nach dem ESLint-Erweiterung und installieren Sie es.
- Sobald die Erweiterung installiert ist, öffnen Sie die VS Code-Einstellungen (Datei > Einstellungen > Einstellungen oder durch Drücken von Strg +,).
- Suchen Sie im Einstellungseditor nach „Codeaktionen beim Speichern“.
- Klicken Sie auf „In settings.json bearbeiten“ und fügen Sie die folgenden Einstellungen zur Datei hinzu settings.json Datei.
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": WAHR
},
"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.