Sprievodca štýlom Airbnb je súbor pokynov na písanie čistého a konzistentného kódu. Bol vydaný v roku 2012 a odvtedy sa stal jedným z najpopulárnejších štýlových sprievodcov pre projekty JavaScript.
Poskytuje súbor usmernení na písanie konzistentného kódu, ktorý sa dá ľahko udržiavať presadzovaním rôznych štýlov pravidlá pre odsadenie, komentáre, maximálnu dĺžku riadku, konvencie pomenovania premenných, úvodzovky a definície funkcií. Ak chcete nastaviť sprievodcu štýlmi Airbnb v projekte JavaScript, musíte použiť nástroj na lining, ako je ESLint.
Nainštalujte ESLint
ESLint je open source JavaScript nástroj na lintovanie ktorý pomáha vývojárom písať čistý kód hľadaním a opravou problémov. Dokáže odhaliť problémy vo vašom kóde, ako sú syntaktické chyby, neplatné parametre a nedefinované premenné. Keď spustíte ESLint s - - opraviť automaticky identifikuje a opraví všetky opraviteľné problémy v kóde, čím vám ušetrí čas.
ESLint môžete použiť na vynútenie sprievodcov štýlmi, ako je sprievodca štýlmi Airbnb.
Ak chcete začať, spustite v termináli nasledujúci príkaz a nainštalujte ESLint ako závislosť pre vývojárov:
npm install --save-dev eslint eslint-config-airbnb
Potom inicializujte ESLint.
npx eslint --init
Budete vyzvaní na otázky týkajúce sa vášho projektu. Keď sa zobrazí výzva s:
? Ako by ste chceli používať EsLint?
Vyberte túto možnosť:
> Ak chcete skontrolovať syntax, nájsť problémy a vynútiť štýl kódu
Odpovedzte na ďalšie otázky podľa vášho projektu, kým sa nezobrazí nasledujúca výzva.
? Ako by ste chceli definovať štýl pre váš projekt?
Potom odpovedzte nasledovne.
> Použite populárny sprievodca štýlom
Pre ďalšiu výzvu vyberte sprievodcu štýlom Airbnb.
? Ktorým štýlovým sprievodcom sa chcete riadiť?
> Airbnb:
Nakoniec nainštalujte požadované závislosti výberom „Áno“ v ďalšej výzve.
Po dokončení inštalácie by ste mali mať a .eslintsrc.json súbor v koreňovom adresári vášho priečinka.
Prispôsobenie sprievodcu štýlom Airbnb
Sprievodca štýlom Airbnb umožňuje prispôsobenie. Môžete pridať ďalšie pravidlá alebo prepísať existujúce pravidlá v .eslintsrc.json konfiguračný súbor.
Ak chcete napríklad povoliť maximálne 80 znakov na riadok, môžete toto pravidlo pridať do sekcie pravidiel.
{
"predlžuje": [
"plugin: reagovať/odporúčané",
"airbnb"
],
"pravidlá": {
"max-len": ["chyba", { "kód": 80 }]
}
}Spustenie ESLint v package.json
Pridajte skript do package.json súbor na spustenie ESLint.
"skriptá": {
"žmolky": "eslint"
}
Spustite skript lint a skontrolujte prípadné chyby lintovania vykonaním tohto príkazu.
npm spustiť vlákna
Môžete tiež pridať skript na opravu problémov v kóde pomocou --opraviť vlajka.
"skriptá": {
"žmolky": "eslint",
"lint: opraviť": "npm run lint -- --fix"
},
Beh npm run lint: opraviť na termináli automaticky opraví všetky problémy, ktoré môže linter opraviť.
Povoľte Lining pri ukladaní do kódu VS
Spúšťanie skriptu zakaždým, keď chcete lint váš kód, môže byť únavné. Ak chcete povoliť lintovanie pri ukladaní do kódu VS, postupujte podľa krokov uvedených nižšie.
- Prejdite na kartu „Rozšírenia“ na ľavej strane okna kódu VS.
- Vyhľadajte rozšírenie ESLint a nainštalujte ho.
- Po nainštalovaní rozšírenia otvorte nastavenia kódu VS (Súbor > Predvoľby > Nastavenia alebo stlačením Ctrl +,).
- V editore nastavení vyhľadajte „akcie kódu pri uložení“.
- Kliknite na „Upraviť v súbore settings.json“ a pridajte do súboru nasledujúce nastavenia settings.json súbor.
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": pravda
},
"eslint.validate": ["javascript"],
"eslint.run": "onSave",
}
To umožňuje rozšíreniu ESLint automaticky opraviť váš kód pri ukladaní.
Výhody používania Sprievodcu štýlom
Hlavnou výhodou používania sprievodcu štýlmi, ako je sprievodca štýlmi Airbnb, je, že vám pomáha udržiavať konzistentnú základňu kódu. To je užitočné v tíme, pretože vývojári môžu ľahko pochopiť základňu kódu a prispieť k nej. Pomáha vám tiež presadzovať osvedčené postupy a vyhnúť sa bežným chybám v kódovaní.