Javascript Linting with ESLint


Hello, in this article I’m going to explain what linting is, and why I am doing that and how to do it. Also I will explain Javascript Linting with ESLint.

What linting is?

A linter is a static code analysis tool that often flags your code about:

  • out of the/your code standards
  • misusages of language features that are obsolete or harmful
  • misusages of programming in general
  • non-consistent structure of code

Why is this a big deal?

Scripting languages like Javascript have no compiler to pre-check some rules and errors, so everything will be come out when the code runs (runtime). Even the smallest mistakes like forgetting a semicolon on a certain case, leads to tremendous bugs that may require hours of debugging and cause pain.

Also in a multi developer organization, you often create some rules for consistency (code standards) to increase code readability and maintainability.

In Javascript there are lots of features in the language but some of them should be avoided as in this article of Douglas Crockford’s list.

What about indentation? Some editors displays tabs as 2 spaces and some displays 4 spaces. And if spaces and tabs are used together in a file, on different editors code indentation may be different or scrambled.

History of linting in JavaScript and comparison of linters

I think this article in Sitepoint would explain better than I because I simply not used all of the linters and choose to use recommended linter: ESLint, from that article itself.

ESLint

ESLint is my choice because it supports React’s JSX format and ES6 features. It’s written in JavaScript on Node.js.

It is highly configurable, it has a plugin system that you can use additional rules other than provided built-in ones.

How to install?

You can install ESLint via npm but there are two options you can take: installing globally or locally.

I chose to install my ESLint locally because I just want all of my dependencies in mypackages.json file.

After writing that to packages.json you can install these (or some of them) via npm install.

