First moments with ESLint

eslint-logoAs a webdeveloper we write our code in all kinds of programming languages. It is not uncommon to start with PHP, add some HTML and CSS and finally add some Javascript. Since all languages have their own syntax and in particular Javascript is very forgiving when you misspell, mistype or just forget the semi colon at the end, it is a good idea to use a linting tool when writing Javascript. A linting tool is basically a tool that checks your syntax. But it does more, for example, it also checks for unused variables and some good programming practices.

There are different linting tools around these days, and I found comparing JS linting tools last week. Based on this article, I started with ESLint. In this article I’ll describe the installation process, and the configuration.

Installing ESLint

node-logoInstalling ESLint is easily done by using npm. Unfortunately, I didn’t have that one installed yet. So I started figuring out what npm was before installing it. Just reading a little on the npm website convinced me this probably is a very handy tool to have. But then I found out you need to install node! Bear with me, we are soon underway.

npm-logoInstalling node on my Mac was rather straight forward with the pkg download package I found on the official node download page. Although npm comes bundled with node you have to update the npm version, since it is updated a bit more often compared to node. Updating npm is achieved from the command line using the command:

sudo npm install npm -g

Since you use the sudo command you need to type your password. Now we are on our way, but we still need to install eslint itself. This is also done with the npm install command:

npm install -g eslint

However, this command should also be executed as root hence I quickly typed:

sudo npm install -g eslint

and after a few moments it was installed.

Configuring ESLint

I was very curious about the piece of javascript I wrote last week and was wondering what ESLint would consider wrong, bad practise or…

Well, the program did not disappoint me at all: it spitted out a fantastic number of errors: 150!

Then I found out that the configuration of these linting tools is very personal. Some people just write strings in double quotes, others in single quotes. Luckily all rules can be turned on or off and a number of rules have various modes in which they operate differently.

Configuration of ESLint is possible in different ways. You can add some special formatted comments in the JS file itself or write a configuration file. This is possible in different formats such as JSON and YAML. I chose to write a .eslintrc file to configure ESLint.

Below you find my configuration file. The rules are explained in depth on the ESLint website. The env parameter is to tell ESLint whether you are using this JS file in a browser or within a node environment. Since I am using it in the frontend, I specified

browser: 1

I also needed to define a global variable (jQuery) since within my JS file, jQuery should not be declared.

eslintrc

Running ESLint from the command line

Running ESLint is very easy. Simply pass your js file to the program running on the command line:

eslint your-js-file.js

With some adjustments to the code and the configuration above I was able to remove all 150 errors! Happy linting.


Mijn Twitter profiel Mijn Facebook profiel
Pim Hooghiemstra Webdeveloper and founder of PLint-sites. Loves to build complex webapplications using Vue and Laravel! Latest post
Laravel-mix and the spread operator

Leave a Reply

Your email address will not be published. Required fields are marked *