DEV Community

Tailo Mateus Gonsalves
Tailo Mateus Gonsalves

Posted on

Using ESlint and Git Hooks

#javascript #webdev #git #node

How many times have you sent that push request full of errors or totally out of pattern? That commit sent 5 minutes before ending office hours. This can happen to anyone, regardless of whether you are a beginner or a senior. It's up to us to improve upon our limitations and lack of attention. The purpose of this article is to help you in this matter.

Creating the package.json

Before we go any further, let's create the package.json file by running:

npm init –y
Enter fullscreen mode Exit fullscreen mode

To know more:
Working with package.json
npm-init

Installing ESlint

ESlint is a JavaScript code parser created in 2013 by Nicholas C. Zakas. Essentially, ESlint allows developers to find problems and create their own development rules and standards. It was written in Node.js and can easily be installed via npm.

npm install eslint --save-dev
Enter fullscreen mode Exit fullscreen mode

Editing the configuration file:

./node_modules/.bin/eslint --init
Enter fullscreen mode Exit fullscreen mode

Select the option: “Use a popular style guide” and then select the style guide of your company of choice.

Select the file format under "JavaScript". If everything goes well, the .eslintrc.js file will be created..

Testing ESlint

Create a file named main.js and put the following code inside it:

a = 10
const b = 5;
b = 10
Enter fullscreen mode Exit fullscreen mode

When reading the code, we can realize that some errors will happen. But let's test how ESlint behaves by executing:

./node_modules/.bin/eslint *.js
Enter fullscreen mode Exit fullscreen mode

Now just fix the bugs :D

To know more:
Documentation ESlint
Demo ESlint
Setting up ESLint on Sublime Text 3

Using npm Scripts

In the package.json file, replace this snippet:

“scripts”: {
    “lint”: “./node_modules/.bin/eslint *.js”
}
Enter fullscreen mode Exit fullscreen mode

To run in terminal:

npm run lint
Enter fullscreen mode Exit fullscreen mode

To know more:
Why npm Scripts?

Git Hooks

They are scripts that do something before or after a task, for example, before a commit does something.

Installing the Husky:

npm install husky@next --save-dev
Enter fullscreen mode Exit fullscreen mode

To use let's add the prepush command in npm scripts:

“scripts”: {
    “lint”: “./node_modules/.bin/eslint *.js”,
    “prepush”: “lint”
}
Enter fullscreen mode Exit fullscreen mode

Before we send the push, it will run the linter.

To know more:
GitHub Repository

Conclusion

I hope this was helpful. If you have any questions, throughout this article there are plenty of references for you to have a deeper understanding of the subjects. Do you have any tips? Leave a comment :D

Reviewed by: Marcos Gobbi

Top comments (3)

Collapse
 
ahansondev profile image
Alex Hanson •

The git hook stuff is cool. I really enjoyed diving into the "Why npm scripts" link - that's the way I set up a recent project, and it's nice to see that it is an accepted and even popular way to build a web project.

Collapse
 
tailomateus profile image
Tailo Mateus Gonsalves •

Yeah, thanks for your comment :)

Collapse
 
billy_7 profile image
Billy Mathews •

npm scripts resolve local modules, so your lint script can just be eslint *.js

Read next

tak089 profile image

List of project ideas using public APIs to build apps with Next.js

Taki089.Dang -

neetigyachahar profile image

What is the React Slots pattern?

Neetigya Chahar -

abhishekjaiswal_4896 profile image

Low-Level Design of a Music Player Application

Abhishek Jaiswal -

capcom6 profile image

tnfy.link - One more shortener?

capcom6 -