Saját ESLint Config csomag létrehozása

Az ESLint egy hatékony eszköz, amely segít a következetes kódolási szabályok betartatásában és a JavaScript kódbázis minőségének biztosításában.

A kódolási konvenciókról néha nehéz dönteni, és egy eszköz, amely automatizálja azok végrehajtását, segít elkerülni a felesleges vitákat. A minőség biztosítása szintén örvendetes tulajdonság: a szálak kiváló eszközök a hibák elkapására, mint például a változó hatókörűek.

Az ESLint úgy lett kialakítva, hogy teljesen konfigurálható legyen, lehetővé téve az egyes szabályok engedélyezését / letiltását, vagy a szabályok keverését az Ön igényeinek megfelelően.  

Ezt szem előtt tartva a JavaScript közösség és a JavaScriptet használó vállalatok kiterjeszthetik az eredeti ESLint konfigurációt. Az npm nyilvántartásban több példa található: az eslint-config-airbnb az egyik legismertebb.

A mindennapi rutinban valószínűleg egynél több konfigurációt fog kombinálni, mivel nincs egy mindenki számára megfelelő konfiguráció. Ez a bejegyzés megmutatja, hogyan hozhat létre saját konfigurációs adattárat, lehetőséget adva az összes szabálydefiníció központosítására.

Hozza létre a projektet

Először létre kell hoznia egy új mappát és az npm projektet. Megállapodás szerint a modul neve azzal kezdődik eslint-config-, mint pl eslint-config-test.

mkdir eslint-config-test cd eslint-config-test npm init 

Lesz egy package.json fájlja, amely a következő kódrészletnek fog kinézni:

{ "name": "eslint-config-test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } 

Ezután ideje hozzáadni az ESLint-függőségeket:

npm install -D eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier 

A csomagok az Ön igényeinek megfelelően változnak. Ebben az esetben a React kódbázissal dolgozom, és a Prettier programmal formázom a kódomat. A dokumentáció megemlíti, hogy ha a megosztható konfiguráció egy plugintól függ, akkor azt is meg kell adnia a-ként peerDependency.

Ezután létrehozok egy .eslintrc.jsa konfigurációmmal - ez hasonló ahhoz, mint amit már az alkalmazásaiban csinálsz:

module.exports = { extends: [ 'airbnb', 'eslint:recommended', 'plugin:import/errors', 'plugin:react/recommended', 'plugin:jsx-a11y/recommended', 'plugin:prettier/recommended', 'prettier/react', ], plugins: [ 'react-hooks', ], rules: { }, }; 

Az rulesobjektum minden olyan szabályt tárol, amelyet felül kíván írni. A fenti részlet rulesüres, de nyugodtan ellenőrizze az felülírásaimat. Az Airbnb / JavaScript adattárban megtalálhatja a közösség által felülbírált szabályok listáját.

Hozzon létre egyedi szabályokat

Ideje létrehozni .prettierrca saját szabályaival - ez egy bonyolult rész, mivel a Prettier és az ESLint néhány szabálynak ütközhet:

{ "tabWidth": 2 } 

Fontos megemlíteni, hogy a .prettierrcfájlnak a csomagot használó projekt gyökérkönyvtárában kell lennie. Jelenleg manuálisan másolom.

A következő lépés a konfiguráció exportálása a index.jsfájlba:

const eslintrc = require('./.eslintrc.js'); module.exports = eslintrc; 

Technikailag lehetséges az összes konfiguráció létrehozása a index.jsfájlban. De ha ezt megteszi, akkor a konfigurációs objektum nem lesz szálkás (ide írja be az Inception viccét).

Végeztél!

Voálá! Ennyi kell a saját konfigurációs csomagjának elindításához. Helyileg tesztelheti a konfigurációs csomagot az alábbiak futtatásával egy JavaScript-projektben:

npm install /Users/leonardo/path/to/eslint-config-test 

Ne feledje, hogy a konfigurációs csomag függőségei is telepíthetők.

Ha minden rendben van, közzéteheti az npm beállításjegyzékben:

npm publish 

Teljes példa

Van egy funkcionális GitHub projektem, amely bemutatja ennek a bejegyzésnek az beállítását: eslint-config-leozera. Az alábbiakban láthatja:

További információ a projektről

  • Az ESLint beállítása: hivatalos ESLint dokumentumok. Tudod, olvassa el a docs
  • Az első NPM-csomag közzététele: a bejegyzés feliratának idézése - "minden, amit tudnod kell az NPM-csomag létrehozásához".
  • eslint-config-wesbos: Wes Bos projektje, amely segített nekem a munka elvégzése közben

A blogomra is felkerült. Ha tetszik ez a tartalom, kövessen a Twitteren és a GitHub-on. Címlapfotó: Susan Holt Simpson / Unsplash.