DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 963,503 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Tailo Mateus Gonsalves
Tailo Mateus Gonsalves

Posted on

Using ESlint and Git Hooks

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 Author

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

Want the JavaScript badge for your profile?

It's awarded to the top JavaScript author each week. Start your post here!