jshint

If you add a lint checker, like jshint, to your build steps those kinds of bugs are found instantly.

If you want more control, use ESlint or jslint or jshint and define your own rules.

You'd spot that right away if you had a visual jshint/jslint plugin in your IDE.

When I was learning js, my life greatly improved when I started using jshint in my editor.

You can catch undefined variables with something like eslint or jshint.

I should check jshint but unfortunately jslint primed me against that kind of tools.

Just reading on possible configuration options for JSHint already made me consider many potential pitfalls I wouldn't have even thought of otherwise..

All the ones I use (cppcheck, jshint, jsxhint, ruby, clang) require that you have the toolchains already installed.

If everything is defined beforehand, jshint will show two warnings.

I'm aware many people have qualms with JSLint, some even with JSHint.

Also lint your code through JSLint or JSHint.

Also EditorConfig and JSHint, good on them.

I started using jshint and jscs recently in part to enforce the use of semicolons (on the advice of "JavaScript: The Good Parts").

That's what linting is good for, at least in JavaScript where you have optional "var" declarations: You can set jshint to flag as an error any assignment that isn't part of a "var" declaration (or any reference that isn't explicitly defined), which will catch (at compile time) any variable name typos.

Jshint catches this with 2 warnings: missing semicolon and expected assingment or function call.