Upgrade your project with linters, prettier & husky
Tags: tutorial, todayilearned, programming, powerfuldevs
Published: 2021-06-07 13:27:01

Hello everyone, If you have ever worked on a open source project or any project in general where multiple people collaborate together then you might have faced issues like commit convention does not match. There is no proper/even indentation to the code or simply the difference of `' '` and `" "` in the code.
This actually makes the codebase messier. Now how can you overcome that? So there are many predifined plugins/libraries which help you in overcoming all the abouve mentioned problems.
So in this blog we are going to see the following things

1. ESLint (For generalizing the style standards for js code)
2. Prettier (For indenting your codebase evenly)
3. Husky (Running the tests and commit convention check in local machine before commiting so that you don't face linting and test fail errors afterwords)

**Note:** This linting style are of my personal choice. You can tweak in the codes to fit in your linting and style standards :)

## Extension for VS code
(This is my personal recommendation. It's personal choice)
If you want to follow along then I would recommend you to download it. For downloading you can copy the code given with the name below, into the extension search box and the extension will pop up. Click on install and it will get added to your vs code.

- Eslint ==> `dbaeumer.vscode-eslint`
- Prettier ==> `esbenp.prettier-vscode`

## Initializations & Installations

Open the project in the terminal and run the following commands by the same sequence.

1. Run the following command (if not clonned and started fresh in local machine)
```bash
git init
```

2. Run the following command (This is initialize package.json in your project)
```bash
npm init -y
```

3. Run the following command (This will creat node modules and packge-lock.json)
```bash
npm i --save-dev eslint eslint-config-prettier eslint-plugin-prettier husky lint-staged prettier
```

## Eslint

Create file **.eslintrc.json** in the root of the project and paste the following in it

```json
{
    "env": {
      "es2020": true,
      "node": true
    },
    "extends": [
      "eslint:recommended",
      "plugin:prettier/recommended"
    ],
    "rules": {
      "linebreak-style": ["error", "unix"],
      "quotes": ["error", "single", { "allowTemplateLiterals": true }],
      "semi": ["error", "always"],
      "prefer-const": "error",
      "eqeqeq": ["error", "always"],
      "curly": ["error"]
    },
}
```

## Prettier

Now create **.prettierrc** in the root of the project file and paste the following in the file

```json
{
    "endOfLine": "lf",
    "useTabs": true,
    "singleQuote": true
}
```

## Git Ignore

Now create **.gitignore** file in the root of the project and paste the following in the file

```git
/node_modules/
.env
```

## Huskey

Now create **.huskyrc** file in the root of the project and paste the following in it

```json
{
  "hooks": {
    "pre-commit": "lint-staged"
  }
}
```

Now go to package.json and add this at the end before the last **}**

```json
"lint-staged": {
    "*.js": ["eslint --fix", "prettier --write"]
}
```

Now run the following commands one by one in the terminal
 
1. Installing husky to the local project directory
```bash
npm install husky --save-dev
```
 
2. Intall husky package 
```bash
npx husky install
```

3. Initialize husky package and install dependencies
```bash
npx husky-init && npm install
```
This will create husky folder

Now go to **pre-commit** file in the husky folder and delete the **npm test** command. As we don't have tests as of now

4. Installing conventional commit style 
```bash
npm install --save-dev @commitlint/cli @commitlint/config-conventional
```

5. Add the command to commitlint.config.js file
```bash
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
```

6. Adding husky reference commit message library
```bash
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
```

That's it !!! You have setup your project with cool tools which would ease your work as a maintainer or reviewer. This will take care of all of your style guidelines.

You are all set-up with your js project. If you can to configure it with js follow [Nicholas Carrigan Notes](https://www.nhcarrigan.com/notes/#/node-ts-config/index)

## Reference : 

[Eddie Jaoude Youtube Video](https://youtu.be/FKVjAz505cY)
[Nicholas Carrigan Notes](https://www.nhcarrigan.com/notes/#/node-ts-config/index)
[Commit lint org](https://commitlint.js.org/#/)
[Huskey official documentation](https://typicode.github.io/husky/#/)

## ❤️ Thank you for reading ❤️
**🌏 Like | Follow | Share 🌏**
**My Socials:** [Twitter](https://twitter.com/kaiwalya_13) | [LinkedIn](https://linkedin.com/in/kaiwalyakoparkar) | [GitHub](https://github.com/kaiwalyakoparkar)