Configuring ESLint for a Node.js Project

For any Node.js project, an understanding of ESLint concepts and rules is useful to make your work less bulky. ESLint is an open source JavaScript linting utility originally developed by Nicholas C. Zakas in June 2013. ESLint is the dominant tool for linting Node.JS packages. It is a pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. It uses the AST (Abstract Syntax Tree) to evaluate patterns in code.

Linting is the process of checking the source code for programmatic as well as stylistic errors. This is most helpful in identifying some common and less common mistakes that are made during coding. In this post, I will be showing how to configure ESLint for a Node.js project.

How to configure ESLint

To configure ESLint on your Node.js project, you will need to install ESLint globally on your computer system using the command prompt shown below:

Installing ESLint globally on your computer system makes it possible to run ESLint init which will do all the setup for us.

For the sake of this article, I created a simple project nodeEslint-test. It is a simple node app initialized using:

npm init -y 

Below is an image of the NPMinit setup and package.json:

Next, we’ll go ahead and install ESLint.

ESLint --init 

sets up an ESLint configuration file, .eslintrc, in our current directory. ESLint uses this file to determine which rules to apply when evaluating your code. We can configure the files to be in JSON format or CSS. To achieve that, we type ESLint –init.

As shown in the image below, once we run the code, it’s going to ask a series of questions. You can select whichever suits you, but for this project, we will be using a popular style guide.

Selecting it will give you a series of questions like:

1. Which style guide do you want to follow?
   Answer provided for this project: Airbnb (https://github.com/airbnb/javascript)
2. Do you use React?
   Answer provided for this project: No
3. What format do you want your config file to be in?
   Answer provided for this project: JSON

Response:

1. The config that you’ve selected requires the following dependencies:
   eslint-config-airbnb-base@latest eslint@^4.19.1 || ^5.3.0 eslint-plugin-import@^2.14.0
2. Would you like to install them now with npm?
   Answer provided for this project: Yes.

When done with the installation, open the package.json file. You will see we’ve got three new packages installed now. The newly installed devDependencies will look like this:

The next step is to configure our ESLint files. ESLint is designed to be configurable, meaning you can turn off rules or create your own rules. To make ESLint perfect for your project, you have two configuration options:

Comments configuration

Comments configuration enables you to configure information directly into your file using JavaScript comments like this:

/* eslist-env node */ or /* global var1, var2 */.

Files configuration

The files configuration is configured using either JavaScript, JSON or YAML files to specify configured information for all sub-directories and the main directory. For this project, we will be using JSON.

The .eslintrc.json file you get after installation enables ESLint to work automatically. You can also select your configuration file via command prompt.

The next step here is to configure our environment, set global variables, and finally, set rules. (This is mandatory because the option will have full control over how ESLint treats your code.)

To set the environment, go to the .eslintrc.json file. You’ll see a JS object like this:

{
   "extends": "airbnb-base",
   // add your environment below the extends key, like this:
"env": {
       "node": true,
       "browser": true
   },
   "plugins": ["import"],
   "parserOptions": {
       "ecmaVersion": 6
   } 
}

Looking at the above JS object, there are parser options. These allow you to select the Javascript language option you want to use, and by default, ES6 syntax is used in ESLint.

 "parserOptions": {
        	"ecmaVersion": 6

Based on your project, you can add more parser options that you need, like:

        	“ecmaFeatures”: {
              	“Jsx”: true
}
      }

Setting parser options helps ESLint determine parsing errors because all language options are false by default.

Global variables

The specification of globals in your eslintrc.json file is done with this format:

"globals": {
       "var1":”writeable”,
       "Var2":”readonly”
   },

1. Writable – allows the variable to be overwritten
2. Readonly – disable overwriting.

Rules

The next step will be to create some rules to fix little console log issues. The plugins in the eslintrc.json file are what enable us to import our rules. Note that we can make a conscious choice to either disable or change rules from triggering an error to just a warning; the format for this is { “error”:2, “warning”:1, “off”:0}.

Go over to the eslintrc.json file. In your eslintrc.json file, you will see a JavaScript object like this:

"rules”: {                      	"rules”: {          	
     "No-console":2,                 	
"comma-dangle": 1,             	
      "Quotes":2,                    	"quotes":[2, “double”],
      "Linebreak-style":0,     OR   	
      "no-unused-vars": 0,           	
      "max-len": 0                   	
      }                               	}

Conclusion

ESLint builds your ability to write clean and simple functional code based on created or built-in rules, thereby giving you the privilege of setting your own rules or finding the rules that are close to your purpose. Including ESLint in your Node.JS projects will make your development unique.

The post Configuring ESLint for a Node.js Project appeared first on Sweetcode.io.