SlideShare ist ein Scribd-Unternehmen logo
1 von 32
Downloaden Sie, um offline zu lesen
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üfung
Syntaxfehler 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üfung
Vermeidung 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üfung
Forcierung 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 ≠ JSHint
Hauptunterschiede 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()
Fazit
ESLint – 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
Fragen?!
Twitter: @mkuehnel
E-Mail: mail@michael-kuehnel.de
💭
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

Weitere ähnliche Inhalte

Ähnlich wie The state of JavaScript Linting - Deutsche Version

JavaScript für Java-Entwickler W-JAX 2013
JavaScript für Java-Entwickler W-JAX 2013JavaScript für Java-Entwickler W-JAX 2013
JavaScript für Java-Entwickler W-JAX 2013
Oliver Zeigermann
 
TYPO3 5.0 - Der aktuelle Stand der Zukunft
TYPO3 5.0 - Der aktuelle Stand der ZukunftTYPO3 5.0 - Der aktuelle Stand der Zukunft
TYPO3 5.0 - Der aktuelle Stand der Zukunft
Jochen Rau
 

Ähnlich wie The state of JavaScript Linting - Deutsche Version (20)

Besseren Java Code mit Type Annotations
Besseren Java Code mit Type AnnotationsBesseren Java Code mit Type Annotations
Besseren Java Code mit Type Annotations
 
Web Entwicklung mit PHP - Teil 3 Beta
Web Entwicklung mit PHP - Teil 3 BetaWeb Entwicklung mit PHP - Teil 3 Beta
Web Entwicklung mit PHP - Teil 3 Beta
 
Top 10 Internet Trends 2003
Top 10 Internet Trends 2003Top 10 Internet Trends 2003
Top 10 Internet Trends 2003
 
Kata - Java - Tests - JUnit 4
Kata - Java - Tests - JUnit 4Kata - Java - Tests - JUnit 4
Kata - Java - Tests - JUnit 4
 
JavaScript für Java-Entwickler W-JAX 2013
JavaScript für Java-Entwickler W-JAX 2013JavaScript für Java-Entwickler W-JAX 2013
JavaScript für Java-Entwickler W-JAX 2013
 
Windows Powershell
Windows PowershellWindows Powershell
Windows Powershell
 
Automatischer Build mit Maven
Automatischer Build mit MavenAutomatischer Build mit Maven
Automatischer Build mit Maven
 
Monitoring und Profiling von Java-Anwendungen
Monitoring und Profiling von Java-AnwendungenMonitoring und Profiling von Java-Anwendungen
Monitoring und Profiling von Java-Anwendungen
 
Automatischer Build mit Maven - OPITZ CONSULTING - Stefan Scheidt
Automatischer Build mit Maven - OPITZ CONSULTING - Stefan ScheidtAutomatischer Build mit Maven - OPITZ CONSULTING - Stefan Scheidt
Automatischer Build mit Maven - OPITZ CONSULTING - Stefan Scheidt
 
bccon-2014 adm01 tipps-und-skripts-aus-dem-leben-eines-ibm-connections-admins
bccon-2014 adm01 tipps-und-skripts-aus-dem-leben-eines-ibm-connections-adminsbccon-2014 adm01 tipps-und-skripts-aus-dem-leben-eines-ibm-connections-admins
bccon-2014 adm01 tipps-und-skripts-aus-dem-leben-eines-ibm-connections-admins
 
Tipps und Skripts aus dem Leben eines Connections Admins
Tipps und Skripts aus dem Leben eines Connections AdminsTipps und Skripts aus dem Leben eines Connections Admins
Tipps und Skripts aus dem Leben eines Connections Admins
 
Icsug conf 14_tipps-und-skripts-fuer-ibm-connections-administratoren
Icsug conf 14_tipps-und-skripts-fuer-ibm-connections-administratorenIcsug conf 14_tipps-und-skripts-fuer-ibm-connections-administratoren
Icsug conf 14_tipps-und-skripts-fuer-ibm-connections-administratoren
 
