What are JavaScript linters?
Code linting is a way to increase code quality.
Linters like JSLint or JSHint can detect potential bugs, as well as code that is difficult to maintain.
Since linters are automated tools running them doesn't require manual work once they've been set up.
JSLint Example
Let's run this code through JSLint and see what problems it can detect.
function sayHello(name){
alert("Hello " + name);
}
name = "Douglas Crockford";
sayHello(name)
JSLint analyzes the code and reports a list of potential code quality concerns.
1) Expected one space between ')' and '{'.
function sayHello(name){
2) Expected 'use strict' before 'alert'.
alert("Hello " + name);
3) Undeclared 'name'.
name = "Douglas Crockford";
4) Undeclared 'name'.
sayHello(name)
5) Expected ';' and instead saw '(end)'.
sayHello(name)
We'll go through the list and see what each warning means.
Expected one space between ')' and '{'
The first warning is a simple code style issue. JSLint expects a space after a function declaration's argument list. Like this:
function sayHello(name) { ... }
This isn't a serious issue at all and even JSLint's author Douglas Crockford points out that "JSLint will hurt your feelings".
JSHint is a much more lenient alternative to JSLint and won't complain about stylistic decisions.
Expected 'use strict' before 'alert'.
The second JSLint warning is about a missing "use strict" statement.
"use strict" is used to initiate JavaScript Strict Mode. It prevents the use of certain JavaScript behaviors that are confusing and likely to introduce bugs.
For example, you might assume that the value 011
is the same as 11
. But actually, the leading zero means that the number is interpreted as octal rather than decimal. Therefore, 011
is actually equal to 9
.
In Strict Mode, the JavaScript runtime will throw a syntax error when it sees the value 011
: "Octal literals are not allowed in strict mode."
You can use the "use strict" statement like this:
function sayHello(name){
"use strict";
// ...
}
Many developers don't know that Strict Mode exists, so JSLint educates developers that they can use it to avoid common JavaScript pitfalls.
Undeclared 'name'
When executing the assignment name = "Douglas Crockford"
JavaScript will create a global variable called name
. That's because we didn't declare a local name
variable, so JavaScript defaults to the global scope.
We usually don't want to create a global variable implicitly. Instead, we would make it clear that we are accessing global scope by writing window.name = '...'
.
The problem with unintentionally creating a global variable is that we could accidentally overwrite an existing global value. Likewise, the value we store in our variable might be overwritten by other parts of the code.
JSLint will alert you to any unintended global variables you create.
Expected ';' and instead saw '(end)'
Many programming languages require semicolons at the end of each statement to separate the different instructions in the code. In JavaScript, however, these semicolons are optional.
While semicolons aren't required in JavaScript, there are some situations where their absence can create ambiguity and introduce bugs.
Because of this JSLint recommends that you always put a semicolon at the end of each statement.
Benefits of linting JavaScript code
As you can see in the example above, linters detect common programming errors and ensure that certain best practices are followed. Using them allows you to avoid some of JavaScript's confusing language features.
As a result, linted code is likely to contain fewer bugs.
Detecting these simple errors before a manual code review also makes reviewing the code more effective since the reviewer can focus on more complex issues.
How Linters work
JavaScript linters parse and inspect source code, and then analyze the code's syntax and structure.
If any code violates the rules defined by the linter a warning is shown. The warning explains what part of the code might lead to unexpected behavior and why.
If you have trouble understanding a specific JSLint warning the JSLintErrors website explains what they mean.
Setting up linting for your project
The easiest way to lint a bit of code is by using the online versions of JSLint, JSHint or ESLint. You can just paste your source code and the tools will lint the code for you.
However, this isn't convenient for anything but very small projects. For larger projects, you want to regularly and automatically lint all JavaScript files in the project.
The best way to achieve that is using a task runner like Grunt or Gulp. You can set them up to run the linter every time you make a change to your source code.
Read this post to find out how to set up JSHint with Grunt.