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
- Websi...
Historie
Die (subjektiv) »wichtigsten« Tools
- JSLint (Release 2002)*
- JSHint (Initial release 2010)
- ESLint (Initial re...
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
- Feh...
Code Qualitätsprüfung
Vermeidung von logischen Fehlern / Strukturellen
Problemen ➡️ Erhöhung der Maintainability z.B.
- De...
Code Qualitätsprüfung
Forcierung der Einhaltung von Coding Conventions
z.B.
- Einrückung
- Schreibweise von Konstruktoren
...
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...
4. Sorgen nicht für
fehlerfreien Code
Minimieren aber die Fehlerquellen durch Einsatz an
sinnvoller Stelle im Workflow:
- b...
Es gibt keinen fehlerfreien
Code 😎
Zusätzlich empfehlenswert für Code-Qualität im
Team:
- Unit-Tests
- Funktionale Test
- ...
JSLint
(will hurt your feelings)
Initial release 2002
JSLint
- Autor: JavaScript Guru Douglas Crockford
(»Erfinder von JSON«, Entwickler von JSMin)
- Zitat von Crockford: »JavaS...
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 o...
- Enforcing Options - für strikteren Code
- z.B. 'maxparams' Definition der maximalen Anzahl an
Parametern pro Funktion
- R...
Verfügbar als:
- Plugin für etliche Editoren
- Task für Grunt/gulp
- usw. Siehe Auszug auf http://jshint.com/install
- zum...
Pläne für den nächsten Major Release (3.0)
- Entfernung aller »style-related« Optionen und
Warnungen.
- Zitat: »Falls es S...
JSHint - Die Zukunft
- Ursache für »neue« Linting Tools wie:
- node-jscs (JavaScript Code Style checker)
- https://twitter...
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 J...
ESLint ≠ JSHint
Hauptunterschiede zu JSHint:
- Eine API für das einfache erstellen neuer Regeln (Plugin-System)
- Jede Reg...
ESLint - Optionen für
Konfiguration
- Environments
- Laufzeitumgebung (Browser/Node/Rhino).
- Jede Umgebung definiert ein Se...
ESLint - Überblick der
Regeln
1. Possible Errors:
- Mögliche Fehler im Code
- z.B. 'no-dupe-keys' – Hinweis auf doppelte K...
ESLint - Überblick der
Regeln
4. Variables:
- Regeln die mit der Deklaration von Variablen zu tun haben
- z.B. 'no-shadow'...
Fazit
ESLint – The way to go 🔥 – trotz frühem Entwicklungsstand (0.4.2)
- Größtes Set an Regeln die am flexibelsten zu konfi...
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
- JSLin...
Links II
- JSHint
- http://anton.kovalyov.net/p/why-jshint
- http://jshint.com
- http://jshint.com/docs/options
- https://...
Links III
- ESLint
- http://eslint.org
- https://github.com/eslint/eslint
- https://twitter.com/geteslint
- http://eslint....
Nächste SlideShare
Wird geladen in …5
×

The state of JavaScript Linting - Deutsche Version

1.380 Aufrufe

Veröffentlicht am

English version: http://de.slideshare.net/mischah/js-linting-en

Untertitel: JS Syntax Überprüfung and Validierung

Session vom 3. Kasseler Webmontag.
Beantwortet die Frage »Was ist denn eigentlich dieses linting …« und stellt die Tools JSLint, JSHint und ESLint vor.

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.380
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
15
Aktionen
Geteilt
0
Downloads
11
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

The state of JavaScript Linting - Deutsche Version

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

×