DEV Community

Cover image for Upgrade your project with linters, prettier & husky
Kaiwalya Koparkar
Kaiwalya Koparkar

Posted on

Upgrade your project with linters, prettier & husky

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)
git init
Enter fullscreen mode Exit fullscreen mode
  1. Run the following command (This is initialize package.json in your project)
npm init -y
Enter fullscreen mode Exit fullscreen mode
  1. Run the following command (This will creat node modules and packge-lock.json)
npm i --save-dev eslint eslint-config-prettier eslint-plugin-prettier husky lint-staged prettier
Enter fullscreen mode Exit fullscreen mode

Eslint

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

{
    "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"]
    },
}
Enter fullscreen mode Exit fullscreen mode

Prettier

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

{
    "endOfLine": "lf",
    "useTabs": true,
    "singleQuote": true
}
Enter fullscreen mode Exit fullscreen mode

Git Ignore

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

/node_modules/
.env
Enter fullscreen mode Exit fullscreen mode

Huskey

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

{
  "hooks": {
    "pre-commit": "lint-staged"
  }
}
Enter fullscreen mode Exit fullscreen mode

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

"lint-staged": {
    "*.js": ["eslint --fix", "prettier --write"]
}
Enter fullscreen mode Exit fullscreen mode

Now run the following commands one by one in the terminal

  1. Installing husky to the local project directory
npm install husky --save-dev
Enter fullscreen mode Exit fullscreen mode
  1. Intall husky package
npx husky install
Enter fullscreen mode Exit fullscreen mode
  1. Initialize husky package and install dependencies
npx husky-init && npm install
Enter fullscreen mode Exit fullscreen mode

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

  1. Installing conventional commit style
npm install --save-dev @commitlint/cli @commitlint/config-conventional
Enter fullscreen mode Exit fullscreen mode
  1. Add the command to commitlint.config.js file
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
Enter fullscreen mode Exit fullscreen mode
  1. Adding husky reference commit message library
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
Enter fullscreen mode Exit fullscreen mode

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

Reference :

Eddie Jaoude Youtube Video
Nicholas Carrigan Notes
Commit lint org
Huskey official documentation

❤️ Thank you for reading ❤️

🌏 Like | Follow | Share 🌏
My Socials: Twitter | LinkedIn | GitHub

Top comments (10)

Collapse
 
seokjeon profile image
Se-ok Jeon

Thx for this! This is really what I wanted. Helped A LOT.
Can I translate in Korean this article? If you don't mind, I wanna share this awesome information in Korean. Surely, There will be a link directing to this original one.

Collapse
 
kaiwalyakoparkar profile image
Kaiwalya Koparkar

Sorry for the pretty late reply. Sure, I would really like that :)

Collapse
 
razzmatazz710 profile image
razz

this is a lazy article.

"ESLint (For generalizing the style standards for js code)"
eslint is not only for styling. it's a linter. and linters are a tool that analyzes source code to flag programming errors, bugs, stylistic errors, and suspicious constructs.

"Prettier (For indenting your codebase evenly)"
prettier is not only for indentation. it's a code formatter.

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)
husky has hooks that other than pre-commit.

and oh so many spelling errors. this shouldn't be an "upgrade" to a project, this is a standard to every modern projects out there. if you're not following any of these, you simply do not care about writing clean code and collaboration.

Collapse
 
kaiwalyakoparkar profile image
Kaiwalya Koparkar

Thank you so much for your thoughts. :) That means a lot. I am still learning these things and trying to put forward my learning. Things you just mentioned have surely added to my knowledge I appreciate it! More suggestions for room to improvement are always welcome. I will surely look onto your topics :)

Collapse
 
pobx profile image
Pobx

It's good thing to do. today I use these tools for my angular project(@angular/eslint) but it's same way. Thank you for your tutorial. I think it's a good point for anyone who want to keep a quality code base on repository.

Collapse
 
kaiwalyakoparkar profile image
Kaiwalya Koparkar

Thank you so much! Yeah they really save our time as a developers. Glad you liked it.

Collapse
 
eddiejaoude profile image
Eddie Jaoude

Great work! Thank you for the mention :)

Collapse
 
kaiwalyakoparkar profile image
Kaiwalya Koparkar

Thank you ! That was worth mentioning :)

Collapse
 
nikosanif profile image
Nikos Anifantis

Nice job! I have also written a similar article:
dev.to/nikosanif/awesome-dev-tools...

Collapse
 
kaiwalyakoparkar profile image
Kaiwalya Koparkar

That's awesome. I loved the screenshot you put for explaining the things. Great work :)