The state of JavaScript Linting - English version

2,263 views

Published on

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.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,263
On SlideShare
0
From Embeds
0
Number of Embeds
102
Actions
Shares
0
Downloads
12
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

×