Ghidul de stil Airbnb este un set de linii directoare pentru scrierea unui cod curat și consistent. A fost lansat în 2012 și de atunci a devenit unul dintre cele mai populare ghiduri de stil pentru proiecte JavaScript.
Oferă un set de linii directoare pentru scrierea unui cod consistent, care este ușor de întreținut prin aplicarea unei varietăți de stiluri reguli privind indentarea, comentariile, lungimea maximă a liniei, convențiile de denumire a variabilelor, ghilimele și definițiile funcțiilor. Pentru a configura ghidul de stil Airbnb într-un proiect JavaScript, trebuie să utilizați un instrument de listing precum ESLint.
Instalați ESLint
ESLint este un JavaScript open-source instrument de scame care îi ajută pe dezvoltatori să scrie cod curat prin găsirea și remedierea problemelor. Poate detecta probleme în codul dvs., cum ar fi erori de sintaxă, parametri nevalidi și variabile nedefinite. Când rulați ESLint cu
- -remediază etichetă, identifică și remediază automat orice probleme remediabile din cod, economisind astfel timp.Puteți folosi ESLint pentru a aplica ghiduri de stil, cum ar fi ghidul de stil Airbnb.
Pentru a începe, rulați următoarea comandă în terminal pentru a instala ESLint ca dependență de dezvoltare:
npm install --save-dev eslint eslint-config-airbnb
Apoi inițializați ESLint.
npx eslint --init
Vi se vor pune întrebări despre proiectul dvs. Când vi se solicită:
? Cum ați dori să utilizați EsLint?
Selectați această opțiune:
> Pentru a verifica sintaxa, găsiți probleme și aplicați stilul codului
Răspundeți la următoarele întrebări conform proiectului dvs. până când găsiți următorul prompt.
? Cum ți-ar plăcea să definești un stil pentru proiectul tău?
Apoi răspunde după cum urmează.
> Utilizați un ghid de stil popular
Selectați ghidul de stil Airbnb pentru următoarea solicitare.
? Ce ghid de stil vrei să urmezi?
> Airbnb:
În cele din urmă, instalați dependențele necesare selectând „Da” în următoarea solicitare.
Odată ce instalarea se termină, ar trebui să aveți un .eslintsrc.json fișier la rădăcina folderului dvs.
Personalizarea Ghidului de stil Airbnb
Ghidul de stil Airbnb permite personalizarea. Puteți adăuga reguli suplimentare sau puteți înlocui regulile existente în .eslintsrc.json Fișier de configurare.
De exemplu, pentru a permite maximum 80 de caractere pe linie, puteți adăuga această regulă în secțiunea reguli.
{
"se extinde": [
„plugin: reacționează/recomandat”,
"airbnb"
],
"reguli": {
"max-len": ["eroare", { "cod": 80 }]
}
}
Rularea ESLint în package.json
Adăugați un script în pachet.json fișier pentru a rula ESLint.
"scripte": {
"puf": "eslint"
}
Rulați scriptul lint pentru a verifica eventualele erori de lint executând această comandă.
npm rula lint
De asemenea, puteți adăuga un script pentru a remedia problemele din cod utilizând --repara steag.
"scripte": {
"puf": "eslint",
"lint: fix": "npm run lint -- --fix"
},
Alergare npm run lint: fix pe terminal va rezolva automat orice probleme pe care linter le poate rezolva.
Activați Linting la Salvare în VS Code
Rularea unui script de fiecare dată când doriți să vă lăsați codul poate deveni plictisitoare. Urmați pașii de mai jos pentru a activa listing la salvarea în VS Code.
- Accesați fila „Extensii” din partea stângă a ferestrei VS Code.
- Căutați Extensia ESLint și instalați-l.
- Odată ce extensia este instalată, deschideți setările VS Code (Fișier > Preferințe > Setări sau apăsând Ctrl +,).
- În editorul de setări, căutați „acțiuni de cod la salvare”.
- Faceți clic pe „Editați în settings.json” și adăugați următoarele setări la settings.json fişier.
{
„editor.codeActionsOnSave”: {
„source.fixAll.eslint”: Adevărat
},
"eslint.validate": ["javascript"],
"eslint.run": „onSave”,
}
Acest lucru permite extensiei ESLint să vă repare automat codul atunci când salvați.
Beneficiile folosirii unui ghid de stil
Principalul beneficiu al utilizării unui ghid de stil precum ghidul de stil Airbnb este că vă ajută să mențineți o bază de cod consistentă. Acest lucru este util într-o echipă, deoarece dezvoltatorii pot înțelege și pot contribui cu ușurință la baza de cod. De asemenea, vă ajută să aplicați cele mai bune practici și să evitați greșelile comune de codare.