Konsistente Code Styles in WebStorm

So maintained man Code Styles in der IDE

Konsistente Code Styles spielen bei der Erstellung von Projekten eine wichtige Rolle – insbesondere bei größeren Projektteams. Oft wird der Zeitaufwand für das Ausbügeln von Fehlern im Code unterschätzt, nur weil sich ein Teammitglied nicht an die vereinbarten Code Styles gehalten hat. WebStorm bringt daher einige Möglichkeiten zum Managen von Code Styles mit der IDE mit.

In einem Blogpost im JetBrains-Entwicklerblog zeigt Ekaterina Prigara, wie sich Code Styles in WebStorm-Projekten managen lassen.

Code-Style-Optionen in WebStorm

Konsistente Code Styles bieten vor allem einen entscheidenden Vorteil: sie vereinfachen das Lesen des Codes für alle Projekt-Contributoren deutlich. Das spart zum einen nicht nur Zeit, die für andere Bereich des Projekts aufgewandt werden kann, sondern kann zum anderen auch dazu beitragen, Fehler zu vermeiden. Um es Entwicklerteams zu erleichtern, konsistenten Code zu schreiben, gibt es bei WebStorm-Projekten verschiedene Möglichkeiten, um Code Styles zu verwalten – entweder in der IDE direkt oder mithilfe von mit WebStorm integrierten Tools.

So kann WebStorm beispielsweise automatisch selbst konfigurierte Code-Style-Einstellungen auf den verfassten Code anwenden sowie bestehenden Code auf deren Basis neu formatieren. Einrichten lassen sich die Code-Style-Optionen in den WebStorm-Einstellungen; dort kann aus einer ganzen Reihe von Sprachen gewählt werden, für die die IDE spezifische Formatierungsoptionen bereitstellt.

Zwar sind die Code-Style-Settings eher grundsätzlicher Natur, decken aber einen Großteil der typischen Code-Style-Guides ab. Gespeichert werden die Code-Style-Präferenzen in einzelnen Schemes, die sich in den Einstellungen individuell anpassen lassen; zudem können unterschiedliche Schemes bei verschiedenen Projekten angewandt werden.

Stellen Sie Ihre Fragen zu diesen oder anderen Themen unseren entwickler.de-Lesern oder beantworten Sie Fragen der anderen Leser.

Konsistente Code Styles mit EditorConfig und JSCS maintainen

Nicht jeder Contributor eines Projekts nutzt den gleichen Editor oder die gleiche IDE. Will man trotzdem Code-Style-Einstellungen mit ihnen teilen, bietet sich die Nutzung von EditorConfig an. Das Tool bringt dafür beispielsweise ein Dateiformat für beschreibende Styles wie etwa Einrückungen, sowie ein Plugin-Set zur Ausgabe der Code-Styles in den Tools mit sich. WebStorm selbst unterstützt EditorConfig problemlos und wendet die in der .editorconfig-Datei beschriebenen Styles auf das Projekt an, wobei automatisch die Code-Style-Settings der IDE überschrieben werden.

Ein weiteres Tool mit dem Code-Styles in WebStorm-Projekten konsistent gehalten werden können, ist der JavaScript Code Style Checker (JSCS). Ähnlich wie Code-Linters wie etwa JSHint oder ESLint verfügt JSCS über eine Konfigurationsdatei, in der die gewünschten Code Styles definiert werden können. Ebenso erlaubt die IDE den Import einiger Code-Style-Properties aus der JSCS-Konfigurationsdatei.

Insgesamt stehen dafür über 150 verschiedene Validierungsregeln bereit; wird eine der Regeln vom Code nicht erfüllt, gibt das Tool automatisch eine Warnung aus – bei WebStorm-Projekten sogar direkt im Editor. Ein kürzlich veröffentlichtes Update des Tools stellt zudem automatische Fixes für einige Code-Style-Regeln zur Verfügung.

JSCS kann über npm installiert und dann in den WebStorm-Einstellungen aktiviert werden.

Egal für welche Methode man sich aber auch entscheidet, das Schreiben von konsistentem Code in WebStorm wird Entwicklern so deutlich vereinfacht – und dürfte letztendlich auch dem gesamten Projektteam und dem End-User zu Gute kommen.

Aufmacherbild: HTML code on lcd screen von Shutterstock / Urheberrecht: spaxiax