Oman ESLint Config -paketin luominen

ESLint on tehokas työkalu, joka auttaa noudattamaan yhdenmukaisia ​​koodauskäytäntöjä ja varmistamaan laadun JavaScript-koodikannassasi.

Koodauskäytännöistä on joskus vaikea päättää, ja työkalun, joka automatisoi niiden täytäntöönpanon, auttaa välttämään tarpeettomia keskusteluja. Laadun varmistaminen on myös tervetullut ominaisuus: nukat ovat erinomaisia ​​työkaluja vikojen, kuten vaihtelevaan laajuuteen liittyvien, tarttumiseen.

ESLint on suunniteltu täysin konfiguroitavaksi, mikä antaa sinulle mahdollisuuden sallia / poistaa käytöstä jokaisen säännön tai sekoittaa sääntöjä tarpeidesi mukaan.  

Tässä mielessä JavaScript-yhteisö ja JavaScriptiä käyttävät yritykset voivat laajentaa alkuperäistä ESLint-määritystä. Npm-rekisterissä on useita esimerkkejä: eslint-config-airbnb on yksi tunnetuimmista.

Päivittäisessä rutiinissasi luultavasti yhdistät useamman kuin yhden kokoonpanon, koska yksi kokoonpano ei sovi kaikille. Tämä viesti näyttää, kuinka voit luoda oman kokoonpanotietovarastosi ja antaa sinulle mahdollisuuden keskittää kaikki sääntömääritelmät.

Luo projekti

Ensin sinun on luotava uusi kansio ja npm-projekti. Yleensä moduulin nimi alkaa eslint-config-, kuten eslint-config-test.

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

Sinulla on package.json-tiedosto, joka näyttää seuraavalta katkelmalta:

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

Seuraavaksi on aika lisätä ESLint-riippuvuutesi:

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 

Paketit muuttuvat tarpeidesi mukaan. Tällöin työskentelen React-koodikantojen kanssa ja käytän koodia Prettierillä. Asiakirjoissa mainitaan, että jos jaettava kokoonpano riippuu laajennuksesta, sinun on määritettävä se myös nimellä peerDependency.

Seuraavaksi luon .eslintrc.jskokoonpanoni kanssa - tämä on samanlainen kuin mitä jo teet sovelluksissasi:

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: { }, }; 

rulesObjekti tallentaa mitään sääntöä, jonka haluat ohittaa. Yllä oleva katkelma ruleson tyhjä, mutta voit tarkistaa ohitukseni. Airbnb / JavaScript-arkistosta löydät luettelon yhteisön ohittamista säännöistä.

Luo mukautetut säännöt

Aika luoda a .prettierrcmukautettujen sääntöjen kanssa - tämä on hankala osa, koska Prettier ja ESLint voivat olla ristiriidassa muutaman säännön kanssa:

{ "tabWidth": 2 } 

On tärkeää mainita, että .prettierrctiedoston pitäisi asua projektin juuressa, joka käyttää pakettiasi. Tällä hetkellä kopioin sen manuaalisesti.

Seuraava vaihe on viedä määritykset index.jstiedostoon:

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

On teknisesti mahdollista luoda kaikki kokoonpanot index.jstiedostoon. Mutta jos teet tämän, et saa konfigurointiobjektia nukastettua (lisää aloitusvitsisi tähän).

Olet valmis!

Voilà! Se on kaikki mitä tarvitset oman kokoonpanopakettisi aloittamiseen. Voit testata määrityspakettisi paikallisesti suorittamalla seuraavat JavaScript-projektissa:

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

Muista, että myös määrityspakettisi riippuvuudet voidaan asentaa.

Jos kaikki näyttää hyvältä, voit julkaista npm-rekisterissä:

npm publish 

Täysi esimerkki

Minulla on toimiva GitHub-projekti, joka näyttää tämän viestin asennuksen: eslint-config-leozera. Voit nähdä sen myös alla:

Lisätietoja projektista

  • ESLintin määrittäminen: viralliset ESLint-asiakirjat. Tiedäthän, lukea dokumentit
  • Ensimmäisen NPM-paketin julkaiseminen: lainaan postituksen alaotsikko - "kaikki mitä sinun tarvitsee tietää NPM-paketin luomiseksi".
  • eslint-config-wesbos: Wes Bosin projekti, joka auttoi minua tehdessäni tätä työtä

Lähetetty myös blogiini. Jos pidät tästä sisällöstä, seuraa minua Twitterissä ja GitHubissa. Kansikuva Susan Holt Simpson / Unsplash.