JavaScript Linting und Styleguides
JavaScript mit Hilfe von Styleguides und Lintern sauber halten
Man sagt ja, Ordnung ist das halbe Leben. Nun lasse ich zumindest in meinen JavaScript-Code selbige einziehen. In diesem Artikel möchte ich euch meinen aktuellen JavaScript Styleguide vorstellen, und welche Tools ich nutze, um diesen möglichst effizient einzuhalten.
Den richtigen Styleguide finden
Wie so oft im Web-Development-Bereich wurde der mühsame Teil bereits für uns erledigt: Es gibt einige sehr umfangreiche Styleguides von privaten Entwicklern und großen Firmen, welche ohne große Umwege direkt verwendet werden können.
Hier ist eine kleine Auswahl an bestehenden Styleguides von verschiedensten Unternehmen. Hier dürfte für jeden Geschmack etwas dabei sein:
Hier ist eine weitere Liste von Sytleguides. Natürlich kann man auch selber einen eigenen Styleguide schreiben, wenn man die Lust dazu hat.
Mein persönlicher Favorit ist der Styleguide von Airbnb. Diesen gibt es sowohl für ES5 als auch für (link: https://github.com/airbnb/javascript text: ES6). Da ich beruflich zum großen Teil noch ES5 programmiere, ist gerade die ES5 Ausführung sehr von Vorteil.
Linter
Es gibt unterschiedliche Möglichkeiten, wie man seinen Workflow so konfiguriert, dass man automatisch Feedback zu eventuellen Fehlern oder “Unschönheiten” im Code erhält. Hier greife ich auf so genannte Linter zurück. Diese verwenden die oben genannten Styleguides, um den Code auf seine Gültigkeit und auf die korrekte Formatierung zu überprüfen oder diese sogar zu beheben.
Auch hier ist die Auswahl groß. Die wohl bekanntesten JS Linter sind Folgende:
Auch hier überlasse ich die Wahl eurem Geschmack. Hier ist ein Artikel, der sich mit den Vor- und Nachteilen der oben genannten Linter beschäftigt.
Auszuführen sind diese Linter übers Terminal. Dabei greifen diese auf eine Konfigurationsdatei zurück, welche angibt, welcher Styleguide zu verwenden ist oder welche Regeln berücksichtigt werden sollen.
Beispiel JSCS & Airbnb ES5 Styleguide
Nun wird es Zeit, JSCS zu konfigurieren. In diesem Beispiel verwende ich die JSCS-Konfiguration von Airbnb für ES5.
Diese Konfiguration kann nun als Argument an das JSCS CLI übergeben werden (jscs js/script.js --config path/to/config.json) oder man hält sich an ein Namensschema, welches von den jeweiligen Lintern vorgegeben wird. JSCS sucht automatisch bis ins Homeverzeichnis nach einer .jscsrc-Datei (ESLint zB. nach einer .eslintrc.json), wenn der Linter gestartet wird. Somit erspart man sich das angeben des --configArguments.
JSCS mit Gulp
Mit Gulp ist das Erstellen von einem Lint Task recht einfach. Der folgende Code legt einen JSCS-Linting-Task namens jscs an, der alle JS Dateien in einem “js”-Ordner überprüft. Der generierte Bericht wird in der Konsole ausgegeben. JSCS durchsucht automatisch das Projektverzeichnis nach der .jscsrc-Konfigurationsdatei. Für den Task wird gulp-jscs verwendet.
Zusätzlich wird ein zweiter Task namens jscs-fix angelegt, welcher alle gefundenen Fehler automatisch behebt.
var gulp = require('gulp');
var jscs = require('gulp-jscs');
gulp.task('jscs', function() {
return gulp.src('js/**/*.js')
.pipe(jscs())
.pipe(jscs.reporter());
});
gulp.task('jscs-fix', function() {
return gulp.src('js/**/*.js')
.pipe(jscs({ fix: true }))
.pipe(jscs.reporter())
.pipe(gulp.dest('js'));
});
gulp.task('default', ['jscs']);
JSCS mit PHPStorm
PHPStorm kommt ebenfalls mit integrierten Lintern, die den Code “on-the-fly” überprüfen und sofort Feedback geben. Sehr praktisch!
Hier ist ein Beispiel, wie man PHPStorm so konfigurieren kann, dass es JSCS verwendet. Wichtig ist, dass der Ort vom JSCS-Linter angegeben wird. Wie bei Gulp, sucht JSCS die Konfigurationsdatei bis ins Homeverzeichnis. Diese kann also ohne Probleme im Projektverzeichnis liegen bleiben und sogar pro Projekt anders konfiguriert werden.
Nachdem JSCS fertig konfiguriert wurde, werden Fehler sofort im Editor angezeigt.
