Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo. Preberi več.

Airbnb slogovni vodnik je nabor smernic za pisanje čiste in dosledne kode. Izdan je bil leta 2012 in je od takrat postal eden najbolj priljubljenih slogovnih vodnikov za projekte JavaScript.

Zagotavlja nabor smernic za pisanje dosledne kode, ki jo je enostavno vzdrževati z uveljavljanjem različnih slogov pravila o zamikih, komentarjih, največji dolžini vrstice, dogovorih o poimenovanju spremenljivk, narekovajih in definicijah funkcij. Če želite nastaviti stilski vodnik Airbnb v projektu JavaScript, morate uporabiti orodje za linting, kot je ESLint.

Namestite ESLint

ESLint je odprtokodni JavaScript orodje za liniranje ki razvijalcem pomaga pisati čisto kodo z iskanjem in odpravljanjem težav. Zazna lahko težave v vaši kodi, kot so sintaksne napake, neveljavni parametri in nedefinirane spremenljivke. Ko zaženete ESLint z - - popraviti samodejno identificira in odpravi morebitne popravljive težave v kodi in vam tako prihrani čas.

instagram viewer

ESLint lahko uporabite za uveljavitev slogovnih vodnikov, kot je slogovni vodnik Airbnb.

Za začetek zaženite naslednji ukaz v terminalu, da namestite ESLint kot odvisnost razvijalca:

npm namestitev --save-dev eslint eslint-config-airbnb

Nato inicializirajte ESLint.

npx eslint --init

Pozvani boste z vprašanji o vašem projektu. Ob pozivu z:

? Kako želite uporabljati EsLint?

Izberite to možnost:

> Za preverjanje sintakse, iskanje težav in uveljavitev sloga kode

Odgovorite na naslednja vprašanja glede na svoj projekt, dokler ne naletite na naslednji poziv.

? Kako bi radi definirali slog za svoj projekt?

Nato odgovorite na naslednji način.

> Uporabite priljubljen stilski vodnik

Za naslednji poziv izberite stilski vodnik Airbnb.

? Kateremu slogovnemu vodniku želite slediti?
> Airbnb:

Na koncu namestite zahtevane odvisnosti tako, da v naslednjem pozivu izberete »Da«.

Ko je namestitev končana, bi morali imeti a .eslintsrc.json datoteko v korenu vaše mape.

Prilagajanje Airbnb Style Guide

Airbnb stilski vodnik omogoča prilagajanje. Dodate lahko dodatna pravila ali preglasite obstoječa pravila v .eslintsrc.json konfiguracijsko datoteko.

Če želite na primer dovoliti največ 80 znakov na vrstico, lahko to pravilo dodate v razdelek s pravili.

{
"podaljša": [
"vtičnik: odziv/priporočeno",
"airbnb"
],
"pravila": {
"max-len": ["napaka", { "Koda": 80 }]
}
}

Izvajanje ESLint v package.json

Dodajte skript v package.json datoteko za zagon ESLint.

"skripte": {
"lint": "eslint"
}

Zaženite skript lint, da preverite morebitne napake pri lintingu, tako da izvedete ta ukaz.

npm zaženi lint

Dodate lahko tudi skript za odpravljanje težav v kodi z uporabo --popraviti zastava.

"skripte": {
"lint": "eslint",
"lint: popravi": "npm run lint -- --fix"
},

tek npm run lint: popravek na terminalu samodejno odpravi vse težave, ki jih lahko odpravi linter.

Omogoči linting pri shranjevanju v kodi VS

Zagon skripta vsakič, ko želite lint svojo kodo, lahko postane dolgočasno. Sledite spodnjim korakom, da omogočite linting pri shranjevanju v kodi VS.

  1. Pojdite na zavihek »Razširitve« na levi strani okna kode VS.
  2. Poiščite Razširitev ESLint in ga namestite.
  3. Ko je razširitev nameščena, odprite nastavitve kode VS (Datoteka > Nastavitve > Nastavitve ali s pritiskom na Ctrl +,).
  4. V urejevalniku nastavitev poiščite »dejanja kode pri shranjevanju«.
  5. Kliknite »Uredi v settings.json« in dodajte naslednje nastavitve v nastavitve.json mapa.
{
"editor.codeActionsOnSave": {

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

To omogoča razširitvi ESLint, da samodejno popravi vašo kodo, ko shranite.

Prednosti uporabe slogovnega vodnika

Glavna prednost uporabe slogovnega vodnika, kot je slogovni vodnik Airbnb, je, da vam pomaga vzdrževati dosledno osnovo kode. To je uporabno v skupini, saj lahko razvijalci zlahka razumejo in prispevajo k bazi kode. Pomaga vam tudi pri uveljavljanju najboljših praks in izogibanju pogostim napakam pri kodiranju.