Az Airbnb stíluskalauz a tiszta és konzisztens kód írására vonatkozó irányelvek összessége. 2012-ben adták ki, és azóta a JavaScript-projektek egyik legnépszerűbb stíluskalauzává vált.
Irányelveket ad konzisztens kód írásához, amely könnyen karbantartható a különféle stílusok érvényesítésével szabályok a behúzásokra, megjegyzésekre, maximális sorhosszra, változó elnevezési konvenciókra, idézőjelekre és függvénydefiníciókra. Az Airbnb stílusútmutatójának JavaScript-projektben történő beállításához olyan linting eszközt kell használnia, mint az ESLint.
Telepítse az ESLint-et
Az ESLint egy nyílt forráskódú JavaScript szöszölő szerszám amely segít a fejlesztőknek tiszta kódot írni a problémák megtalálásával és kijavításával. Felismerheti a kóddal kapcsolatos problémákat, például szintaktikai hibákat, érvénytelen paramétereket és meghatározatlan változókat. Amikor az ESLint a
- - javítani címkét, automatikusan azonosítja és kijavítja a kód minden javítható problémáját, így időt takarít meg.Használhatja az ESLint olyan stíluskalauzok érvényesítésére, mint az Airbnb stíluskalauz.
A kezdéshez futtassa a következő parancsot a terminálban az ESLint fejlesztői függőségként történő telepítéséhez:
npm install --save-dev eslint eslint-config-airbnb
Ezután inicializálja az ESLint.
npx eslint --init
A projekttel kapcsolatban kérdéseket fognak feltenni. Amikor a rendszer kéri:
? Hogyan szeretné használni az EsLint-et?
Válassza ezt a lehetőséget:
> A szintaxis ellenőrzéséhez keresse meg a problémákat, és kényszerítse ki a kódstílust
Válaszoljon a következő kérdésekre a projektje szerint, amíg meg nem találja a következő felszólítást.
? Hogyan szeretné meghatározni a projekt stílusát?
Ezután válaszoljon a következőképpen.
> Használjon népszerű stíluskalauzt
Válassza ki az Airbnb stíluskalauzát a következő üzenethez.
? Melyik stíluskalauzt szeretnéd követni?
> Airbnb:
Végül telepítse a szükséges függőségeket az „Igen” kiválasztásával a következő promptban.
Miután a telepítés befejeződött, rendelkeznie kell a .eslintsrc.json fájlt a mappa gyökerében.
Az Airbnb stíluskalauz testreszabása
Az Airbnb stíluskalauz lehetővé teszi a testreszabást. További szabályokat adhat hozzá, vagy felülírhatja a meglévő szabályokat a .eslintsrc.json konfigurációs fájl.
Például, ha soronként legfeljebb 80 karaktert szeretne engedélyezni, felveheti ezt a szabályt a szabályok szakaszban.
{
"kiterjeszt": [
"plugin: reagáljon/ajánlott",
"airbnb"
],
"szabályok": {
"max-len": ["hiba", { "kód": 80 }]
}
}Az ESLint futtatása a package.json fájlban
Adjon hozzá egy szkriptet a package.json fájl az ESLint futtatásához.
"szkriptek": {
"szösz": "eslint"
}
Futtassa a lint parancsfájlt, hogy ellenőrizze a lintelési hibákat a parancs végrehajtásával.
npm futás lint
Szkriptet is hozzáadhat a kóddal kapcsolatos problémák megoldásához a -- javítani zászló.
"szkriptek": {
"szösz": "eslint",
"lint: javítás": "npm run lint -- --fix"
},
Futás npm run lint: fix a terminálon automatikusan kijavítja a linter által megoldható problémákat.
Engedélyezze a Lintinget a Mentésnél a VS Code-ban
A szkript futtatása minden alkalommal, amikor meg akarja szöszölni a kódot, fárasztó lehet. Kövesse az alábbi lépéseket a szöszölés engedélyezéséhez a VS Code-ban való mentéskor.
- Lépjen a „Bővítmények” fülre a VS Code ablak bal oldalán.
- Keresse meg a ESLint kiterjesztés és telepítse.
- A bővítmény telepítése után nyissa meg a VS Code beállításait (Fájl > Beállítások > Beállítások vagy nyomja meg a Ctrl +, billentyűket).
- A beállításszerkesztőben keresse meg a „kódműveletek mentéskor” kifejezést.
- Kattintson a „Szerkesztés a settings.json fájlban” lehetőségre, és adja hozzá a következő beállításokat a settings.json fájlt.
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": igaz
},
"eslint.validate": ["javascript"],
"eslint.run": "onSave",
}
Ez lehetővé teszi az ESLint bővítmény számára, hogy mentéskor automatikusan javítsa a kódot.
A stíluskalauz használatának előnyei
Az Airbnb stíluskalauzhoz hasonló stíluskalauz használatának fő előnye, hogy segít fenntartani a konzisztens kódbázist. Ez hasznos egy csapatban, mivel a fejlesztők könnyen megérthetik és hozzájárulhatnak a kódbázishoz. Segít a legjobb gyakorlatok érvényesítésében és a gyakori kódolási hibák elkerülésében is.