Blogs arrow How to Enforce developers to write high quality code using lint and git hooks

How to Enforce developers to write high quality code using lint and git hooks

line

Feb11, 2021

Introduction

In Recent days Developers are developing a lot of applications based on javascript, typescript, and other frameworks. The code and logical way are great to achieve many complex problems. But coming to coding standards not many developers use lint. Here we are about to find a solution to this problem using ESLint and Git Pre-commit. So let’s discuss the features and implementation of ESLint here.

ESLint

The ESLint tool generally analyses source code and helps to identify bugs, syntactical errors, and many more. Hence gives a way to fix those bugs in an easy way by providing more hints in a human-readable format which makes work simpler. Now let’s have a look at the following example scenario of ESLint.

Example Scenario

For an instance have a look at the following example

git-code1

For an instance have a look at the following example.

git-code2

Use Case

  • To provide consistent code style
  • Own linting rules can be added
  • Keeping track of errors dynamically
  • Bugs are flagged during syntax errors
  • Suggestions for best practices are notified

Implementing ESLint in IDE

Most developers implement ESLint to IDE as an extension. If we are using Visual Studio as an IDE it is available as an extension that can be downloaded as shown.

eslint-install

Installing ESLint

The ESLint can be installed globally by the following command in the terminal npm install -g eslint This command installs eslint globally in our machine. If we want to install in project-specific folder, the commands may slightly differ they are available in the official ESLint Documentation.

Now it’s installed, we need to configure it. The config file will let us define what features and rules we use. If we want our linter to recognise ES6 syntax but break when we have an undefined variable, we need a config file. To create one, we can run eslint –init as shown below

eslint-6

In my case I select to check syntax and styling

eslint-5

Since, we are using import and export as modules in our code,here I have selected JavaScript modules(import/export

eslint-4

As Iam using React, I have selected react as framework.

eslint-3
eslint-2

It asks about popular style guide and the default are  with codes at their respective Github repo as follows:

Finally, it asks for the format of config file like JSON, YAML or JavaScript

This will create a file in our root called eslintrc.json with default rules such as debugger which we can change later. 

Now default setup is done. To get configuration suggestions or to start linting files with the command  eslint**/*.js and it shows issues and warnings in our code. The most recommended command is ./node_modules/.bin/eslint src which on execution gives the output as below

comment

Custom Formatters

ESLint supports the creation of custom formatters. We can create custom formatters in our project directly or as an npm package to distribute them separately. 

Each formatter is just a function that receives a result object and returns a string. In the following example json build-in formateer is implemented.

//my-demo-formatter.js
module.exports = function(results) {
    return JSON.stringify(results, null, 2);
};

To run ESLint with this formatter, you can use the -f (or –formatter) command line flag:

eslint -f ./my-demo-formatter.js src/

Packaging Custom Formatters

To create a formatter as npm package create a package with name in the format of eslint-formatter-* , Here * is the name of the formatter (such as eslink-formatter-demo).In projects we can use the formatter with -f (or –formatter) flag like shown below

eslint -f demo src/

Now ESLint set up for our project is achieved through simple steps.

If the developer couldn’t fix the lint issue due to some reasons, we can overcome this as git provides a way of pre-commit. We are yet to discuss git pre-commit. Before diving in we may need a mild knowledge of git hooks   

demo

Hooks in Git

  • Git provides a way to execute custom scripts during certain important actions. It has two groups of these hooks client-side and server-side.
  • The client-side hooks are triggered during operations such as committing and merging.
  • The server-side hooks are triggered during operations such as network operations of receiving the pushed commits.
demo2

In general .git has default hooks in all git repositories.

$ cd .git/hooks/me);

In general .git has default hooks in all git repositories.

eslint-1

Each file has some unique works. For example if we execute git commit, pre-commit hook will execute. Here now we are focusing on pre-commit for ESLint.

Pre-Commit

The pre-commit hook runs first, before you even type in a commit message. It’s used to inspect the snapshot that’s about to be committed, to see if you’ve forgotten something, to make sure tests run, or to examine whatever you need to inspect in the code.

To make the developer commit the code the pre-commit will run to check any lint configurations available here, so when it identifies a lint issue it aborts the commit. It is done using a script file. The bash removes the default pre-commit file and creates a new file with lint error checks enabled. The bash script is here as shown below:

#!/bin/bash
cd .git/hooks
FILE=pre-commit.sample
if [[ -f “$FILE” ]]; then
    rm -rf pre-commit.sample
fi
touch pre-commit
cat >pre-commit <<EOF
#!/bin/bash
\$(cd ..)
\$(cd ..)
LINT_PROC=\$(./node_modules/.bin/eslint src)
echo “<<—– Checking the lint issue —–>>”
echo “\$LINT_PROC”
if [ “\$LINT_PROC” == “” ]; then
echo “<<—– No lint is found, u may commit code —–>>”
exit 0
fi
echo “<<—– Since lot of lint issue is found, plz fix the above issue and then commit —–>>”
exit 1

EOF
chmod +x pre-commit

Here the above script file is placed in the project root folder.Once cloned the project as a first thing, we must execute the script  or we may be unable to use the git pre-commit.

The above script executes the lint package to find out the lint issue. If any lint issue is detected we are unable to commit the code.

comment1

Thus pre-commit triggers on git commit and check for lint issues. Once you fix the errors we are happy to commit the code.

Conclusion

We have implemented the ESLint in our project and also done with pre-commit that led our teams to improve the code quality and style.

manavalan-pic

WRITTEN BY

Manavalan R

lingam-pic

REVIEWED BY

Naveen Lingam

More Blogs

line