Linting in JavaScript with ESLint

Why Use a Linter

Many times when writing code, especially with a dynamically typed language such as JavaScript, we inadvertently introduce bugs or errors into our code, which are only noticed at the runtime of our code (during code execution). Many of these runtime issues can be caught by using a linter. A linter you may be asking is just a tool that is run prior to the execution of our code and helps to point out potential issues. There are rules that can be formatted using a good linter and can be strictly enforced or can be suggestions only.

Is It Necessary?

No. And in many smaller projects linters are not entirely necessary, but I still prefer using linting while coding JavaScript. You’ll find that it can help to point out some issues, help you to keep your code more readable and also to help you be a better developer by enforcing some overall best practices.

Options For Linters (And Why You Ought to Choose ESlint)

If you have been writing JavaScript for a while, you may have heard of a number of these. Think of JsLint, JsHint (a fork of JsLint) and a handful of others. ESlint is one of the newer and in many ways is more flexible and offers some overall better options. You can read about ESLint here for some more information. I am going to show you how to integrate ESlint into your project and run it.

Using NPM

We are going to use npm and the command line to do this. I am working on a Windows 10 machine, but am using WSL(Windows Subsystem for Linux) so the commands should be the same. You’ll also need to have node installed on your machine.

Let’s create a project directory. $ mkdir es-lint-example Now cd into it $ cd es-lint-example Now to initialize our example project. npm init

This will ask you some project setup questions. You can just enter through these (you can always change them later). This basically creates a file for you that NPM will read called package.json. That looks like this.

{
  "name": "eslint-example",
  "version": "1.0.0",
  "description": "example of eslint usage",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

This is an NPM project file that contains the configurations as well as packages. We’ll be saving things to this using some commands. I’m not going to go into much detail about this right now. But the next few commands you run will be modifying this and creating a node_modules directory.

ESLint Project Install

Next, we need to add this to our project. You can install this as a global package, but I do not prefer this as you may be working on different projects and we don’t want to create conflicts with versions. So within your example project run:

$ npm install eslint --save-dev This should take a few seconds, and will be modifying our local package.json and installing some libraries into our newly created node_modules folder. Looking back at our package.json file notice the devDependencies property has been added. We only need to worry about this being run during our development stage.

"devDependencies": {
        "eslint": "^5.16.0"
      }

.eslintrc.json file

Our project is going to need to have an additional configuration file for running eslint in our app. In your project from the command line run:

$ ./node_modules/.bin/eslint --init

This is going to initialize our project file. There are numerous options and my console looks like this. I went with a generic front end configuration, but if you choose to there are other options too if you are going to use ESlint for a node project. Follow along below if you want to use the standard guide. Also note that there are additional style guides available, that you can use as well like AirBnB’s

$ ./node_modules/.bin/eslint --init
? How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? None of these
? Where does your code run? (Press space to select, a to toggle all, i to invert selection)Browser
? What format do you want your config file to be in? JavaScript

This will create a top-level .eslintrc.json file. Here is what my file looks like:

module.exports = {
            "env": {
                "es6": true
            },
            "extends": "eslint:recommended",
            "globals": {
                "Atomics": "readonly",
                "SharedArrayBuffer": "readonly"
            },
            "parserOptions": {
                "ecmaVersion": 2018,
                "sourceType": "module"
            },
            "rules": {
            }
        };

Next, we want to be able to run our linter from the command line. So in your package.json add the following in the scripts property.

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "lint": "eslint  ./src"
  }

Note that I also created a folder called src, where I put in a JavaScript file. I created a variable and did nothing with it. There is a default in ESlint to where you can

This will allow you to run eslint from your node_modules folder in the project. From the command line in your project you can now run:

$ npm run lint
 
> eslint-example@1.0.0 lint C:\eslint-example
> eslint  ./src
 
 
 C:\eslint-example\src\app.js
  3:10  error  'myVariable' is defined but never used  no-unused-vars
 
✖ 1 problem (1 error, 0 warnings)

You really ought to take a look at the other rules you can apply. Also, as I said there are some popular configurations out there with additional dependencies through NPM packages. There are also configurable ways to fix issues in your JavaScript files using ESlint. As always, I hope you found this of use, and please let me know what you do with your linter!

Happy Coding!

Leave a Reply

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