A/B Testing mit Node.js
A/B Testing mit Node.jsA/B Testing mit Node.js
A/B Testing mit Node.js
 
Testing tools
Testing toolsTesting tools
Testing tools
 
DOM-based XSS
DOM-based XSSDOM-based XSS
DOM-based XSS
 
TYPO3 5.0 - Der aktuelle Stand der Zukunft
TYPO3 5.0 - Der aktuelle Stand der ZukunftTYPO3 5.0 - Der aktuelle Stand der Zukunft
TYPO3 5.0 - Der aktuelle Stand der Zukunft
 
Nagios Conference 2007 | Vmware Monitoring by Ingo Latschner
Nagios Conference 2007 | Vmware Monitoring by Ingo LatschnerNagios Conference 2007 | Vmware Monitoring by Ingo Latschner
Nagios Conference 2007 | Vmware Monitoring by Ingo Latschner
 
Einführung in die funktionale Programmierung mit Clojure
Einführung in die funktionale Programmierung mit ClojureEinführung in die funktionale Programmierung mit Clojure
Einführung in die funktionale Programmierung mit Clojure
 
GWT
GWTGWT
GWT
 
Puppet: Designing modules & repositories
Puppet: Designing modules & repositoriesPuppet: Designing modules & repositories
Puppet: Designing modules & repositories
 

The state of JavaScript Linting - Deutsche Version

  • 1. The state of JavaScript Linting JS Syntax Überprüfung und Validierung
  • 2. Michael Kühnel - Macht Internet seit Netscape 4.7 - Ab April Frontend Developer bei Micromata - Twitter: @mkuehnel - Website: www.michael-kuehnel.de
  • 3. 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
  • 4. Gemeinsamkeiten Oder was ist denn eigentlich dieses linting …
  • 5. 1. Gleicher Zweck - Code Qualitätsprüfung Syntax Checker und Validator (JavaScript und JSON)
  • 6. Code Qualitätsprüfung Syntaxfehler 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
  • 7. Code Qualitätsprüfung Vermeidung von logischen Fehlern / Strukturellen Problemen ➡️ Erhöhung der Maintainability z.B. - Detection von unreachable Code - Versehentliche globale Variable - Nicht verwendete Parameter - usw.
  • 8. Code Qualitätsprüfung Forcierung der Einhaltung von Coding Conventions z.B. - Einrückung - Schreibweise von Konstruktoren - Verwendung von eval() - usw.
  • 9. 2. Gleiche Funktionsweise A. Findet Fehler B. Beschreibt das Problem C. nennt die Stelle im Quellcode (Zeilennummer)
  • 10. 3. Gleiche Sprache – gleiche Umgebungen - In JavaScript geschrieben: - Browser - node.js / Rhino - JS basierte Build tools (Grunt, gulp etc.) - Editor Plugins
  • 11. 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
  • 12. Es gibt keinen fehlerfreien Code 😎 Zusätzlich empfehlenswert für Code-Qualität im Team: - Unit-Tests - Funktionale Test - Code Reviews
  • 13. JSLint (will hurt your feelings) Initial release 2002
  • 14. 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
  • 15. JSHint (The »Gentler« JavaScript Code Quality Tool) Initial release 2010
  • 16. JSHint - Autor: Anton Kovalyov - Intention: Flexibleres Linting Tool - http://jshint.com
  • 17. 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
  • 18. - 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
  • 19. 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
  • 20. 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
  • 21. 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
  • 22. ESLint
 (The pluggable linting utility for JavaScript) Initial release 2013
  • 23. ESLint - Creator: Nicholas C. Zakas - Intention: - Noch flexibleres/ erweiterbares Linting Tool. - Zunächst kompatibel zu JSHint - Sachen Regeln - http://eslint.org
  • 24. ESLint ≠ JSHint Hauptunterschiede 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 😘
  • 25. 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.
  • 26. 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.
  • 27. 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()
  • 28. Fazit ESLint – 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
  • 30. 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
  • 31. 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
  • 32. 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