Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Ratgeber

Die besten Tools, um sauberen Code zu schreiben

(Bild: Shutterstock/Maglara)

Sauberen Code schreiben, sich an alle Konventionen und Best Practices halten. Eine Herausforderung für jeden Anfänger und Profi. Diese Tools machen vollautomatisch für euch sauber.

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.

Die ersten Schritte zu besserem Code

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.

Die besten Tools für deinen Code-Editor

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

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.

Prettier formatiert euren Code ganz automatisch. Dadurch spart ihr Zeit und könnt euch auf das eigentliche Programmieren konzentrieren. (Screenshot: t3n.de)
Prettier formatiert euren Code ganz automatisch. Dadurch spart ihr Zeit und könnt euch auf das eigentliche Programmieren konzentrieren. (Screenshot: t3n)

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

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.

Eslint kann einige gefundene Probleme sogar von alleine lösen. (Screenshot: t3n.de)
Eslint kann einige gefundene Probleme sogar alleine lösen. (Screenshot: t3n)

Tipp:

Installiert die Eslint- und Prettier-Plugins eures Code-Editors. Mit Atom oder Visual Studio Code stellt das kein Problem dar. Nun könnt ihr einstellen, dass Prettier und Eslint ihre Analysen jedes Mal durchführen, sobald ihr speichert. Auch die Auto-Fix-Funktion von Eslint kann dabei ausgeführt werden. Das ist zum Beispiel mit dem Plugin von Dirk Baeumer möglich.

Formatiert euren Code vollautomatisch vor dem Git-Commit

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.

Lint-Staged in Kombination mit 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.

So einfach kann es sein schön zu programmieren. Oder einem Tool die Aufgabe zu überlassen. Lint-Staged mit Husky in Aktion. (Screenshot: GitHub/Okonet)
So einfach kann es sein, schön zu programmieren. Oder einem Tool die Aufgabe zu überlassen. Lint-Staged mit Husky in Aktion. (Screenshot: GitHub/Okonet)

Fazit

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:

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.