Airbnb-stilguiden er et sæt retningslinjer for at skrive ren og konsekvent kode. Den blev udgivet i 2012 og er siden blevet en af de mest populære stilguider til JavaScript-projekter.
Det giver et sæt retningslinjer for at skrive ensartet kode, der er let at vedligeholde ved at håndhæve en række forskellige stilarter regler om indrykning, kommentarer, maksimal linjelængde, variable navnekonventioner, anførselstegn og funktionsdefinitioner. For at konfigurere Airbnb-stilguiden i et JavaScript-projekt skal du bruge et fnugværktøj som ESLint.
Installer ESLint
ESLint er et open source JavaScript fnugværktøj der hjælper udviklere med at skrive ren kode ved at finde og rette problemer. Det kan registrere problemer i din kode som syntaksfejl, ugyldige parametre og udefinerede variabler. Når du kører ESLint med - -rette op tag, identificerer og løser det automatisk eventuelle problemer i koden, der kan løses, og sparer dermed tid.
Du kan bruge ESLint til at håndhæve stilguider som Airbnb-stilguiden.
For at komme i gang skal du køre følgende kommando i terminalen for at installere ESLint som en dev-afhængighed:
npm install --save-dev eslint eslint-config-airbnb
Initialiser derefter ESLint.
npx eslint --init
Du vil blive bedt om at stille spørgsmål om dit projekt. Når du bliver bedt om det med:
? Hvordan vil du gerne bruge EsLint?
Vælg denne mulighed:
> For at tjekke syntaks, find problemer og håndhæv kodestil
Besvar de næste spørgsmål i henhold til dit projekt, indtil du støder på følgende prompt.
? Hvordan vil du gerne definere en stil til dit projekt?
Svar derefter som følger.
> Brug en populær stilguide
Vælg Airbnb-stilguiden for den næste prompt.
? Hvilken stilguide vil du følge?
> Airbnb:
Til sidst skal du installere de nødvendige afhængigheder ved at vælge "Ja" i den næste prompt.
Når installationen er færdig, skal du have en .eslintsrc.json fil i roden af din mappe.
Tilpasning af Airbnb Style Guide
Airbnb-stilguiden tillader tilpasning. Du kan tilføje yderligere regler eller tilsidesætte eksisterende regler i .eslintsrc.json konfigurationsfil.
For at tillade maksimalt 80 tegn pr. linje kan du f.eks. tilføje denne regel i regelafsnittet.
{
"forlænger": [
"plugin: reagere/anbefales",
"airbnb"
],
"regler": {
"max-len": ["fejl", { "kode": 80 }]
}
}Kører ESLint i package.json
Tilføj et script i package.json fil for at køre ESLint.
"scripts": {
"fnug": "eslint"
}
Kør lint-scriptet for at kontrollere for eventuelle linting-fejl ved at udføre denne kommando.
npm køre fnug
Du kan også tilføje et script til at løse problemer i koden ved hjælp af --rette op flag.
"scripts": {
"fnug": "eslint",
"lint: fix": "npm run lint -- --fix"
},
Løb npm run lint: fix på terminalen vil automatisk løse eventuelle problemer, som linter kan løse.
Aktiver linting ved Gem i VS-kode
Det kan blive kedeligt at køre et script, hver gang du vil fnug din kode. Følg nedenstående trin for at aktivere fnug ved gem i VS-kode.
- Gå til fanen "Udvidelser" i venstre side af VS-kodevinduet.
- Søg efter ESLint udvidelse og installere det.
- Når udvidelsen er installeret, skal du åbne VS Code-indstillingerne (Filer > Præferencer > Indstillinger eller ved at trykke på Ctrl +,).
- I indstillingseditoren skal du søge efter "kodehandlinger ved gem".
- Klik på "Rediger i settings.json", og tilføj følgende indstillinger til settings.json fil.
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": rigtigt
},
"eslint.validate": ["javascript"],
"eslint.run": "på Gem",
}
Dette gør det muligt for ESLint-udvidelsen automatisk at rette din kode, når du gemmer.
Fordele ved at bruge en stilguide
Den største fordel ved at bruge en stilguide som Airbnb-stilguiden er, at den hjælper dig med at opretholde en ensartet kodebase. Dette er nyttigt i et team, da udviklere nemt kan forstå og bidrage til kodebasen. Det hjælper dig også med at håndhæve bedste praksis og undgå almindelige kodefejl.