Guten und sauberen Code zu schreiben, ist bei der Programmierung das A und O. Wenn ihr selbst oder irgendwer anderes euren Sourcecode ein paar Monate später verstehen will, sollte es nicht das Leichteste sein, das gesamte Projekt neu aufzusetzen. Aber auch während des aktuellen Entwicklungsprozesses ist cleaner Code unabdingbar. Je komplexer euer Projekt mit der Zeit wird, desto schwieriger wird es, bei schlechtem Code Änderungen durchzuführen oder neue Features zu implementieren.

Wer Recherche betreibt, wie denn nun am besten sauberer Code geschrieben werden kann, trifft vermutlich schnell auf Style-Guides, Best Practices und Design-Pattern. Doch ein Blick auf ein paar Hinweise zur Benennung von Variablen und Funktionen oder wie und wann Code eingerückt werden muss reicht bei weitem nicht aus. Vor allem Design-Pattern müssen verinnerlicht werden und erfordern eine gewisse Erfahrung, wann und wie sie am besten einzusetzen sind. Die Zeit, um die Erfahrung zu sammeln, können euch auch Tools nicht abnehmen. Ihr solltet euch deshalb auf jeden Fall die Zeit nehmen, euch dahingehend zu informieren. Nichtsdestotrotz helfen euch die folgenden Tools, für sauberen Code zu sorgen, ohne dass ihr ihn selbst schreiben müsst.

Für verschiedene Programmiersprachen sowie Code-Editoren wie Atom oder Visual Studio Code gibt es einige Tools beziehungsweise Plugins, die den Code analysieren und automatisch formatieren.

Prettier ist ein Code-Formatierer, der euren gesamten Quellcode so anpassen kann, dass er am Ende immer gut aussieht – egal, wie schlecht er geschrieben ist. Die Rede ist von Einrückungen, Zeilenumbrüchen bei zu langen Zeilen und vielem mehr. Prettier ist in der Lage, bestehenden Code mit einem Befehl aufzuräumen. Damit hilft das Tool nicht nur Anfängern, sondern kann auch erfahrenen Programmierern eine Menge Arbeit abnehmen. Denn so könnt ihr euch auf das eigentliche Entwickeln fokussieren. Nutzt jeder Mitarbeiter eines Projekts das Tool mit denselben Einstellungen, so können festgelegten Konventionen mit Leichtigkeit und vollautomatisch eingehalten werden.

Das Tool funktioniert bislang hauptsächlich mit einigen wichtigen Programmiersprachen, Libraries und Frameworks der Webentwicklung. Darunter JavaScript, HTML, CSS, TypeScript, JSON, YAML und GraphQL. In Arbeit sind bereits weitere Sprachen wie beispielsweise PHP, Java, Swift oder Python. Prettier gibt es auch als Plugins für Atom, Visual Studio Code, Web-Storm und andere. Auf der Prettier-Website findet ihr eine vollständige Liste mit allen Sprachen und Code-Editoren.

Eslint ist ein Linting-Tool für JavaScript und JSX. Es dient zur statischen Code-Analyse des Sourcecodes. Es zeigt euch Probleme aus einem gewissen Regelsatz in eurem Code an, etwa eine nicht genutzte Variable, einen benötigten Return-Ausdruck in einer Getter-Funktion oder das Unterdrücken eines Else wenn im If-Teil bereits ein Return erfolgt ist. Der Regelsatz umfasst Regeln zur Vermeidung von Laufzeitfehlern, Best Practices, Variablen-Deklaration und vielem mehr. Einige wenige der Regeln können sogar automatisch mit einem einzigen Befehl gefixt werden. Ihr könnt frei entscheiden, nach welchen Regeln das Tool euren Code durchsuchen soll und nach welchen nicht.

Die beiden folgenden Tools ermöglichen euch, euren Code komplett automatisch zu analysieren und zu formatieren – und zwar jedes Mal, wenn ihr einen Git-Commit erstellen wollt. Dafür benötigt ihr Lint-Staged und Husky.

Wenn ihr Linting statt beim Speichern vor dem Erstellen eines Commits durchführen wollt, dann könnte Lint-Staged das Tool eurer Wahl werden. Ihr verhindert damit das ständige Analysieren während des Programmierens, sorgt aber dennoch dafür, dass auf eurem Repository nur sauberer Code landet. Mit dem auf Eslint und Prettier basierenden Tool könnt ihr auch genau entscheiden, welche Dateien analysiert werden sollen. So vermeidet ihr das lange Durchsuchen eures gesamten Projekts.

Neben Lint-Staged ist das zweite Tool sehr hilfreich: Husky vereinfacht den Umgang mit Git-Hooks. Mit dem Werkzeug kann über das einfache Anpassen einer Konfigurationsdatei vor einem Commit oder Push automatisch ein Skript beziehungsweise Befehl ausgeführt werden. Das könnt ihr ausnutzen und vor einem Commit die Analyse mit Lint-Staged starten.

Die Installation erfolgt in wenigen Schritten:

1. Führt in einem Terminal den folgenden Befehl aus: npm install --save-dev lint-staged husky
2. Ergänzt die folgenden Zeilen in der package.json:

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.(js|jsx)": ["eslint --fix", "git add"]
}

Das war alles! Wenn ihr jetzt git add und anschließend git commit ausführt, werden eure JavaScript- und JSX-Dateien analysiert und der Code optimiert.

Es gibt noch jede Menge weiterer hilfreicher Code-Optimierungs-Tools für andere Programmiersprachen. Sie sind super Hilfsmittel, um gewisse Konventionen und die wichtigsten Richtlinien für sauberen Code einzuhalten. Setzt ihr das gleiche Tool für alle Teilnehmer eines Projekts ein, könnt ihr zudem sichergehen, dass die komplette Codebasis sauber bleibt. Dennoch sind die Tools nur ein Schritt für einen besseren und sauberen Code. Sie achten natürlich nicht auf Design Pattern oder ob euer Sourcecode performant ist. Auch sollten vor allem Anfänger sich nicht zu sehr auf solche Tools verlassen, da sie sonst nicht selbstständig lernen, wann ein Tab oder Zeilenumbruch eingefügt werden muss.

Außerdem spannend:

• So verhindert ihr Phishing bei Verlinkungen im neuen Tab
• TypeScript, Rust und Kotlin: Warum die neuen Programmiersprachen voll im Trend sind