Managing JavaScript Codebase with ESLint

Phanindra Maddi
Aug 26, 2017 · 4 min read

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"); //57

The correct code in this case would be

var number = parseInt("071", 10);  //71

This 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:

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 eslint

Next step is to setup a configuration file:

$ eslint --init

You’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:

"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!

AdMAVIN

We are AdMAVIN, an E-commerce start-up who have decided to go where few other start-ups have gone before, and have delved into the realm of Media & Advertising.

)

Phanindra Maddi

Written by

Development Engineer at Imaginea

AdMAVIN

AdMAVIN

We are AdMAVIN, an E-commerce start-up who have decided to go where few other start-ups have gone before, and have delved into the realm of Media & Advertising.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade