Date post: | 18-Dec-2014 |
Category: |
Technology |
Upload: | michael-kuehnel |
View: | 759 times |
Download: | 3 times |
The state of JavaScript Linting
JS Syntax Überprüfung und Validierung
Michael Kühnel
- Macht Internet seit Netscape 4.7
- Ab April Frontend Developer bei Micromata
- Twitter: @mkuehnel
- Website: www.michael-kuehnel.de
Historie
Die (subjektiv) »wichtigsten« Tools
- JSLint (Release 2002)*
- JSHint (Initial release 2010)
- ESLint (Initial release 2013)
*JSLint nur aus historischen Gründen in der Liste
Gemeinsamkeiten
Oder was ist denn eigentlich dieses linting …
1. Gleicher Zweck - Code Qualitätsprüfung
Syntax Checker und Validator (JavaScript und JSON)
Code QualitätsprüfungSyntaxfehler die spätestens im Browser knallen würden z.B.
- letztes Komma bei Object literals
- Fehlende oder unnötige Semikolons
- Fehlen von schließenden Klammern
- Tippfehler jeglicher Art
Code QualitätsprüfungVermeidung von logischen Fehlern / Strukturellen Problemen ➡️ Erhöhung der Maintainability z.B.
- Detection von unreachable Code
- Versehentliche globale Variable
- Nicht verwendete Parameter
- usw.
Code QualitätsprüfungForcierung der Einhaltung von Coding Conventions z.B.
- Einrückung
- Schreibweise von Konstruktoren
- Verwendung von eval()
- usw.
2. Gleiche Funktionsweise
A. Findet Fehler
B. Beschreibt das Problem
C. nennt die Stelle im Quellcode (Zeilennummer)
3. Gleiche Sprache – gleiche Umgebungen
- In JavaScript geschrieben:
- Browser
- node.js / Rhino
- JS basierte Build tools (Grunt, gulp etc.)
- Editor Plugins
4. Sorgen nicht für fehlerfreien Code
Minimieren aber die Fehlerquellen durch Einsatz an sinnvoller Stelle im Workflow:
- beim Speichern
- als pre-commit hook
- Im Build Process
Es gibt keinen fehlerfreien Code 😎
Zusätzlich empfehlenswert für Code-Qualität im Team:
- Unit-Tests
- Funktionale Test
- Code Reviews
JSLint (will hurt your feelings)
Initial release 2002
JSLint- Autor: JavaScript Guru Douglas Crockford
(»Erfinder von JSON«, Entwickler von JSMin)
- Zitat von Crockford: »JavaScript is a sloppy language, but inside it there is an elegant, better language.«
- Intention: Enforcing der »Good Parts« von JavaScript
- http://jslint.com
JSHint (The »Gentler« JavaScript
Code Quality Tool)Initial release 2010
JSHint
- Autor: Anton Kovalyov
- Intention: Flexibleres Linting Tool
- http://jshint.com
Hauptunterschiede zu JSLint:
- Community Driven (133 contributors)
- Testabdeckung des Quellcodes (Unit-Tests)
- Weniger opinionated (http://anton.kovalyov.net/p/why-jshint)
- Mehr Optionen (ein- und ausschaltbar)
- ECMAScript 6 support
- Konfiguration über JavaScript Kommentare oder Text-Dateien (Empfehlung .jshintrc -> Arbeiten im Team + »Vererbung«)
JSHint ≠ JSLint
- Enforcing Options - für strikteren Code
- z.B. 'maxparams' Definition der maximalen Anzahl an Parametern pro Funktion
- Relaxing Options - für tolerantere Überprüfung
- z.B. 'loopfunc' - Unterdrückt Warnungen bei Definition von Funktionen innerhalb von Schleifen.
- Environment options - pre-defined globale Variablen für spezifische Umgebungen
- z.B. 'jquery' - Vermeidet Warnung bei der Verwendung von '$' und 'jQuery'.
JSHint - Überblick der Optionen
Verfügbar als:
- Plugin für etliche Editoren
- Task für Grunt/gulp
- usw. Siehe Auszug auf http://jshint.com/install
- zum Ausprobieren auf der Website von JSHint
JSHint für alle
Pläne für den nächsten Major Release (3.0)
- Entfernung aller »style-related« Optionen und Warnungen.
- Zitat: »Falls es Sinn macht sollten sie in optionale Plugins überführt werden.«
- Plugin-System für Erweiterungen
Siehe http://www.jshint.com/blog/jshint-3-plans/
JSHint - Die Zukunft
JSHint - Die Zukunft- Ursache für »neue« Linting Tools wie:
- node-jscs (JavaScript Code Style checker)
- https://twitter.com/mikesherov/status/419596672520318976
- https://github.com/mdevils/node-jscs
- ESLint
- http://eslint.org
ESLint(The pluggable linting utility
for JavaScript)Initial release 2013
ESLint- Creator: Nicholas C. Zakas
- Intention:
- Noch flexibleres/ erweiterbares Linting Tool.
- Zunächst kompatibel zu JSHint - Sachen Regeln
- http://eslint.org
ESLint ≠ JSHintHauptunterschiede zu JSHint:
- Eine API für das einfache erstellen neuer Regeln (Plugin-System)
- Jede Regel ist ein Plugin (auch die mitgelieferten)
- Jede Regel ist abschaltbar!
- Noch mehr Regeln als JSHint
- Jede Regel kann je nach Bedarf Fehler oder Warnungen produzieren
- Config files im JSON Format oder YAML (weniger Schreibarbeit)
- »Schönere« Ausgabe im Terminal 😘
ESLint - Optionen für Konfiguration
- Environments
- Laufzeitumgebung (Browser/Node/Rhino).
- Jede Umgebung definiert ein Set an globalen Variablen und Regeln die per Default aktiviert sind.
- Globals
- Weitere selbst definierte globale Variablen
- Rules
- Welche regeln sind aktiviert und welcher Fehler-Level ist definiert.
ESLint - Überblick der Regeln
1. Possible Errors:
- Mögliche Fehler im Code
- z.B. 'no-dupe-keys' – Hinweis auf doppelte Keys bei Object literals
2. Best Practices:
- Hinweise auf Code-Fragemente die man lieber anders schreiben sollte.
- z.B. 'wrap-iife' – Hinweis darauf, dass man sich selbst aufrufende Funktionen mit Klammern umschließen sollte.
3. Strict Mode:
- Regeln die den Strict Mode betreffen (ECMAScript5)
- z.B. 'no-extra-strict' – Warnung bei Verwendung von "use strict" wenn bereits in strict mode.
ESLint - Überblick der Regeln
4. Variables:
- Regeln die mit der Deklaration von Variablen zu tun haben
- z.B. 'no-shadow' – Warnung bei Deklaration von Variablennamen die bereits in einem äußeren Scope verwendet werden.
5. Node.js:
- Node.js spezifische Regeln
- z.B. 'no-process-exit' Warnung bei Verwendung von process.exit()
6. Stylistic Issues:
- Regeln die »nur« coding Style betreffen
- z.B. 'no-new-object' - Warnung bei Verwendung des Object Constructors: new Object()
FazitESLint – The way to go 🔥 – trotz frühem Entwicklungsstand (0.4.2)
- Größtes Set an Regeln die am flexibelsten zu konfigurieren sind
- Zukunftssicher in Sachen »Style related Warnings«
- Pluggability (z.b. für firmeninterne Regeln zur Einhaltung von Coding Guidelines)
- Vermutlich schon bald die größte Entwicklergemeinde hinter dem Projekt
- Neben Grunt auch für exotischer JS-Build Tools wie Broccoli als Module erhältlich ; ] Siehe http://eslint.org/docs/integrations
Links I- JavaScript: The Good Parts:
- http://www.amazon.de/JavaScript-Parts-Working-Shallow-Grain/dp/0596517742
- JSLint:
- http://jslint.com
- https://github.com/douglascrockford/JSLint
Links II- JSHint
- http://anton.kovalyov.net/p/why-jshint
- http://jshint.com
- http://jshint.com/docs/options
- https://github.com/jshint/jshint
- http://jshint.com/install
- https://github.com/sindresorhus/jshint-stylish
- https://twitter.com/jshint
Links III- ESLint
- http://eslint.org
- https://github.com/eslint/eslint
- https://twitter.com/geteslint
- http://eslint.org/docs/configuring
- http://eslint.org/docs/rules/
- http://eslint.org/docs/integrations