„Airbnb“ stiliaus vadovas yra švaraus ir nuoseklaus kodo rašymo gairių rinkinys. Jis buvo išleistas 2012 m. ir nuo tada tapo vienu populiariausių „JavaScript“ projektų stiliaus vadovų.
Jame pateikiamos gairės, kaip rašyti nuoseklų kodą, kurį lengva prižiūrėti naudojant įvairius stilius taisyklės dėl įtraukų, komentarų, didžiausio eilutės ilgio, kintamųjų įvardijimo susitarimų, kabučių ir funkcijų apibrėžimų. Norėdami nustatyti „Airbnb“ stiliaus vadovą „JavaScript“ projekte, turite naudoti įrankį, pvz., ESLint.
Įdiekite ESLint
ESLint yra atvirojo kodo „JavaScript“. pūkavimo įrankis kuri padeda kūrėjams rašyti švarų kodą ieškant ir ištaisant problemas. Jis gali aptikti kodo problemas, pvz., sintaksės klaidas, netinkamus parametrus ir neapibrėžtus kintamuosius. Kai paleisite ESLint su - - pataisyti žymą, ji automatiškai identifikuoja ir ištaiso visas ištaisomas kodo problemas, taip sutaupant jūsų laiko.
Galite naudoti ESLint, kad įgyvendintumėte stiliaus vadovus, pvz., Airbnb stiliaus vadovą.
Norėdami pradėti, terminale paleiskite šią komandą, kad įdiegtumėte ESLint kaip kūrėjo priklausomybę:
npm install --save-dev eslint eslint-config-airbnb
Tada inicijuokite ESLint.
npx eslint --init
Jums bus pasiūlyta klausimų apie jūsų projektą. Kai būsite paraginti:
? Kaip norėtumėte naudoti EsLint?
Pasirinkite šią parinktį:
> Norėdami patikrinti sintaksę, raskite problemų ir pritaikykite kodo stilių
Atsakykite į kitus klausimus pagal savo projektą, kol pamatysite šį raginimą.
? Kaip norėtumėte apibrėžti savo projekto stilių?
Tada atsakykite taip.
> Naudokite populiarų stiliaus vadovą
Norėdami gauti kitą raginimą, pasirinkite Airbnb stiliaus vadovą.
? Kokiu stiliaus vadovu norite vadovautis?
> Airbnb:
Galiausiai įdiekite reikiamas priklausomybes, kitame raginime pasirinkdami „Taip“.
Kai diegimas bus baigtas, turėtumėte turėti a .eslintsrc.json failą aplanko šaknyje.
„Airbnb“ stiliaus vadovo pritaikymas
„Airbnb“ stiliaus vadovas leidžia tinkinti. Galite pridėti papildomų taisyklių arba nepaisyti esamų taisyklių .eslintsrc.json konfigūracijos failą.
Pavyzdžiui, norėdami leisti ne daugiau kaip 80 simbolių eilutėje, galite įtraukti šią taisyklę taisyklių skiltyje.
{
"pratęsia": [
"įskiepis: reaguoti / rekomenduojama",
"airbnb"
],
"taisyklės": {
"Max-len": ["klaida", { "kodas": 80 }]
}
}Paleisti ESLint pakete.json
Pridėkite scenarijų į package.json failą, kad paleistumėte ESLint.
"scenarijai": {
"pūkas": "eslintas"
}
Vykdydami šią komandą paleiskite lint scenarijų, kad patikrintumėte, ar nėra liniavimo klaidų.
npm paleisti pūkelį
Taip pat galite pridėti scenarijų, kad išspręstumėte kodo problemas naudodami -- pataisyti vėliava.
"scenarijai": {
"pūkas": "eslintas",
"pūkas: pataisyti": "npm run lint -- --fix"
},
Bėgimas npm paleisti pūkelį: pataisyti terminale automatiškai išspręs visas problemas, kurias gali išspręsti linteris.
Įgalinti „Linkting“ išsaugoti VS kode
Scenarijaus paleidimas kiekvieną kartą, kai norite įvesti kodą, gali būti varginantis. Atlikite toliau nurodytus veiksmus, kad įgalintumėte brūkšniavimą išsaugodami VS kode.
- Eikite į skirtuką „Plėtiniai“, esantį kairėje VS kodo lango pusėje.
- Ieškokite ESLint plėtinys ir įdiekite jį.
- Įdiegę plėtinį atidarykite VS kodo nustatymus (Failas > Nuostatos > Nustatymai arba paspausdami Ctrl +,).
- Nustatymų rengyklėje ieškokite „kodo veiksmai išsaugant“.
- Spustelėkite „Redaguoti in settings.json“ ir pridėkite toliau nurodytus nustatymus settings.json failą.
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": tiesa
},
"eslint.validate": ["javascript"],
"eslint.run": "OnSave",
}
Tai leidžia ESLint plėtiniui automatiškai pataisyti kodą, kai išsaugote.
Stiliaus vadovo naudojimo pranašumai
Pagrindinis stiliaus vadovo, pvz., Airbnb stiliaus vadovo, naudojimo pranašumas yra tas, kad jis padeda išlaikyti nuoseklią kodo bazę. Tai naudinga komandoje, nes kūrėjai gali lengvai suprasti kodo bazę ir prie jos prisidėti. Tai taip pat padeda įgyvendinti geriausią praktiką ir išvengti įprastų kodavimo klaidų.