# ESLint and Prettier Setup with Git Pre-commit hook🎣

In this post, we will look at how to integrate ESLint and Prettier into your vs-code setup and project in order to ensure cleaner code and consistent across the team.
We might not be perfect all the time, as developers sometimes we may push code in a hurry and miss like a closing bracket, declaring a variable, or importing a function.
so we will also look at how to ensure code integrity and validity on every commit you make by watching for errors and warnings in your project code by ESlint and Prettier.
First, let us look at what are ESLint and Prettier
## ESLint
ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.  [ESLINT](https://eslint.org/docs/user-guide/getting-started) 
## Prettier
Prettier is very popular because it improves code readability and makes the coding style consistent for teams. Developers are more likely to adopt a standard rather than writing their own code style from scratch, so tools like Prettier will make your code look good without you ever having to dabble in the formatting.[Prettier](https://prettier.io/docs/en/why-prettier.html) 
## Setting up VS-Code
Make sure you installed the vs code extensions for  [Prettier ](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) and  [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) .
## Installing Dev Dependencies
Make sure you are inside a node project or create a package.json file by running the ***npm init*** command and initialize the git by running ***git init***.

```
npm install -D eslint prettier
npx install-peerdeps --dev eslint-config-airbnb
npm install -D eslint-config-prettier eslint-plugin-prettier husky lint-staged
``` 
## Configuring ESLint
Create a file by name ***.eslintrc.json*** and copy the below lines into the file

```
{
  "extends": ["airbnb", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error"]
  },
}
``` 
## Configuring Prettier
Create a file by name ***.prettierrc*** and copy the below lines into the file
```
{
  "printWidth": 100,
  "singleQuote": true
}
```
## Enable format on save
to quickly format your code you can enable formatOnSave on vs-code which enables formatting when you press ***CTRL + S***. You can enable this in vs-code settings, you can open the setting by ***CTRL +, *** and search for formatonsave and enable it.
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1606286108594/MrERkHigA.png)
## Configure git pre-commit hook
In package.json on the same level as dependencies paste the following lines

```
"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
``` 
you can skip the pre-commit check while committing if you don't need for a single commit by providing the --no-verify flag
```
git commit -m "no check" --no-verify
```
## Testing pre-commit hook
create an index.js file and copy the contents
```
const fs = require('fs');
const os = require('os');
```
ESLint warns you about the unused variables, as a push first, fix after developer we are gonna commit the files by
```
git add .
git commit -m "test"
```
Now if everything is working correct you will see this error
```
index.js
  1:7  error  'fs' is assigned a value but never used  no-unused-vars
  2:7  error  'os' is assigned a value but never used  no-unused-vars

✖ 2 problems (2 errors, 0 warnings)

husky > pre-commit hook failed (add --no-verify to bypass)
```