DEV Community

loading...

Using ESlint and Git Hooks

Tailo Mateus Gonsalves
I'm also addicted to learning new things.
・2 min read

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

Discussion (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