Ich denke, viele Leute wissen, dass es heutzutage bei ernsthaften Projekten üblich ist, spezielle Tools zu verwenden, um den Code auf Fehler zu überprüfen und dem im Team verwendeten Stil zu entsprechen.
Heute möchte ich ESLint ansprechen, ein großartiges Tool zum Überprüfen von JavaScript-Projekten auf Fehler.
Ich werde in diesem Artikel nicht über offensichtliche Punkte schreiben, wie das Einrichten von eslint für Ihr Projekt: Ich hoffe, Sie können die Dokumentation zu diesem Teil selbst lesen und mit sich selbst verbinden. Und hier werden wir diskutieren, welches zusätzliche „Kit“ Sie mit dem Original-Tool verbinden können und wie Sie es konfigurieren können, damit es zu Ihrem größten Vorteil funktioniert.
Jetzt verwenden wir die vorbereitete Konfiguration mit den Regeln des Airbnb-Teams als Grundlage für die Regeln. Ihr Standard zum Schreiben von JavaScript-Code hat jetzt mehr als 73.000 Sterne auf dem Github und wird von vielen bekannten Organisationen verwendet . Ich denke du kannst ihm vertrauen.
Diese Konfiguration verbindet mehrere wichtige Pakete gleichzeitig mit dem Projekt: eslint , eslint-plugin-import , eslint-plugin-react und eslint-plugin-jsx-a11y , die zusätzliche Regeln zur Validierung Ihres Codes enthalten. Es ist zu beachten, dass diese Konfigurationsdatei impliziert, dass Sie React.js in Ihrem Projekt verwenden. Ist dies nicht der Fall , können Sie mit Ausnahme der Plug-In-Abhängigkeit für React.js jederzeit die Konfiguration eslint-config-airbnb-base installieren, die alle gleich enthält.
Schauen wir uns die Plug-In-Pakete genauer an und finden heraus, welche Überprüfungen sie Ihrem Projektcode hinzufügen:
Dieses Plugin fügt eine Validierung für alle Ihre Importe zu Ihrem Projekt hinzu und stellt sicher, dass alle importierten Abhängigkeiten im Projekt vorhanden sind, in einer geeigneten Reihenfolge für nachfolgende Arbeiten verbunden sind und so weiter.
Das Plugin ermöglicht es Ihnen, korrekteren Code auf React.js zu schreiben, schützt Sie vor gängigen Antimustern und zwingt Sie außerdem, allen Ihren Komponenten Beschreibungen der von ihnen akzeptierten Datentypen zuzuweisen.
Dieses Plugin gilt auch für Projekte auf React.js und ist auch bei der Arbeit äußerst nützlich. Es wird Sie zwingen, HTML zu schreiben, das im Einklang mit den Barrierefreiheitsstandards viel besser ist. Ihre Projekte werden für Menschen mit Behinderungen viel bequemer.
Im Allgemeinen verbessern diese Regeln Ihre Projekte erheblich und erweitern Ihr Wissen über moderne Standards für das Schreiben von Code.
Aber in unserer Welt gibt es nicht nur diese Plugins für eslint, sondern auch viele andere. Zu diesem Thema gibt es bereits ein wundervolles Super-Eslint- Projekt auf dem Github. In den letzten Tagen habe ich mich entschlossen, dieses Thema zu studieren, und ich möchte Ihrem Gericht die interessantesten Dinge vorstellen, die in meinem aktuellen Projekt, an dem ich gerade arbeite, gefunden, persönlich getestet und umgesetzt wurden.
Zusätzliche Plugins für ESLint
Sie können das obige Projekt selbst studieren und interessante Plugins für sich persönlich finden, aber ich werde hier schreiben, was mich interessiert.
Ein Plugin, das speziell für Node.js-Projekte entwickelt wurde. Ich denke, viele können nützlich sein, wenn sie es zu Hause immer noch nicht benutzen.
Mit diesem Plugin können Sie Lodash "lieben" und die meisten nativen JS-Methoden in Methoden von Lodash umschreiben. Außerdem enthält es viele Empfehlungen zum Schreiben von Code, der Lodash-Ketten verwendet. Im Allgemeinen ist es sehr interessant, aber bisher habe ich dies nicht einfach implementiert, weil wir jetzt zu viel Code neu schreiben müssen, um den Regeln dieses Plugins zu entsprechen. Aber für die Zukunft habe ich es für mich genommen.
Mit diesem Plugin können Sie direkt während der Entwicklung die Kompatibilität des Codes überprüfen, den Sie mit den aktuellen Browsern geschrieben haben, auf die Sie gerade in Ihrem Projekt abzielen. Im Moment habe ich es nicht mit meinem Projekt verbunden, da wir jetzt den Dienst polyfill.io verwenden , der automatisch alle erforderlichen Polyfills mit jedem einzelnen Browser verbindet, sodass das Problem der Codekompatibilität insgesamt irgendwie nicht vorhanden ist. Aber für die Zukunft mache ich mir auch eine Notiz: Was ist, wenn ich sie brauche?
Ein Plugin, das Ihnen zeigt, wie Sie Ihre regulären Ausdrücke optimieren können. Warum nicht installieren? Es wird nicht überflüssig sein, dachte ich.
Einer der interessantesten Funde aus dieser Liste zusätzlicher Bodykits. Dieses Plugin enthält eine ganze Reihe von Überprüfungen, dank derer es schlecht geschriebene Codeabschnitte, dieselben Funktionen und einfach bedeutungslose Konstruktionen findet und anbietet, sie neu zu schreiben (es ist schade, dass er selbst nicht weiß, wie man sie neu schreibt: D). Wenn Sie Ihren Code nicht in kleine klare Blöcke zerlegen und komplizierte Funktionen in mehr als 100 Zeilen schreiben möchten, warten Sie auf die Warnungen dieses Plugins, dass die kognitive Komplexität solcher Stellen im Projekt für eine langfristige Unterstützung zu hoch ist und neu geschrieben werden sollte.
Dieses Plugin wird Sie einfach beschimpfen, wenn Sie Standard for oder while Schleifen schreiben möchten. Heutzutage ist es seit langem üblich, für jedes zu verwenden, map , zu reduce und so weiter. Ich stimme im Allgemeinen dem Autor zu und habe das Plugin in mein Projekt eingefügt.
Ein Plugin, das Sie daran hindert, Prototypen von Standard-JavaScript-Objekten zu erweitern. Sag nein! Affenflecken. Und das ist richtig.
Ein Plugin, mit dem Sie die richtigen Versprechen schreiben und vor häufigen Fehlern bei der Arbeit schützen können. Es ist auch sehr nützlich, denke ich.
Hier ist eine Liste der Plugins am Ende. Was verwenden Sie in Ihren Projekten, um Ihren Code zu testen?
Abschließend werde ich eine Beispielkonfiguration unserer .eslintrc Datei aus dem aktuellen Projekt .eslintrc :
.eslintrc { "parser": "babel-eslint", "extends": [ "airbnb", "plugin:import/errors", "plugin:import/warnings", "plugin:jsx-a11y/recommended", "plugin:sonarjs/recommended", "plugin:promise/recommended" ], "plugins": ["react", "jsx-a11y", "optimize-regex", "sonarjs", "no-loops", "no-use-extend-native", "promise"], "rules": { "react/jsx-filename-extension": "off", "jsx-a11y/click-events-have-key-events": "off", "import/no-extraneous-dependencies": [ "error", { "packageDir": "./" } ], "allowTernary": true, "optimize-regex/optimize-regex": "warn", "sonarjs/cognitive-complexity": ["error", 30], "no-loops/no-loops": 2, "no-use-extend-native/no-use-extend-native": 2, }, "settings": { "import/resolver": "webpack" } }