The state of JavaScript Linting - Deutsche Version
0 gefällt mir2,014 aufrufe
Das Dokument behandelt den Zustand der JavaScript-Linting-Tools, einschließlich ihrer Historie und Funktionalität zur Code-Qualitätsprüfung. Es stellt die Unterschiede zwischen Tools wie JSLint, JSHint und ESLint vor und hebt hervor, wie sie Fehler finden und die Einhaltung von Coding-Conventions fördern. Der Autor betont die Bedeutung von Linting im Entwicklungsprozess und empfiehlt zusätzlich Unit-Tests und Code-Reviews zur Verbesserung der Code-Qualität.
![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](https://image.slidesharecdn.com/jslinting-140317185853-phpapp02/85/The-state-of-JavaScript-Linting-Deutsche-Version-28-320.jpg)
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