Průvodce stylem Airbnb je soubor pokynů pro psaní čistého a konzistentního kódu. Byl vydán v roce 2012 a od té doby se stal jedním z nejpopulárnějších stylových průvodců pro projekty JavaScript.
Poskytuje sadu pokynů pro psaní konzistentního kódu, který se snadno udržuje díky vynucení různých stylů pravidla pro odsazení, komentáře, maximální délku řádku, konvence pojmenovávání proměnných, uvozovky a definice funkcí. Chcete-li nastavit průvodce stylem Airbnb v projektu JavaScript, musíte použít nástroj pro linting, jako je ESLint.
Nainstalujte ESLint
ESLint je open-source JavaScript linkovací nástroj který pomáhá vývojářům psát čistý kód hledáním a opravou problémů. Dokáže detekovat problémy ve vašem kódu, jako jsou syntaktické chyby, neplatné parametry a nedefinované proměnné. Když spustíte ESLint s - - opravit automaticky identifikuje a opraví všechny opravitelné problémy v kódu, čímž vám ušetří čas.
ESLint můžete použít k vynucení průvodců styly, jako je průvodce stylem Airbnb.
Chcete-li začít, spusťte v terminálu následující příkaz a nainstalujte ESLint jako závislost pro vývojáře:
npm install --save-dev eslint eslint-config-airbnb
Poté inicializujte ESLint.
npx eslint --init
Budete vyzváni k otázkám ohledně vašeho projektu. Když se zobrazí výzva:
? Jak byste chtěli používat EsLint?
Vyberte tuto možnost:
> Chcete-li zkontrolovat syntaxi, najít problémy a vynutit styl kódu
Odpovězte na další otázky podle svého projektu, dokud nenarazíte na následující výzvu.
? Jak byste chtěli definovat styl pro váš projekt?
Poté odpovězte následovně.
> Použijte oblíbený stylový průvodce
Pro další výzvu vyberte průvodce stylem Airbnb.
? Jakého průvodce stylem se chcete řídit?
> Airbnb:
Nakonec nainstalujte požadované závislosti výběrem „Ano“ v další výzvě.
Po dokončení instalace byste měli mít a .eslintsrc.json soubor v kořenovém adresáři vaší složky.
Přizpůsobení průvodce stylem Airbnb
Průvodce stylem Airbnb umožňuje přizpůsobení. Můžete přidat další pravidla nebo přepsat existující pravidla v .eslintsrc.json konfigurační soubor.
Chcete-li například povolit maximálně 80 znaků na řádek, můžete toto pravidlo přidat do sekce pravidel.
{
"rozšiřuje": [
"plugin: reagovat/doporučeno",
"airbnb"
],
"pravidla": {
"max-len": ["chyba", { "kód": 80 }]
}
}Spuštění ESLint v package.json
Přidejte skript do package.json soubor ke spuštění ESLint.
"skripty": {
"žmolky": "eslint"
}
Provedením tohoto příkazu spusťte skript lint a zkontrolujte případné chyby lintování.
npm spustit žmolky
Můžete také přidat skript pro opravu problémů v kódu pomocí --opravit vlajka.
"skripty": {
"žmolky": "eslint",
"lint: opravit": "npm run lint -- --fix"
},
Běh npm run lint: opravit na terminálu automaticky opraví všechny problémy, které může linter opravit.
Povolte Lining na Uložit do VS kódu
Spouštění skriptu pokaždé, když chcete svůj kód lintovat, může být únavné. Chcete-li povolit linting při ukládání do VS Code, postupujte podle následujících kroků.
- Přejděte na záložku "Rozšíření" na levé straně okna VS Code.
- Hledejte rozšíření ESLint a nainstalujte jej.
- Jakmile je rozšíření nainstalováno, otevřete nastavení VS Code (Soubor > Předvolby > Nastavení nebo stisknutím Ctrl +,).
- V editoru nastavení vyhledejte „akce kódu při uložení“.
- Klikněte na „Upravit v settings.json“ a přidejte do souboru následující nastavení settings.json soubor.
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": skutečný
},
"eslint.validate": ["javascript"],
"eslint.run": "onSave",
}
To umožňuje rozšíření ESLint automaticky opravit váš kód při uložení.
Výhody použití průvodce stylem
Hlavní výhodou použití průvodce stylem, jako je průvodce stylem Airbnb, je to, že vám pomáhá udržovat konzistentní základnu kódu. To je užitečné v týmu, protože vývojáři mohou snadno pochopit základnu kódu a přispět k ní. Pomáhá vám také prosadit osvědčené postupy a vyhnout se běžným chybám v kódování.