This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 15k traffic Daily!!!

Automatically Format your code on Git Commit using Husky, ESLint, Prettier in 9 minutes


When collaborating on a challenge with a number of different builders, sustaining a constant code model drastically improves the code readability and maintainability.

Fortunately we are able to automate this important course of utilizing Husky, ESLint, Prettier to ensure the code is formatted, each time somebody commits.



1. Set up Packages

We have to set up the next packages:

  • Husky: A device that makes working with git hooks a bit of cake
  • ESLint: Linter for JavaScript
  • Prettier: Code formatter
  • Lint-staged: Because the docs state: Run linters towards staged git recordsdata and do not let 💩 slip into your codebase!

To put in the packages, use:

npm set up --save-dev eslint prettier lint-staged husky
Enter fullscreen mode

Exit fullscreen mode



2. Configure ESLint

Run the next command to initialize ESLint:

npx eslint --init
Enter fullscreen mode

Exit fullscreen mode

You may be prompted to reply a couple of questions, from which the configuration to your particular use case will likely be generated

eslint setup

The generated configuration would look one thing like this:

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint:recommended"]
}
Enter fullscreen mode

Exit fullscreen mode

If you’re lazy like me, simply copy and paste the configuration right into a file referred to as .eslintrc.json as an alternative of answering the lengthy checklist of questions.

To take a look at all of the accessible configurations, go to the ESLint documentation. The config supplied above is only a barebone instance.



3. Configure Prettier

Configuring Prettier is just like ESlint, simply add a .prettierrc.json file to your challenge root and you’re good to go.

You need to use the next configuration as a place to begin:

{
  "bracketSpacing": true,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 80,
  "tabWidth": 2
}
Enter fullscreen mode

Exit fullscreen mode

To take a look at all of the accessible choices, head over to the Prettier Documentation.

Additionally add a .prettierignore file to your challenge root to ignore recordsdata that you do not wish to be formatted, use the next content material as a base:

package-lock.json
yarn.lock
node_modules
# another undesirable recordsdata or folders
Enter fullscreen mode

Exit fullscreen mode



4. Configure Lint-staged

Lint-staged too is sort of easy to configure. Simply add the next to your package deal.json file and you’re good to go:

{
  /* different configurations */
  "lint-staged": {
    "**/*.{js,jsx,json}": ["eslint . --fix", "prettier --write ."]
  }
}
Enter fullscreen mode

Exit fullscreen mode



5. Configure Husky

We’re on the final peg of our configuration journey. Configuring Husky is a bit trickier than the opposite configurations. Add the next script to your package deal.json file:

{
  /* different configurations */
  "scripts": {
    /* different scripts */
    "configure-husky": "npx husky set up && npx husky add .husky/pre-commit "npx --no-install lint-staged""
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
}
Enter fullscreen mode

Exit fullscreen mode

Run the configure-husky script to put in Husky and join it to the pre-commit hook:

npm run configure-husky
Enter fullscreen mode

Exit fullscreen mode

You are actually set! Let’s attempt committing some modifications

committing changes

BINGO! IT WORKS! 🎉

Any longer, sustaining a constant code model in your challenge will likely be a breeze.

Joyful Growing!

Want a Prime Rated Entrance-Finish Growth Freelancer to cut away your growth woes? Contact me on Upwork

Need to see what I’m engaged on? Take a look at my Personal Website and GitHub

Need to join? Attain out to me on LinkedIn

I’m a freelancer who will begin off as a Digital Nomad in mid-2022. Need to catch the journey? Observe me on Instagram

Observe my blogs for Weekly new Tidbits on Dev

FAQ

These are a couple of generally requested questions I get. So, I hope this FAQ part solves your points.

  1. I’m a newbie, how ought to I be taught Entrance-Finish Net Dev?
    Look into the next articles:

    1. Entrance Finish Growth Roadmap
    2. Entrance Finish Undertaking Concepts



The Article was Inspired from tech community site.
Contact us if this is inspired from your article and we will give you credit for it for serving the community.

This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 10k Tech related traffic daily !!!

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to Contribute to us or want to have 15k+ Audience read your Article ? Or Just want to make a strong Backlink?