Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und relevantere Anzeigen zu schalten. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
The state of
JavaScript Linting
JS Syntax Checking and Validation
Michael Kühnel
- Doing web stuff since Netscape 4.7
- Frontend Developer at Micromata
- Twitter: @mkuehnel
- Website: www....
History
The (subjectively) »most important« Tools:
- JSLint (Release 2002)*
- JSHint (Initial release 2010)
- ESLint (Init...
Common facts
or what is this linting thing all about …
1. Same purpose - Quality
inspection
Syntax Checker and Validator (JavaScript und JSON)
Quality inspection
Syntax errors which will occur in the browser e.g.
- trailing comma in object literals
- Missing or unn...
Quality inspection
Prevention of logical errors / structural problems ➡️
Increment of maintainability e.g.
- Detection of ...
Quality inspection
Forcing adherence to coding conventions e.g.
- Indentation
- InitialCaps for constructors
- Use of eval...
2. Same functionality
A. Finds errors
B. Describes the problem
C. Pointing to the position in code (line number)
3. Same language – same
environments
- Written in JavaScript:
- Browser
- node.js / Rhino
- JS based build tools (Grunt, g...
4. Doesn’t guarantee error-
free code
But reduce the potential sources of error by usage in
a convenient place within your...
There is no error-free code
btw. 😎
Additional recommendations to ensure code quality
within your team:
- Unit-Tests
- Func...
JSLint
(will hurt your feelings)
Initial release 2002
JSLint
- Author: JavaScript Guru Douglas Crockford
(»Inventor of JSON«, Developer of JSMin)
- Quote from Crockford: »JavaS...
JSHint
(The »Gentler« JavaScript
Code Quality Tool)
Initial release 2010
JSHint
- Author: Anton Kovalyov
- Intention: A more flexible linting tool
- http://jshint.com
Main differences to JSLint:
- Community Driven (133 contributors)
- Test coverage of the source code (Unit-Tests)
- Less o...
- Enforcing Options
- e.g. 'maxparams' lets you set the max number of formal
parameters allowed per function.
- Relaxing O...
Available as:
- Plugin for almost every editor/IDE
- Task for Grunt/gulp
- etc. See http://jshint.com/install
- Just for a...
Plans for the next major release (3.0)
- Remove all style-related options and warnings.
- If it makes sense they should be...
JSHint - The future
- Strengthens »new« linting tools like:
- node-jscs (JavaScript Code Style checker)
- https://twitter....
ESLint

(The pluggable linting utility
for JavaScript)
Initial release 2013
ESLint
- Creator: Nicholas C. Zakas
- Intention:
- More flexible/ pluggable linting tool.
- Initially compatible to JSHint ...
ESLint ≠ JSHint
Main differences to JSHint:
- API for plugging in your own rules
- Every rule is a plugin (even the defaul...
ESLint - Options
- Environments
- (browser/node/amd/mocha).
- An environment defines both global variables that are
predefin...
ESLint - Overview of the
rules
1. Possible Errors:
- e.g. 'no-dupe-keys' – disallow duplicate keys when creating object li...
ESLint - Overview of the
rules
4. Variables:
- These rules have to do with variable declarations
- e.g. 'no-shadow' - disa...
Conclusion
ESLint – The way to go 🔥 – despite the early version (0.4.2)
- Huge set of rules with the most flexible configura...
Questions?!
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....
Links IV
- CoffeeScript
- http://www.coffeelint.org
Nächste SlideShare
Wird geladen in …5
×

The state of JavaScript Linting - English version

2.479 Aufrufe

Veröffentlicht am

Deutsche Version: http://de.slideshare.net/mischah/js-linting

Subtitle: JS Syntax Checking and Validation

Session from 3rd Webmontag Kassel.
Answers the question: »What is this linting thing all about?« and introduces tools like JSLint, JSHint and ESLint.

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

The state of JavaScript Linting - English version

  1. 1. The state of JavaScript Linting JS Syntax Checking and Validation
  2. 2. Michael Kühnel - Doing web stuff since Netscape 4.7 - Frontend Developer at Micromata - Twitter: @mkuehnel - Website: www.michael-kuehnel.de
  3. 3. History The (subjectively) »most important« Tools: - JSLint (Release 2002)* - JSHint (Initial release 2010) - ESLint (Initial release 2013) *JSLint only made it into this list for historical reasons.
  4. 4. Common facts or what is this linting thing all about …
  5. 5. 1. Same purpose - Quality inspection Syntax Checker and Validator (JavaScript und JSON)
  6. 6. Quality inspection Syntax errors which will occur in the browser e.g. - trailing comma in object literals - Missing or unnecessary semicolons - Lack of closing brackets - Any kind of typing errors
  7. 7. Quality inspection Prevention of logical errors / structural problems ➡️ Increment of maintainability e.g. - Detection of unreachable code - Globale variables by accident - Unused parameters - etc.
  8. 8. Quality inspection Forcing adherence to coding conventions e.g. - Indentation - InitialCaps for constructors - Use of eval() - etc.
  9. 9. 2. Same functionality A. Finds errors B. Describes the problem C. Pointing to the position in code (line number)
  10. 10. 3. Same language – same environments - Written in JavaScript: - Browser - node.js / Rhino - JS based build tools (Grunt, gulp etc.) - Editor Plugins
  11. 11. 4. Doesn’t guarantee error- free code But reduce the potential sources of error by usage in a convenient place within your Workflow: - Everytime you save a file - as pre-commit hook - within the build Process
  12. 12. There is no error-free code btw. 😎 Additional recommendations to ensure code quality within your team: - Unit-Tests - Functional Tests - Code Reviews
  13. 13. JSLint (will hurt your feelings) Initial release 2002
  14. 14. JSLint - Author: JavaScript Guru Douglas Crockford (»Inventor of JSON«, Developer of JSMin) - Quote from Crockford: »JavaScript is a sloppy language, but inside it there is an elegant, better language.« - Intention: Enforcing the »Good Parts« of JavaScript - http://jslint.com
  15. 15. JSHint (The »Gentler« JavaScript Code Quality Tool) Initial release 2010
  16. 16. JSHint - Author: Anton Kovalyov - Intention: A more flexible linting tool - http://jshint.com
  17. 17. Main differences to JSLint: - Community Driven (133 contributors) - Test coverage of the source code (Unit-Tests) - Less opinionated (http://anton.kovalyov.net/p/why-jshint) - More Options (configurable) - Support for ECMAScript 6 - Configuration via JavaScript comments or text files (Recommendation .jshintrc ➡️ Team standard + »inheritance«) JSHint ≠ JSLint
  18. 18. - Enforcing Options - e.g. 'maxparams' lets you set the max number of formal parameters allowed per function. - Relaxing Options - e.g. 'loopfunc' - suppresses warnings about functions inside of loops. - Environment options - pre-defined global variables for specific environments - e.g. 'jquery' - suppresses warnings about the usage of '$' und 'jQuery'. JSHint - Options
  19. 19. Available as: - Plugin for almost every editor/IDE - Task for Grunt/gulp - etc. See http://jshint.com/install - Just for a quick test if it suits your needs: on the website of JSHint JSHint for all of you
  20. 20. Plans for the next major release (3.0) - Remove all style-related options and warnings. - If it makes sense they should be moved into optional plugins. - Build a foundation for plugins See http://www.jshint.com/blog/jshint-3-plans/ JSHint - The future
  21. 21. JSHint - The future - Strengthens »new« linting tools like: - 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: - More flexible/ pluggable linting tool. - Initially compatible to JSHint - in terms of available options - http://eslint.org
  24. 24. ESLint ≠ JSHint Main differences to JSHint: - API for plugging in your own rules - Every rule is a plugin (even the default rules) - Every rule can be able to be turned off or on! - More rules than JSHint - Ever rule can be set to be a warning or error individually - Config files in JSON Format or YAML - »More beautiful« linting reports in your terminal 😘
  25. 25. ESLint - Options - Environments - (browser/node/amd/mocha). - An environment defines both global variables that are predefined as well as which rules should be on or off by default. - Globals - Defining own globals so that ESLint will not warn about their usage. - Rules - Activating rules and define the error-level individually.
  26. 26. ESLint - Overview of the rules 1. Possible Errors: - e.g. 'no-dupe-keys' – disallow duplicate keys when creating object literals 2. Best Practices: - They either prescribe a better way of doing something or help you avoid footguns. - e.g. 'wrap-iife' – require immediate function invocation to be wrapped in parentheses. 3. Strict Mode: - These rules relate to using strict mode (ECMAScript5). - e.g. 'no-extra-strict' – disallow unnecessary use of "use strict"; when already in strict mode.
  27. 27. ESLint - Overview of the rules 4. Variables: - These rules have to do with variable declarations - e.g. 'no-shadow' - disallow declaration of variables already declared in the outer scope. 5. Node.js: - These rules are specific to JavaScript running on Node.js - e.g. 'no-process-exit' - disallow process.exit() 6. Stylistic Issues: - These rules are purely matters of style and are quite subjective - e.g. 'no-new-object' - disallow use of the Object constructor
  28. 28. Conclusion ESLint – The way to go 🔥 – despite the early version (0.4.2) - Huge set of rules with the most flexible configuration - future-proof in terms of »style related warnings« - Pluggability (e.g. company-specific rules to enforce coding guidelines) - Probably gathering the most contributors in the near future. - The eco-system is ready: Even available as module for less know JS build tools like Broccoli. Siehe http://eslint.org/docs/ integrations
  29. 29. Questions?! 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
  33. 33. Links IV - CoffeeScript - http://www.coffeelint.org

×