ESLint Prettier & Husky Configuration for Project
Published: 2021-03-18 11:39:57

## Setting up Prettier with ESLint, and also checking commit with husky.

You will need to install Eslint, Prettier and Pre-Commit.
The 3 packages does different things, their usefulness are highlighted below: 
- ESLint - For Linting, and Enforcing Style Guide.
- Prettier -  For Code Formatting.
- Pre-Commit - For Making sure code that's being committed is followed guidelines and is formatted properly.

## Installation

The packages can be installed locally in your project or globally:

### **Setting up ESLint**

```bash
npm install --save-dev eslint
```

After installing eslint, you then need to set it up, that is, configure it.

```bash
npx eslint --init
```

Sample of the text that will be inside the eslintrc.json file

```json
{
"extends": ["airbnb", "prettier" "eslint:recommended"],
"plugins": ["prettier"],
"rules": {
"semi": ["error", "always"],
"quotes": ["error", "double"]

"prettier/prettier": ["error"] // if you choose to use prettier rules.
},

}
```

### **Setting up Prettier**

```bash
npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier
```

Then create .prettierrc file in your project’s root directory.

You can type echo {} .prettierrc in your terminal to create the file

```bash
touch {} .prettierrc 
```

This will be where you configure your prettier formatting settings.

Sample of the settings you can configure inside the prettierrc.json file

```json

{ 
"useTabs": true,
"tabSize": 2,
"semi": true,
"singleQuote": true,
"trailingComma": "es5",
"bracketSpacing": true,
"parser":"typescript"

}

```

## Setting up **Pre-commit and Pre-push**

This is a pretty important step. This will ensure that before any developer in your team commits any code, the changes made by him are validated with 
EsLint, and the code is properly formatted.


The fastest way to start using lint-staged is to run following command in your terminal:

```html
npx mrm lint-staged
```

It will install and configure **[husky](https://github.com/typicode/husky)** and lint-staged depending on code quality tools from `package.json` dependencies, so please make sure you install (`npm install --save-dev`) and configure all code quality tools like **[Prettier](https://prettier.io/)**, **[ESlint](https://eslint.org/)** prior that.

### Another alternative to implement this;  we will need to configure some packages

1. The First package we need is **husky** which will make adding 
these hooks very easy.
2. We also need a package called **lint-staged** that will let us 
check only the pages which are changed. So, only the staged files are checked and the rest of the code 
remains untouched.
3. **pretty quick** will check for any unformatted files and 
format them using Prettier.

### Installation of the packages

```bash
npm install --save-dev husky lint-staged pretty-quick
```

After installing these packages we need to add configuration for these in our package.json file

```json
"lint-staged": {
"*.js": "eslint --cache --fix"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged && pretty-quick --staged"
}
}
```

As the name suggests, when you're trying to commit the changes, this will run both commands  "lint-staged and pretty-quick".

- The lint-staged will run eslint command on javascript files 
that are staged,
- The pretty-quick will format the JavaScript files if they
 aren't using Prettier.

If any of the staged files are not properly linted or formatted this will give you a warning and will stop you from committing the
changes in the code.