What is a Linter?
Linters are Code Quality Inspectors, which work by basically parsing your code. They check JavaScript code for common mistakes and discrepancies without running the application.You can plug linters into your code editor or copy and paste your code into any standard online linting tool. Linting your code is a great thing to do, no matter what language you code with. This article is about JavaScript linters, but you can even lint HTML, CSS and JSON.Benefits of Using a Linter
- Instant notification of mistakes without running the application
- Save time
- Safer code
- Stay focused on the hard part of coding
- Better coding flow
- Obvious highlighting in code
- Standard coding style across teams
Available JavaScript Linters
- JSHint—A flexible linter and the most commonly used.
- ESLint—Create your own linting rules and rules are completely pluggable.
- JSLint—One of the first linters for JavaScript.
- Closure Linter—Checks based on guidelines in the Google JavaScript Style Guide.
Using a JavaScript Linter in Your IDE
If you are using Webclipse or MyEclipse as your Javascript development tool, then enabling a Linting module is easy, just select the appropriate Linting module when setting up your JavaScript modules. By default, ESLint, JSCS, JSHint and Lint are supported. Don’t already have it? Grab Webclipse with JSjet for free — Download
Enabling ESLint
If you don’t use either Webclipse or MyEclipse, take a look at this article for for ESLint or this one for JSHint.
Let’s walk through actual usage of a couple of linters, EsLint and JSHint.
ESLint—Examples and Configuration
On enabling ESLint, JavaScript files are validated for errors with default eslint.json settings. Here are some examples of ESLint errors and their fixes.
Configuring ESLint
You can customize the ESLint rules by specifying a custom eslint.json file:
Eslint.json File Snippet
Now lets see a few examples of modifying the json file:
- Modifying the rule to get rid of unused variable errors: Default value: [2, {“vars”: “all”, “args”: “after-used”}] Modified value: 0
- Modifying the rule to enforce consistent spacing before and after commas. Default value: 0 Modified value: 1
ESLint Quickfix
There are certain rules that can also be solved with a quick-fix option, like the one below:
For the entire set of ESLint rules, please see this link; the rules with a wrench icon next to them are those for which quick fixes are available.
JSHint—Examples and Configuration
JSHint is an open source, community-driven tool to detect errors and potential problems in JavaScript code. There is an online tool for validating instantly. Here are some examples of JSHint validations:
Configuring JSHint
On modifying configuration values, we can get rid of warnings which can be ignored for the project. Before modifying configuration:
After modifying configuration – to ignore semicolon missing:
