JSHint Learning JavaScript the Hard Way
Adrian-Tudor Pă[email protected]
About me
● ~5 years of Computer Science● Germany, Switzerland, Romania● NEC, CERN, Cynny Social Cloud● Web Applications Development
JavaScript
● Used first time around 2010● Recently moved from Python● Open Source: Invenio, Intro.js, silog
First Real JavaScript Project
● Inherited project with some (many) issues
● Web Analytics/ Advertisements Web App
● Shared client/ server code base
Taming the Beast
● First step: understand the code● pylint/ PEP8 → JSHint● Cleanup → Discovery ↔ Learning
JSHint
● Static code analysis● Highly-configurable● Open-source, used by:
○ Mozilla○ Twitter○ Facebook○ Apache
What would JSHint complain about?
gcd = function(first_number, second_number) {
var result;
while (first_number != second_number)
if (first_number > second_number) {
var first_number = first_number - second_number;
} else if (first_number <= second_number) {
second_number -= first_number;
} else {}
console.log('result is:', first_number | second_number);
}(12, 24)
First run
● maxerr = 50, hit that● Things started looking suspicious● Did the guys before me have any idea
what they were doing?● Do I have any idea about what I am
doing?
eqeqeq
● Expected '===' and instead saw '=='.● Anyone coming from any other
language to JS will find this amazing● [ ] == 0 // true● [ ] === 0 // false
eqeqeq (Cont.)
eqeqeq (Cont.)
eqeqeq (Cont.)
● The Strict Equals Operator (===): shorter, more straight-forward algorithm
● Better for someone accustomed to this behaviour
● Inexperienced devs might miss the point of == and experience some sleepless nights
foo is already defined (-W004)
Deeper the Rabbit Hole - latedef
Is this real life?
● Function scope - funcscope, shadow● Hoisting● Closures● Missing var… but not in strict mode,
whatever that is
Semicolons: FUD or truth?
Semicolons: FUD or truth?
asi/ lastsemic (Cont.)
● Zen of Python: “Explicit is better than implicit.”
● Controversial, but smart life decision for (junior?) developers
Curly
forin
forin (Cont.)
● The body of a for in should be wrapped in an if statement to filter unwanted properties from the prototype.
● So, it doesn’t work like Python…? (obv.)● typeof [] === ‘object’ - I am really confused
now.
Code quality
● quotmark● immed● boss● newcap● expr● notypeof● freeze
● maxlen● unused● loopfunc● camelcase● es3/ esnext● noempty● nonew
Function over style?
● maxparams - maybe use an args object?
● maxstatements - don’t make me scroll● maxdepth - nests, nests everywhere● maxcomplexity - if for if wtf if while if
else
Conclusions
● Static code analysis: controversial but will help novices (and not only) write maintainable code
● Expose juniors to some new concepts○ latedef and -W004 will send you
through a long spiritual journey
Conclusions (Cont.)
● Can help maintain some standards, especially among heterogeneous teams
● My project had a good outcome, some JS learned
● Still using JSHint
Your questions,answered.
Other tools
● JSLint - more explanatory, explicit○ jslinterrors.com
● ESLint - very configurable, check it out!● Google Closure Linter - strict typing● Flow - static type checker● JSure, JavaScript Lint
How do I use it?
● Editor plugin● Grunt task: grunt-contrib-jshint● Git hook: pre-push, merge request● Continuous integration step