Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

The state of JavaScript Linting - Deutsche Version

1.525 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
  • Als Erste(r) kommentieren

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

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

×