How to integrate Husky, ESLint, Prettier to project in less than 15 minutes (step-by-step guide)
Tags: vscode, javascript, webdev, tutorial
Published: 2021-12-04 11:58:00

Usage of code formatter increases the readability of code and helps to keep the same style in the whole project. In this article, we will go through one of the most popular linter ESLint, which is intended for Javascript and Typescript. Next, we will set code formatter for HTML and other files called Prettier. When we add to them Husky hooks after that, we will be able to ensure the same code style for each member of the team, or contributor to our project.

NB: You can skip 1. section if you have already installed Prettier and ESLint extensions in VS Code.

## 1. Add extensions to VSCode (Optional)
In first step add extension to your VSCode (**Ctrl + Shift + X**) 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d1gyb9umfdvjc21nc6ny.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yr7aut4cotfk7dt3e04e.png)

## 2. Install Prettier and pretty-quick
Install packages using **npm**:
```node
npm install --save-dev prettier pretty-quick
```

### 2.1 configuration of Prettier - Code formatter
Create 2 files in a directory where you have **package.json**

**.prettierignore.json**
```node
package.json
package-lock.json
yarn.lock
dist
node_modules
```

**.prettierrc**
```javascript
{
  "bracketSpacing": true,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "none",
  "printWidth": 80,
  "tabWidth": 2
}
```
**The Directory should look as follow:**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2xzmbgbvwrpeaide7da9.png)
If you were asking why is needed pretty-quick, now it's time to use it. With pretty-quick you can run formatter on all files (or only staged etc.) using one command.

```node
npx pretty-quick 
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q239oibe795dug8gl44q.gif)
We will integrate this tool later together with husky hooks.

**NB:** If you are using **Windows Powershell** and have problem run **npx** command, you have to change **execution policy**

```
set-executionpolicy remotesigned
```

## 3. Install ESLint

For **local** install of package use:
```node
npm install eslint 
```
For **global** install
```node
npm install -g eslint 
```
For generating configuration file for ESLint **.eslintrc.json** you can choose from two options:

### 3.1. Use VSCode command pallete
Open command pallete in VSCode **(Ctrl + Shift + P)**.
and run _ESLint: Create ESLInt configuration_. It will directly open a terminal and start a process of configuration.

### 3.2. Use npm

If you have installed ESLint package **globally** to generate file use
```node
npm eslint --init
```
If you have installed your ESLint package **locally** then you should use slightly different command for **(Windows)**:
```node
 .\node_modules\.bin\eslint --init 
```
and for **Linux** and **Mac**:
```node
./node_modules/.bin/eslint --init
```
Both approaches come to the same configuration process where you have to answer some questions about linter settings.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w00xvszw84wl6v7vebpk.png)

After answering all questions, the configuration file is generated and all required packages are installed.

Example of **.eslintrc.json** if you have the same answers as on previous picture should look similar as follow:

```node
{
  "root": true,
  "ignorePatterns": ["projects/**/*"],
  "overrides": [
    {
      "files": ["*.ts"],
      "parserOptions": {
        "project": ["tsconfig.json"],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "rules": {
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "app",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "app",
            "style": "kebab-case"
          }
        ]
      }
    },
    {
      "files": ["*.html"],
      "extends": ["plugin:@angular-eslint/template/recommended"],
      "rules": {}
    }
  ]
}
```
## 5. Husky 
Git has a way how to trigger custom scripts when some action occurs i.e commit or push. You can use it to lint your commit messages, run tests, lint code, etc. when you commit or push. Husky supports all Git hooks.

```node
npm install --save-dev husky
```

### 5.1 Add husky hooks to package.json

```node
"husky": {
    "hooks": {
      "pre-commit": "npx pretty-quick --staged ng lint ng test",
      "pre-push": "ng build --aot true"
    }
```


### 5.2 Add prepare script to package.json
```node 
"prepare": "cd .. && husky install client/.husky"
```

**NB:** You have to install husky from root directory where git repository is initialized, that's why I have to change directory before.


### 5.3 run prepare script
```node 
npm run prepare
```

### 5.4 create hook for pre-commit

```node
npx husky add ./client/.husky/pre-commit "npx pretty-quick --staged ng lint ng test"
```
It will be launched each time after we fire git commit.

### 5.5 Result

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m1wzz5evk1ywfc64f9wj.gif)

If you like this article, feel free to comment, or share it.

If you want to support me with coffee you can do it here: [![Buy Me A Coffee](https://cdn.buymeacoffee.com/buttons/default-black.png)](https://www.buymeacoffee.com/smetankajakub)
I would be grateful ;) 

Follow me on [Twitter](https://twitter.com/smetankajakub_)

Visit website [smetankajakub.com](https://www.smetankajakub.com)


####Resources
https://typicode.github.io/husky/#/
https://docs.microsoft.com/sk-sk/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7.1
https://prettier.io/
https://eslint.org/