Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen. Lees verder.

De Airbnb-stijlgids is een set richtlijnen voor het schrijven van schone en consistente code. Het werd uitgebracht in 2012 en is sindsdien een van de meest populaire stijlgidsen voor JavaScript-projecten geworden.

Het biedt een reeks richtlijnen voor het schrijven van consistente code die gemakkelijk te onderhouden is door een verscheidenheid aan stijlen af ​​te dwingen regels voor inspringingen, opmerkingen, maximale regellengte, naamgevingsconventies voor variabelen, aanhalingstekens en functiedefinities. Om de Airbnb-stijlgids in een JavaScript-project in te stellen, heb je een linting-tool zoals ESLint nodig.

Installeer ESLint

ESLint is een open-source JavaScript pluizend hulpmiddel waarmee ontwikkelaars schone code kunnen schrijven door problemen op te sporen en op te lossen. Het kan problemen in uw code detecteren, zoals syntaxisfouten, ongeldige parameters en ongedefinieerde variabelen. Wanneer u ESLint uitvoert met de

instagram viewer
- -repareren tag, identificeert het automatisch eventuele fixeerbare problemen in de code en lost het op, waardoor u tijd bespaart.

U kunt ESLint gebruiken om stijlgidsen zoals de Airbnb-stijlgids af te dwingen.

Voer om te beginnen de volgende opdracht uit in de terminal om ESLint te installeren als een dev-afhankelijkheid:

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

Initialiseer vervolgens ESLint.

npx eslint --init

U krijgt vragen over uw project. Wanneer gevraagd met:

? Hoe wilt u EsLint gebruiken?

Selecteer deze optie:

> Om de syntaxis te controleren, problemen op te sporen en codestijl af te dwingen

Beantwoord de volgende vragen volgens uw project totdat u de volgende prompt tegenkomt.

? Hoe zou u een stijl voor uw project willen definiëren?

Antwoord dan als volgt.

> Gebruik een populaire stijlgids

Selecteer de Airbnb-stijlgids voor de volgende prompt.

? Welke stijlgids wil jij volgen?
> Airbnb:

Installeer ten slotte de vereiste afhankelijkheden door "Ja" te selecteren in de volgende prompt.

Zodra de installatie is voltooid, zou u een .eslintsrc.json bestand in de hoofdmap van uw map.

De Airbnb-stijlgids aanpassen

De Airbnb-stijlgids maakt maatwerk mogelijk. U kunt aanvullende regels toevoegen of bestaande regels overschrijven in de .eslintsrc.json configuratiebestand.

Als u bijvoorbeeld maximaal 80 tekens per regel wilt toestaan, kunt u deze regel toevoegen in het gedeelte Regels.

{
"breidt zich uit": [
"plug-in: reageren/aanbevolen",
"airbnb"
 ],
"reglement": {
"max-lens": ["fout", { "code": 80 }]
 }
}

ESLint uitvoeren in package.json

Voeg een script toe aan het pakket.json bestand om ESLint uit te voeren.

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

Voer het lint-script uit om te controleren op linting-fouten door deze opdracht uit te voeren.

npm voert lint uit

U kunt ook een script toevoegen om problemen in de code op te lossen met behulp van de --repareren vlag.

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

Rennen npm run lint: repareren op de terminal lost automatisch alle problemen op die de linter kan oplossen.

Linting inschakelen bij opslaan in VS-code

Het uitvoeren van een script elke keer dat u uw code wilt pluizen, kan vervelend worden. Volg de onderstaande stappen om linting in te schakelen bij opslaan in VS Code.

  1. Ga naar het tabblad "Extensies" aan de linkerkant van het VS Code-venster.
  2. Zoek naar de ESLint-extensie en installeer het.
  3. Nadat de extensie is geïnstalleerd, opent u de VS Code-instellingen (Bestand > Voorkeuren > Instellingen of door op Ctrl +, te drukken).
  4. Zoek in de instellingeneditor naar "code-acties bij opslaan".
  5. Klik op "Bewerken in settings.json" en voeg de volgende instellingen toe aan het instellingen.json bestand. 
{
"editor.codeActionsOnSave": {

"source.fixAll.eslint": WAAR
 },
"eslint.valideren": ["javascript"],
"eslint.run": "opOpslaan",
}

Hierdoor kan de ESLint-extensie uw code automatisch corrigeren wanneer u opslaat.

Voordelen van het gebruik van een stijlgids

Het belangrijkste voordeel van het gebruik van een stijlgids zoals de Airbnb-stijlgids is dat het je helpt een consistente codebasis te behouden. Dit is handig in een team, omdat ontwikkelaars de codebasis gemakkelijk kunnen begrijpen en eraan kunnen bijdragen. Het helpt u ook bij het handhaven van best practices en het voorkomen van veelvoorkomende codeerfouten.