The reason there are so much devDependencies is I’m using webpack (https://webpack.github.io/) and babel (http://babeljs.io/) together for bundling and transpiling my code. Fortunately I can also use babel for ESLint to support ES6/ES7 syntax.

Here is my babel configuration .babelrc:

I can now use React JSX transpiler and ES6 features also some of the ES7 features. You can use pre-defined plugin presets and/or define plugins yourself. For all ES6 features see my article.

I also used Webpack for polyfilling Promise (Turkish) with a library knows as bluebird. So whenever I use Promise, it will be called from bluebird.

How to use?

Here is my .eslintignore file:

I tell ESLint to ignore these folders, because I don’t want 3rd party libraries and my minified build scripts to be linted.

Now you have two (or three) options:

  • Write a .eslintrc configuration file for your needs
  • Use ./node_modules/eslint/bin/eslint.js --init command
    • And take the questions ESLint to create configuration file for you
    • Or choose to use one of the default configurations (Google, Airbnb, Standard):extend

The simplest move would be to select a pre-configuration but reading and thinking about each rules one by one might increase knowledge and maybe you want to take a different path apart from pre-configurations provided as your needs though you can override any rule at any time.

And I highly recommend you to read Airbnb’s Javascript styleguide and visit every rule in the ESLint documentation.

Configuration

Configuration could be one of these forms:

  • Javascript file (which you should export with modules.export)
  • JSON file
  • YAML file
  • eslintConfig node on package.json

Please see the documentation about cascading to make sophisticated configurations. Also you could use command line with parameters.

Main nodes of configuration:

  • extends which you can use for sharable settings as node modules. These settings are overridable.
  • parser which I chose babel-eslint module for ES6 support
  • env for choosing different environments like browser or node
  • globals for specifying your global variables
  • plugins which I use react to use the eslint-plugin-react with it
  • ecmaFeutures which you should specify features you want to use even you select another parser like babel
  • and the rules

Rules configuration

As I said before, you can override any pre-configuration, by defining the same rule with different parameters/configuration.

First parameters could be a number from 0 to 2:

  • 0 – Turn the rule off
  • 1 – Turn the rule on as a warning
  • 2 – Turn the rule on as an error

Here is a screenshot from eslint command:

eslint-console

If you choose 1, ESLint only prints a warning message, but choosing 2 makes ESLint to return exit 1 which will break your build script/tool.

In addition you can use an array to define additional parameters on that rule i.e:

Using with default settings as error

Using with given settings as error

Running

From your terminal run this command:

I used a different formatter eslint-friendly-formatter, for .js and .jsx files using--ext and . to recursive linting. You can use --fix parameter to let ESLint fixing simple mistakes. (Rules can be fixed are marked with a tool icon in documentation)

I also added these scripts to my package.json:

I want my build to be broken so I added to my start script and npm run start will also run ESLint. npm run lint will also run ESLint but this time I gave --fix parameter to it and added exit 0 for npm not to display JavaScript error.

Integrations

You can even use ESLint in your favourite editor (like I do with Atom with same configuration): http://eslint.org/docs/user-guide/integrations.html

Here is the same code screenshot from atom eslint plugin:

eslint-atom

And you can auto-fix some of the rules (ones with the tool icon) by typing ⌘ ⇧ P (or whatever shortcut for your OS) for the Command Palette and eslint. Then select the one with the fix command. You can add a shortcut for this if you want, too.

eslint-atom-fix

Resources

[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]
javafx

Database Operations in JavaFX

By Onur Baskirt / Apr 1, 2016 / 56 Comments
Before started this section, please check the first article and learn How to Start JAVAFX! http://www.swtestacademy.com/getting-started-with-javafx/ At first, part of JavaFX tutorial series, we created a sample JavaFX project, designed the draft version of the UI and set up an...
rest assured

REST API Testing with Rest Assured

By Onur Baskirt / Mar 8, 2016 / 32 Comments
Outline In this post, I will explain what is API and API testing, what is the difference between SOAP and REST services, and how to test REST APIs with Rest Assured Library. What is API? API stands for Application Programming...
extentreports

How to Write Effective CSS Locators

By Onur Baskirt / Oct 1, 2017 / 0 Comments
Hi all, in this tutorial, I will describe you how to write effective CSS locators to interrogate web elements for your automation projects. As a rule of thumb, your interrogation strategy should be in below order: First try to use...
extentreports

Selenium-11: Execute JavaScript with JavascriptExecutor

By Onur Baskirt / Jan 27, 2016 / 15 Comments
Outline Sometimes we cannot handle some conditions or problems with Webdriver, web controls don't react well against selenium commands. In this kind of situations, we use Javascript. It is useful for custom synchronizations, hide or show the web elements, change...
javafx

Getting Started with JavaFX

By Onur Baskirt / Mar 25, 2016 / 0 Comments
When I started to work in my current position, one of my task is to do manual operations for campaign products  every week. After the second week, I thought that I have to automate this task using a GUI based...
extentreports

How to Write Smart XPath Locators

By Onur Baskirt / Sep 24, 2017 / 4 Comments
Hi all, in this tutorial, I will describe you how to write smart and non-brittle XPath locators. When we write our test scripts, we generally prefer to use id, name, class, etc. these kinds of locators. However, sometimes we could not...
extentreports

Selenium-1: Quick Start to Automation with Selenium WebDriver & JAVA & JUnit & Maven & IntelliJ

By Onur Baskirt / Sep 8, 2015 / 26 Comments
Outline Selenium Webdriver is the most popular open source web test automation framework across wide range of browsers and platforms. In this tutorial you will learn how to do web test automation with Selenium Webdriver and the related tools. Audience...
page object model

Page Object Model with C#

By Ege Aksoz / Jun 18, 2017 / 8 Comments
In the previous tutorial, we’ve taken the initial steps and entered the world of automated testing. We also wrote our first automated test. From this point on, since we are not just going to write one test, we need to...
extentreports

How to Select a Date From DatePicker Using Selenium

By Onur Baskirt / Aug 13, 2016 / 6 Comments
When you need to automate a airway, hotel, or similar websites you need to deal with Datepickers and some times it is a little bit cumbersome to select a specific date on the Datepicker or calendar.  In this post, I...
extentreports

Selenium Webdriver Performance testing with Jmeter and Selenium Grid

By Ozgur Kaya / Aug 9, 2016 / 2 Comments
In this post, we will complete Selenium Webdriver Performance testing scenario using Jmeter and Selenium Grid. 1- Install Java 7 or later If necessary https://java.com/tr/download/ 2- Download latest Jmeter version 3.0 or higher. http://jmeter.apache.org/download_jmeter.cgi 3- Download Jmeter PluginsManager JAR file and...
By | 2017-01-13T21:33:43+00:00 March 3rd, 2016|Javascript|0 Comments

About the Author:

Barış Aydek
Currently he is working as Senior/Lead - Software Development Engineer at Amadeus IT Group. You can follow his posts also in his blog: http://dhalsim.github.io/

Leave A Comment