Setting up ESLINT in your JavaScript Project with VS Code
Tags: javascript, vscode, microsoft, beginners
Published: 2019-02-20 15:42:42

---
title: Setting up ESLINT in your JavaScript Project with VS Code
published: true
description: Setting up ESLINT in your Javascript Project with VS Code
tags: #javascript, #vscode, #microsoft, #beginners
---

_ESLINT_: have you ever wonder what ESLINT is all about, when i first heard of ESLINT i was curious what it actually all about, ever since then i have been using it in my project, although at first i was using it wrongly, that is why I am putting up this post to allow people to get it right. but before i dive in let me quickly explain what is ESLINT and VS Code.

__ESLINT__ is pluggable linting utility for Javascript and JSX, it help to discover possible errors.

__VS Code__ is one of the top editor for development it was developed and maintain by Microsoft it help to improve productivity and also comes with many features, one of the feature i am going to emphasize on is extension. Extension are external packages in VS Code that allows you to extend the functionalities of your editor

you can download VS Code from their official website [VS Code Download](https://code.visualstudio.com/)

__NB:__ _I won't be digging deep into VS Code..everything on VS Code in this post will only be related to ESLINT_.

__steps__:
* create a javascript project
* install eslint as an extension in your VS Code Editor
* Install eslint as a global package using npm 
* initialize eslint in your javascript project
* modify your eslint configuration file in your project.

let create a simple javascript project using ```npm init --yes```

![alt text](https://thepracticaldev.s3.amazonaws.com/i/tebfsgkfr3k3h4bl7zvr.PNG "Simple Project")

after the operation was successful it will create a _package.json_ file that will manage all configuration for our project.


let try to install ESLINT extension on vs code editor

![alt text](https://thepracticaldev.s3.amazonaws.com/i/9rmkgbk7nio6ravjm0rx.PNG "ESLINT INSTALL PROCESS")

once we have installed eslint extension on our vs code editor then let install eslint as a global package via npm using the below code

```
npm install eslint -g

```

you need to initialize eslint in your project so you can leverage the power of eslint. From your root project enter the below code to initialize eslint

```
eslint --init

```

during the initialization eslint will ask you some questions, more like to setup your configuration file.

* __How would you like to use ESLint?__
    * __To check syntax only__ => it helps you correct your syntax and make sure it conform to standard.
    * __To check syntax and find problems__ => to help you check for syntax correctness and also help to find any problems in your code base
    * __To check syntax, find problems, and enforce code style___ => to help you check for syntax, find problem and enforce style, enforcing style means to conforms to a particular coding standard such as Airbnb, Google and other Standard  coding style. But I always go for the last option the one with syntax, find problems and enforce code style

* __What type of modules does your project use?__
    * __Javascript module (import/export)__ => if your project has babel installed then you definitely need to choose this option. If you are working on a project such as React, Vue, Angular e.t.c they all use babel so you need choose this option.
    * __CommonJS (require/exports)__ => this option is meant for commonJS that has nothing to do with babel, maybe your nodejs project and any other javascript project

* __Which framework does your project use?__ 
    * __React__ => if you are using react in/for your project then this option is for you

    * __Vue__ => if you are using Vue in/for your project then this option is for you

    * __None of these__ => if you are using neither React or Vue in your project choose         this option

* __Where does your code run?__
    
    * __Browser__ => if your project runs on browser e.g React, Angular, Vue e.t.c then go for this option
    * __Node__ => if your project is a node based then gladly choose this option

* __How would you like to define a style for your project?__
    * __Use a popular style guide__ => This allows you to choose from set of popular style such as Airbnb,Standard and Google style guide, it is advisable to choose this option in order for you to follow popular and most used style guide and i will be choosen this option in this post.
    * Answer questions about your style: _This is for custom style guide_
    * Inspect your JavaScript file(s).: _custom style guide_

* __What format do you want your config file to be in?__
    * __Javascript__ => whether you want your eslint config file to be in *.js* file
    * __YAML__ => whether you want your eslint config file to be in *.yaml* file
    * __JSON__ =>  whether you want your eslint config file to be in *.json* file
you can choose any option in this section

after you have chosen your preferred configuration file type it will then prompt you to install all necessary dependencies. after all neccessary dependencies has been successfully installed it will now generate a config file with ".eslintrc"."js/json/yaml".

__example of the the configuration file shown below__
![alt text](https://thepracticaldev.s3.amazonaws.com/i/sqyim5m8qoet5lx4bu8o.PNG "eslint configuration file image")

below is a little animated image that show how vs code works with eslint to notify you of errors in your javascript project

![alt text](https://cdn-images-1.medium.com/max/800/1*udUEME0YgHCXqD4pjMxpUA.gif "eslint configuration file image")

__Setting up rules for ESLINT in your project__

Defining rules for ESLINT in your project informed eslint the kind of rules you want to add or remove. you can modify/set your rules in the rules section in the configuration file  
example of rules to set are
```
"rules" : {
  no-console: 0; 
  no-empty: 0;
  no-irregular-whitespace:0;
  
}

```

you can define as many rules as possible, you can read more on ESLINT rules on their official documentation [ESLINT Rules Documentation](https://eslint.org/docs/rules/)

Lastly, I am going to show you how you can link your eslint to your javascript project compiler/transpiler

steps below

* Goto your ```package.json``` file, in the script segment in your file add the following

``` 
script:{
    "lint":"eslint"

}

```
__NB:__ _"lint" is just an ordinary word, you can use any word you are comfortable with_

then in your root project you can run your linting script with

```
npm run lint

```

>ESLINT helps to increase productivity, write your code according to standard and flag errors when your code base is breaking style guide rules. With this post you should be able to integrate ESLINT in your Javascript project.