Sådan oprettes din egen ESLint Config-pakke

ESLint er et kraftfuldt værktøj, der hjælper dig med at håndhæve ensartede kodningskonventioner og sikre kvalitet i din JavaScript-kodebase.

Kodningskonventioner er undertiden vanskelige at beslutte, og at have et værktøj, der automatiserer håndhævelsen, hjælper med at undgå unødvendige diskussioner. Sikring af kvalitet er også en velkommen funktion: linters er fremragende værktøjer til at fange bugs, såsom dem, der er relateret til variabelt omfang.

ESLint er designet til at være helt konfigurerbar, hvilket giver dig mulighed for at aktivere / deaktivere hver regel eller blande reglerne, så de passer til dine behov.  

Med dette i tankerne kan JavaScript-fællesskabet og virksomheder, der bruger JavaScript, udvide den originale ESLint-konfiguration. Der er flere eksempler i npm-registreringsdatabasen: eslint-config-airbnb er en af ​​de mest kendte.

I din daglige rutine vil du sandsynligvis kombinere mere end en konfiguration, da der ikke er nogen konfigurationsparametre. Dette indlæg viser, hvordan du opretter dit eget lager af konfigurationer, hvilket giver dig mulighed for at centralisere alle dine regeldefinitioner.

Opret projektet

Først skal du oprette en ny mappe og et npm-projekt. Efter konvention begynder modulnavnet med eslint-config-, såsom eslint-config-test.

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

Du vil have en package.json-fil, der ser ud som følgende kodestykke:

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

Dernæst er det tid til at tilføje dine ESLint-afhængigheder:

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 

Pakkerne ændres efter dine behov. I dette tilfælde arbejder jeg med React-kodebaser, og jeg bruger Prettier til at formatere min kode. Dokumentationen nævner, at hvis din delbare konfiguration afhænger af et plugin, skal du også angive det som en peerDependency.

Dernæst opretter jeg en .eslintrc.jsmed min konfiguration - dette svarer til det, du allerede gør i dine apps:

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

Det rulesobjekt gemmer enhver regel, at du vil tilsidesætte. I uddraget ovenfor ruleser tomt, men du er velkommen til at kontrollere mine tilsidesættelser. I Airbnb / JavaScript-arkivet kan du finde en liste over tilsidesatte regler fra samfundet.

Opret brugerdefinerede regler

Tid til at oprette en .prettierrcmed dine brugerdefinerede regler - dette er en vanskelig del, da Prettier og ESLint kan komme i konflikt med et par regler:

{ "tabWidth": 2 } 

Det er vigtigt at nævne, at .prettierrcfilen skal leve i roden til det projekt, der bruger din pakke. Lige nu kopierer jeg det manuelt.

Det næste trin er at eksportere din config i index.jsfilen:

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

Det er teknisk muligt at oprette alle konfigurationer i index.jsfilen. Men hvis du gør dette, får du ikke konfigurationsobjektet fadret (indsæt din Inception-joke her).

Du er færdig!

Voilà! Det er alt hvad du behøver for at starte din egen pakke med konfigurationer. Du kan teste din konfigurationspakke lokalt ved at køre følgende i et JavaScript-projekt:

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

Husk, at afhængigheden af ​​din konfigurationspakke også kan være installeret.

Hvis alt ser fint ud, kan du udgive det til npm-registreringsdatabasen:

npm publish 

Fuldt eksempel

Jeg har et funktionelt GitHub-projekt, der viser opsætningen af ​​dette indlæg: eslint-config-leozera. Du kan også se det nedenfor:

Mere om projektet

  • Konfiguration af ESLint: officielle ESLint-dokumenter. Du ved, læs dokumenterne
  • Sådan udgiver du din første NPM-pakke: citerer underteksten for indlægget - "alt hvad du behøver at vide for at oprette en NPM-pakke."
  • eslint-config-wesbos: et projekt af Wes Bos, der hjalp mig, mens jeg udførte dette arbejde

Også sendt på min blog. Hvis du kan lide dette indhold, skal du følge mig på Twitter og GitHub. Forsidebillede af Susan Holt Simpson / Unsplash.