So erstellen Sie Ihr eigenes ESLint-Konfigurationspaket

ESLint ist ein leistungsstarkes Tool, mit dem Sie konsistente Codierungskonventionen durchsetzen und die Qualität Ihrer JavaScript-Codebasis sicherstellen können.

Codierungskonventionen sind manchmal schwer zu entscheiden, und ein Tool, das ihre Durchsetzung automatisiert, hilft, unnötige Diskussionen zu vermeiden. Die Sicherstellung der Qualität ist ebenfalls ein willkommenes Merkmal: Linters sind hervorragende Werkzeuge zum Auffinden von Fehlern, z. B. im Zusammenhang mit variablem Umfang.

ESLint ist vollständig konfigurierbar und bietet Ihnen die Möglichkeit, jede Regel zu aktivieren / deaktivieren oder die Regeln entsprechend Ihren Anforderungen zu mischen.  

Vor diesem Hintergrund können die JavaScript-Community und Unternehmen, die JavaScript verwenden, die ursprüngliche ESLint-Konfiguration erweitern. Es gibt mehrere Beispiele in der npm-Registrierung: eslint-config-airbnb ist eines der bekanntesten.

In Ihrer täglichen Routine werden Sie wahrscheinlich mehr als eine Konfiguration kombinieren, da es keine One-Config-Fits-All gibt. In diesem Beitrag wird gezeigt, wie Sie ein eigenes Konfigurations-Repository erstellen und alle Ihre Regeldefinitionen zentralisieren.

Erstellen Sie das Projekt

Zuerst müssen Sie einen neuen Ordner und ein neues npm-Projekt erstellen. Konventionell beginnt der Modulname mit eslint-config-z eslint-config-test.

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

Sie haben eine package.json-Datei, die wie folgt aussieht:

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

Als Nächstes müssen Sie Ihre ESLint-Abhängigkeiten hinzufügen:

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 

Die Pakete ändern sich je nach Ihren Bedürfnissen. In diesem Fall arbeite ich mit React-Codebasen und formatiere meinen Code mit Prettier. In der Dokumentation wird erwähnt, dass Sie, wenn Ihre gemeinsam nutzbare Konfiguration von einem Plugin abhängt, diese auch als angeben sollten peerDependency.

Als nächstes werde ich .eslintrc.jsmit meiner Konfiguration eine erstellen - dies ähnelt dem, was Sie bereits in Ihren Apps tun:

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

Das rulesObjekt speichert alle Regeln, die Sie überschreiben möchten. Das obige Snippet rulesist leer, aber Sie können meine Überschreibungen überprüfen. Im Airbnb / JavaScript-Repository finden Sie eine Liste der von der Community überschriebenen Regeln.

Erstellen Sie benutzerdefinierte Regeln

Zeit, eine .prettierrcmit Ihren benutzerdefinierten Regeln zu erstellen - dies ist ein schwieriger Teil, da Prettier und ESLint bei einigen Regeln in Konflikt geraten können:

{ "tabWidth": 2 } 

Es ist wichtig zu erwähnen, dass sich die .prettierrcDatei im Stammverzeichnis des Projekts befinden sollte, das Ihr Paket verwendet. Im Moment kopiere ich es manuell.

Der nächste Schritt ist das Exportieren Ihrer Konfiguration in die index.jsDatei:

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

Es ist technisch möglich, alle Konfigurationen in der index.jsDatei zu erstellen . Wenn Sie dies jedoch tun, wird das Konfigurationsobjekt nicht fusselig (fügen Sie hier Ihren Inception-Witz ein).

Sie sind fertig!

Voilà! Das ist alles, was Sie brauchen, um ein eigenes Konfigurationspaket zu erstellen. Sie können Ihr Konfigurationspaket lokal testen, indem Sie in einem JavaScript-Projekt Folgendes ausführen:

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

Beachten Sie, dass möglicherweise auch die Abhängigkeiten Ihres Konfigurationspakets installiert sind.

Wenn alles gut aussieht, können Sie in der npm-Registrierung veröffentlichen:

npm publish 

Vollständiges Beispiel

Ich habe ein funktionierendes GitHub-Projekt, das das Setup dieses Beitrags zeigt: eslint-config-leozera. Sie können es auch unten sehen:

Mehr zum Projekt

  • ESLint konfigurieren: offizielle ESLint-Dokumente. Sie wissen, lesen Sie die Dokumente
  • So veröffentlichen Sie Ihr erstes NPM-Paket: Zitieren Sie den Post-Untertitel - "Alles, was Sie wissen müssen, um ein NPM-Paket zu erstellen."
  • eslint-config-wesbos: ein Projekt von Wes Bos, das mir bei dieser Arbeit geholfen hat

Auch auf meinem Blog gepostet. Wenn dir dieser Inhalt gefällt, folge mir auf Twitter und GitHub. Titelbild von Susan Holt Simpson / Unsplash.