Airbnb-stilguiden er et sett med retningslinjer for å skrive ren og konsistent kode. Den ble utgitt i 2012 og har siden blitt en av de mest populære stilguidene for JavaScript-prosjekter.
Den gir et sett med retningslinjer for å skrive konsistent kode som er enkel å vedlikeholde ved å håndheve en rekke stiler regler om innrykk, kommentarer, maksimal linjelengde, variable navnekonvensjoner, anførselstegn og funksjonsdefinisjoner. For å sette opp Airbnb-stilguiden i et JavaScript-prosjekt, må du bruke et loverktøy som ESLint.
Installer ESLint
ESLint er en åpen kildekode JavaScript loverktøy som hjelper utviklere å skrive ren kode ved å finne og fikse problemer. Den kan oppdage problemer i koden din som syntaksfeil, ugyldige parametere og udefinerte variabler. Når du kjører ESLint med - -fikse taggen identifiserer og fikser den automatisk eventuelle fiksbare problemer i koden, og sparer dermed tid.
Du kan bruke ESLint til å håndheve stilguider som Airbnb-stilguiden.
For å komme i gang, kjør følgende kommando i terminalen for å installere ESLint som en dev-avhengighet:
npm install --save-dev eslint eslint-config-airbnb
Initialiser deretter ESLint.
npx eslint --init
Du vil bli spurt om spørsmål om prosjektet ditt. Når du blir bedt med:
? Hvordan vil du bruke EsLint?
Velg dette alternativet:
> For å sjekke syntaks, finn problemer og håndhev kodestil
Svar på de neste spørsmålene i henhold til prosjektet ditt til du kommer over følgende spørsmål.
? Hvordan vil du definere en stil for prosjektet ditt?
Svar deretter som følger.
> Bruk en populær stilguide
Velg Airbnb-stilguiden for neste forespørsel.
? Hvilken stilguide vil du følge?
> Airbnb:
Til slutt, installer de nødvendige avhengighetene ved å velge "Ja" i neste ledetekst.
Når installasjonen er ferdig, bør du ha en .eslintsrc.json filen i roten av mappen din.
Tilpasse Airbnb-stilguiden
Airbnb-stilguiden tillater tilpasning. Du kan legge til flere regler eller overstyre eksisterende regler i .eslintsrc.json konfigurasjonsfil.
For å tillate maksimalt 80 tegn per linje, kan du for eksempel legge til denne regelen i regeldelen.
{
"strekker": [
"plugin: reager/anbefalt",
"airbnb"
],
"regler": {
"max-len": ["feil", { "kode": 80 }]
}
}Kjører ESLint i package.json
Legg til et skript i package.json fil for å kjøre ESLint.
"skript": {
"lo": "eslint"
}
Kjør lint-skriptet for å se etter eventuelle linting-feil ved å utføre denne kommandoen.
npm kjøre lo
Du kan også legge til et skript for å fikse problemer i koden ved å bruke --fastsette flagg.
"skript": {
"lo": "eslint",
"lo: fikse": "npm run lint -- --fix"
},
Løping npm run lint: fix på terminalen vil automatisk fikse eventuelle problemer linter kan fikse.
Aktiver Linting på Lagre i VS-kode
Det kan bli kjedelig å kjøre et skript hver gang du vil linte koden din. Følg trinnene nedenfor for å aktivere linting ved lagring i VS-kode.
- Gå til fanen "Utvidelser" på venstre side av VS-kodevinduet.
- Søk etter ESLint utvidelse og installer den.
- Når utvidelsen er installert, åpner du VS Code-innstillingene (Fil > Innstillinger > Innstillinger eller ved å trykke Ctrl +,).
- I innstillingseditoren, søk etter "kodehandlinger ved lagring".
- Klikk "Rediger i settings.json" og legg til følgende innstillinger i settings.json fil.
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": ekte
},
"eslint.validate": ["javascript"],
"eslint.run": "på Lagre",
}
Dette gjør at ESLint-utvidelsen automatisk fikser koden din når du lagrer.
Fordeler med å bruke en stilguide
Hovedfordelen med å bruke en stilguide som Airbnb-stilguiden er at den hjelper deg å opprettholde en konsistent kodebase. Dette er nyttig i et team da utviklere enkelt kan forstå og bidra til kodebasen. Det hjelper deg også å håndheve beste praksis og unngå vanlige kodefeil.
