Managing JavaScript Codebase with ESLint

JavaScript is one of the most popular programming languages. The entire modern web-development revolves around JavaScript and almost all computers and mobiles across the world have a JavaScript interpreter running on them. In JavaScript, given that it is a dynamic and loosely-typed language, it is hard to keep a check on potential errors and code styles as your code base increases. That is where a linter can come to your rescue!
What is a Linter?
A Linter is a tool that can be used for various purposes, including automating the testing of code for potential errors, maintaining your coding style or preventing the use of unsafe constructs.
For example, when using parseInt(), it is common to omit the second argument, the radix, and let the function try and determine from the first argument what type of number it is. This often leads to the following error:
/* Missing radix parameter */
var number = parseInt("071"); //57The correct code in this case would be
var number = parseInt("071", 10); //71This is just one of the examples of how a Linter can prevent possible errors.
Choosing a Linter
Now that you know why having a linter in your project is good idea, choosing best one can be confusing as there are some good linters available. Below is a list of some of the better linters:
At AdMAVIN we are using ESLint because of its rich set of features which makes it ideal tool for linting.
ESLint was first released in 2013, by Nicholas C. Zakas. As mentioned on the ESLint website, it was created to allow developers to create their own linting rules and every rule is standalone. ESLint is designed to have all rules completely pluggable. Rules are “agenda free” — ESLint does not promote any particular coding style.
Some of the alluring features of ESLint are:
- Pre-configured set of rules which cover all the rules that exist in JSLint and JSHint.
- ESLint is fully configurable, meaning you can turn off every rule and run only with basic syntax validation. It includes deciding error levels.
- The ability to write your own plugins and rules.
Installation
ESLint can be installed to make it available to tools that run across all your projects. It can be done so using npm:
$ npm install -g eslintNext step is to setup a configuration file:
$ eslint --initYou’ll be prompted with “How would you like to configure ESLint?”
You can select popular style guides such as Google, AirBnB or Standard. Popular style guides come pre-configured with their styling guide; you always have the flexibility to override those styles with your preferred styles.
Alternately, you can just answer some questions about your preferred styles, which will in turn generate a .eslintrc file where you can configure your coding styles.
Configuration
Based on the options that you’ve selected, .eslintrc will have a configuration similar to the following:
{
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": "eslint:recommended",
"rules": {
"indent": [
"error",
"tab"
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
}
}"semi", "quotes", "indent" are name of the rules in ESLint. The first value is the error level and values for error levels are:
offor0— to turn it off"warn"or1— to turn the rule on as warning"error"or2— to turn the rule on as error
"extend": “eslint:recommended" enables rules that report common problems (the rules with tick marks in eslint rules page).
If you have selected any of the popular style guides .eslintrc file will show up as below:
{
"extends": "airbnb-base"
}You can have add your personal changes to the file:
{
"extends": "airbnb-base",
"rules": {
"max-len": [1, 120, 2, {ignoreComments: true}],
"quote-props": [1, "consistent-as-needed"],
"no-cond-assign": [2, "except-parens"],
"space-infix-ops": 0,
"default-case": 0,
"no-else-return": 0,
"no-param-reassign": 0,
"quotes": 0
}
}Integration
ESLint has a plugin for all popular JavaScript editors. The plugin uses ESLint library installed in the opened workspace folder. If the folder doesn’t provide one, the plugin looks for a global install version. The plugin enforces rules provided in .eslintrc file.
Hope this helps you in choosing and setting up a JS Linter for your project. Share your views on Linter with us or write in to me at phanindra[at]admavin.com in case you have any suggestions or queries!

