Was ist Flusen und wie können Sie Zeit sparen?

Eine der größten Herausforderungen in der Softwareentwicklung ist die Zeit. Es ist etwas, von dem wir nicht leicht mehr bekommen können, aber Flusen können uns helfen, das Beste aus unserer Zeit herauszuholen.

Was ist Flusen?

lint oder linter ist ein Tool, das den Quellcode analysiert, um Programmierfehler, Fehler, Stilfehler und verdächtige Konstrukte zu kennzeichnen. //en.wikipedia.org/wiki/Lint(software)

Einfach ausgedrückt, ein Linter ist ein Tool, das Ihren Code programmgesteuert scannt, um Probleme zu finden, die zu Fehlern oder Inkonsistenzen mit dem Zustand und dem Stil des Codes führen können. Einige können sogar helfen, sie für Sie zu reparieren!

Nehmen Sie zum Beispiel das folgende Beispiel:

const test = 'I am a test'; console.log(`Test: ${test}`); const test = 'Another one.';

Wir deklarieren die Konstante testzweimal, worüber sich unsere Javascript-Engine nicht freuen wird. Mit den richtigen Linter-Einstellungen und der richtigen Watch-Konfiguration erhalten Sie sofort einen Fehler, wenn der Code im Hintergrund ausgeführt wird, anstatt später als Fehler beim Ausführen des Codes erkannt zu werden:

 10:9 error Parsing error: Identifier 'test' has already been declared 8 | const test = 'I am a test'; 9 | console.log(`Test: ${2}`); > 10 | const test = 'Another one.'; | ^

Es mag ziemlich offensichtlich sein, dass Sie zwei der gleichen constDeklarationen haben, da dies nur drei Zeilen sind. In einer komplexeren Anwendung kann dies jedoch viel Zeit sparen, wenn Sie einen lästigen Fehler suchen müssen, der nicht immer offensichtlich ist.

Womit kann Flusen alles helfen?

Viele Dinge, einschließlich, aber nicht beschränkt auf:

  • Kennzeichnen von Fehlern in Ihrem Code aufgrund von Syntaxfehlern
  • Sie erhalten Warnungen, wenn Code möglicherweise nicht intuitiv ist
  • Bereitstellung von Vorschlägen für gängige Best Practices
  • Verfolgen Sie TODOs und FIXMEs
  • Beibehaltung eines konsistenten Codestils

Die meisten Dinge, an die Sie denken können, existieren wahrscheinlich bereits in der einen oder anderen Form, und wenn nicht, können Sie sogar benutzerdefinierte Regeln erstellen, die Ihren Anforderungen entsprechen!

Wie hilft das eigentlich oder warum sollte es mich interessieren?

Das wahrscheinlich größte übergeordnete Thema der obigen Liste ist die Tatsache, dass diese Probleme sofort angesprochen werden. Diese Probleme treten nicht mehr bei Ihnen auf, wenn Sie Ihre App ausführen oder jemandem während einer Codeüberprüfung Angst machen. Sie und Ihr Prüfer werden nicht länger endlos aggressiv aggressiv durch die Kommentare kämpfen, ob am Ende von JS-Anweisungen ein Semikolon eingefügt werden soll oder nicht (sollten Sie?).

All diese Momente, die Sie aufgrund eines dummen Syntaxfehlers oder der Mikrointeraktionen, die Sie und Ihre Teamkollegen während einer Überprüfung haben, daran hindern, produktiv zu sein, brauchen Zeit. Sie summieren sich und nehmen Ihnen die Zeit, die Sie für die Behebung eines anderen Fehlers oder die Entwicklung der nächsten großartigen Funktion Ihres Produkts aufwenden können.

Wie fange ich eigentlich an?

Obwohl es für den Zweck dieses Beitrags Linters für die meisten, wenn nicht alle anderen Mainstream-Sprachen gibt, werde ich mich auf Javascript konzentrieren. Es gelten die gleichen Prinzipien, aber die Werkzeuge können etwas anders sein.

Ich werde durchgehen, wie Sie in einer React-App für das grundlegende Flusen eingerichtet werden können. Sie können ganz einfach mitmachen, indem Sie Ihre eigene React-App starten oder meinen Gatsby-Starter verwenden: //github.com/colbyfayock/gatsby-starter-sass#starting-from-scratch

Dein Linter

Um loszulegen, brauchen wir zuerst einen Linter. Das wahrscheinlich beliebteste in der Javascript-Welt ist ESLint. Ihr Linter ist tatsächlich die Engine zum Definieren von Regeln und zum Parsen Ihrer zu testenden Dateien. ESLint ist als npm-Paket für sich allein verfügbar. Nach der Installation können Sie sofort eine grundlegende Konfigurationsdatei einrichten und mit einigen Befehlszeilentools sofort loslegen.

Fügen wir zunächst unsere ESLint-Abhängigkeit hinzu:

yarn add eslint -D

Wir installieren dies als devDependency(daher das -DFlag), da unsere Anwendung dies nicht ausführen muss. Nachdem es erfolgreich installiert wurde, fügen wir es package.jsonals Skript zu unserem hinzu :

... "scripts": { ... "lint": "eslint . --ext .js" ... }, ...

Oben führen wir unseren Linter im gesamten Projektverzeichnis für jede Datei aus, die eine Erweiterung von hat .js. Wenn Sie mit einem großen Projekt mit vielen Dateitypen arbeiten, vielleicht sogar mit einigen, die Sie nicht fusseln möchten, können Sie dieses Flag ändern oder mit anderen Optionen genauer festlegen.

Um ESLint zu unterstützen, müssen wir noch etwas tun. Fügen wir eine Datei im Stammverzeichnis unseres Projekts (wahrscheinlich dort, wo sich Ihre package.jsonbefindet) hinzu .eslintrc.jsund erstellen den Inhalt der Datei einfach:

module.exports = {};

Sobald Sie bereit sind, können Sie ausführen yarn lintund… eine Fehlermeldung erhalten.

Dies ist in Ordnung und wird in unserem Projekt erwartet. Fahren wir also fort.

Dein Parser

Ein gängiges Tool in der Kette für Javascript-Entwickler ist Babel, mit dem Sie Code mit Funktionen schreiben können, die möglicherweise nicht in allen Browsern unterstützt werden, z. B. mithilfe von Pfeilfunktionen, die in ES6 verfügbar sind, und anderen Konventionen wie dem Importieren von Dateien über import.

Der Code, den Sie schreiben, wird möglicherweise bereits über Babel ausgeführt, um in einem Browser zu funktionieren. Dies gilt jedoch nicht standardmäßig für ESLint. Daher können Sie mit ESLint einen Parser angeben, mit dem die Flusenverarbeitung denselben Code anzeigen kann, den Ihr Browser sieht. In diesem Fall möchten wir den ESLint-Parser von Babel verwenden, der uns zur Verfügung gestellt wird.

Um dies einzurichten, müssen wir zuerst unsere Abhängigkeit installieren:

yarn add babel-eslint -D

Wenn Sie verwenden babel-eslint, möchten Sie normalerweise sicherstellen, dass daneben babelinstalliert ist. In unserem Fall wird Gatsby jedoch bereits verwendet babel, sodass wir es nicht unbedingt hinzufügen müssen. Nachdem dies eingerichtet ist, möchten wir unsere .eslintrc.jsKonfigurationsdatei mit einigen neuen Optionen aktualisieren :

module.exports = { "env": { "browser": true, "node": true, "es6": true }, "parser": "babel-eslint" };

Hier teilen wir ESLint mit, dass unsere Umgebung im Knoten (Gatsbys Vorkompilierung) im Browser (der App) ausgeführt wird und ES6 verwendet. Auf diese Weise kann ESLint wissen, wie Ihr Code ausgeführt wird. Außerdem möchten wir unseren Parser so einrichten, dass er ist babel-eslint.

Sobald wir bereit sind, rennen Sie noch yarn linteinmal und ... nun, nichts ist wirklich passiert.

Dies wird weiterhin erwartet, da wir keine Regeln aufgestellt haben!

Plugins für Ihren Code

Eine React-App schreiben? Der Babel-Parser kann Ihnen bei der Transformation Ihres Codes helfen, aber es fällt Ihnen möglicherweise schwer, produktiv zu sein, da ESLint verstehen muss, wie es funktionieren sollte, um Ihre React-Dateien zu fusseln.

Das Schöne an ESLint ist, dass Sie Plugins konfigurieren können, mit denen Sie Regeln erstellen und festlegen können. Glücklicherweise haben wir zusammen mit unserem Babel-Parser oben, der einen Teil des schweren Hebens erledigt, ein React-Plugin zur Verfügung, das genau das tut und sich darum kümmert, die JSX für uns zu fusseln.

Lassen Sie uns zuerst unsere Abhängigkeit installieren:

yarn add eslint-plugin-react -D

Lassen Sie uns unsere .eslintrc.jsDatei erneut aktualisieren :

module.exports = { "settings": { "react": { "version": "detect" } }, "env": { "browser": true, "node": true, "es6": true }, "plugins": [ "react" ], "parser": "babel-eslint" };

Was wir hier hinzufügen, ist eine Einstellung, die automatisch erkennt, welche React-Version Sie verwenden. Dies ist hilfreich, damit Ihr Flusen richtig analysiert wird, und richten Sie dann unser oben installiertes React-Plugin ein.

For one last final time, we will run our lint script and get nothing:

Rules defined by others’s opinions

If you’re not really sure where to get started or just want to quickly get up and running, it’s recommend that you enable ESLint’s own recommended rules. Let’s add this to our .eslintrc.js config file:

module.exports = { "settings": { "react": { "version": "detect" } }, "env": { "browser": true, "node": true, "es6": true }, "plugins": [ "react" ], "extends": [ "eslint:recommended" ], "parser": "babel-eslint" };

And let’s run our yarn lint.

Woah! This will immediately give you a lot errors, it seems like something’s wrong.

Since we’re running a React app, we also want to make sure our linter understands the rules it should follow, so let’s also add our React plugin to the .eslintrc.js config setup:

 "extends": [ "eslint:recommended", "plugin:react/recommended" ],

Now if you run yarn lint, you get something a little more logical.

If you’re following along, it looks like our starter app had a misplaced semicolon and a missing prop in our propTypes validation for Layout.js. Writing this helped me fix my own repo! ?

Going further, if those don’t seem to fit your needs, lots of developers and teams have published their own configurations that ESLint allows you to easily tap into.

Some popular ones include:

  • Airbnb’s config
  • Semistandard
  • Google’s JS Style Guide

Not happy with the options available? You can even create and publish your own to either layer on top of others as a starting point or give it a go from scratch.

Let it do the work (most of it)

You don’t think I’m going to make you fix all of those thing yourself do you? Well, you may have to fix some, but let’s try to get ESLint to fix some of it for us.

If you noticed after we ran the command above, ESLint gave us an extra message:

So let’s give it a try! Let’s run:

yarn lint --fix

And what do you know, it now only gives us 1 linting error.

Turns out ESLint was able to fix our semicolon issue automatically, but we’ll still have to add pageName to our Layout’s propTypes manually, not too much of a lift.

Running one more time and finally nothing again! But this time because everything's looking good.

Go forth and write messy code!

Kidding ? The good news here, is now you can easily take a look at the general health of your codebase as well as hopefully fix most of it automatically. This is going to save a lot of headaches as you work with others on your team, and generally, it’s nice to have all of your code neat and tidy.

This post is just getting started. ESLint is a wide open book with tons of plugins and rules, and it’s not the only linting tool in the game. Play around and find what fits best for you and your team. The little time spent configuring it to your app will save you lots more time in the long run.

Other linting tools to check out

  • JSHint: an alternative to ESLint
  • Stylelint: a linting tool for CSS and CSS-like syntaxes like Sass
  • Awesome ESLint: a simple list of awesome configs, parsers, plugins, and other tools to boost your ESLint game
  • Webhint: linting tool for accessibility, speed, and more website best practices
  • A11y JSX Plugin: ESLint plugin for checking accessibility rules on JSX elements

Follow me for more Javascript, UX, and other interesting things!

  • ? Follow Me On Twitter
  • ?️ Subscribe To My Youtube
  • ✉️ Sign Up For My Newsletter

Originally published at //www.colbyfayock.com/2019/10/what-is-linting-and-how-can-it-save-you-time