1:HL["/_next/static/media/2d141e1a38819612-s.p.woff2","font",{"crossOrigin":"","type":"font/woff2"}]
2:HL["/_next/static/css/cf073754662ee1dd.css","style",{"crossOrigin":""}]
0:["PKb518kvGJ1fSv37ZR9-f",[[["",{"children":["blog",{"children":[["slug","husky-commitlint-lint-staged","d"],{"children":["__PAGE__?{\"slug\":\"husky-commitlint-lint-staged\"}",{}]}]}]},"$undefined","$undefined",true],"$L3",[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/cf073754662ee1dd.css","precedence":"next","crossOrigin":""}]],"$L4"]]]]
5:I[7221,["311","static/chunks/311-ece9a4947c63cbe4.js","965","static/chunks/965-704ef81d34001ffc.js","45","static/chunks/45-5cd7c451ab04a44f.js","185","static/chunks/app/layout-c9339678b85bd69a.js"],"ThemeProvider"]
6:I[2920,["311","static/chunks/311-ece9a4947c63cbe4.js","965","static/chunks/965-704ef81d34001ffc.js","45","static/chunks/45-5cd7c451ab04a44f.js","185","static/chunks/app/layout-c9339678b85bd69a.js"],"Header"]
7:I[6899,[],""]
8:I[345,[],""]
9:I[9311,["311","static/chunks/311-ece9a4947c63cbe4.js","900","static/chunks/900-5fb194ef90f0bbe9.js","965","static/chunks/965-704ef81d34001ffc.js","308","static/chunks/app/blog/%5Bslug%5D/page-79b4219c250c2fa1.js"],""]
c:I[9328,["311","static/chunks/311-ece9a4947c63cbe4.js","965","static/chunks/965-704ef81d34001ffc.js","45","static/chunks/45-5cd7c451ab04a44f.js","185","static/chunks/app/layout-c9339678b85bd69a.js"],"GoogleAnalytics"]
d:I[5097,["311","static/chunks/311-ece9a4947c63cbe4.js","900","static/chunks/900-5fb194ef90f0bbe9.js","965","static/chunks/965-704ef81d34001ffc.js","308","static/chunks/app/blog/%5Bslug%5D/page-79b4219c250c2fa1.js"],""]
4:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Pre-commit hooks with husky v6, commitlint and lint-staged | Adarsha Acharya"}],["$","meta","2",{"name":"description","content":"In this guide we will learn how to enforce commit conventions in your project running pre-commit checks."}],["$","meta","3",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","4",{"name":"robots","content":"index, follow"}],["$","meta","5",{"name":"googlebot","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","meta","6",{"property":"og:title","content":"Pre-commit hooks with husky v6, commitlint and lint-staged"}],["$","meta","7",{"property":"og:description","content":"In this guide we will learn how to enforce commit conventions in your project running pre-commit checks."}],["$","meta","8",{"property":"og:url","content":"https://adarsha.dev/blog/husky-commitlint-lint-staged"}],["$","meta","9",{"property":"og:site_name","content":"Adarsha Acharya"}],["$","meta","10",{"property":"og:locale","content":"en_US"}],["$","meta","11",{"property":"og:image","content":"https://adarsha.dev/og?title=Pre-commit%20hooks%20with%20husky%20v6,%20commitlint%20and%20lint-staged"}],["$","meta","12",{"property":"og:image:width","content":"1200"}],["$","meta","13",{"property":"og:image:height","content":"630"}],["$","meta","14",{"property":"og:image:alt","content":"Pre-commit hooks with husky v6, commitlint and lint-staged"}],["$","meta","15",{"property":"og:type","content":"article"}],["$","meta","16",{"property":"article:published_time","content":"2021-04-06\r"}],["$","meta","17",{"property":"article:author","content":"Adarsha Acharya"}],["$","meta","18",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","19",{"name":"twitter:title","content":"Pre-commit hooks with husky v6, commitlint and lint-staged"}],["$","meta","20",{"name":"twitter:description","content":"In this guide we will learn how to enforce commit conventions in your project running pre-commit checks."}],["$","meta","21",{"name":"twitter:image","content":"https://adarsha.dev/og?title=Pre-commit%20hooks%20with%20husky%20v6,%20commitlint%20and%20lint-staged"}],["$","meta","22",{"name":"next-size-adjust"}]]
3:[null,["$","html",null,{"lang":"en","suppressHydrationWarning":true,"children":[[["$","link",null,{"rel":"apple-touch-icon","sizes":"76x76","href":"/_static/favicons/apple-touch-icon.png"}],["$","link",null,{"rel":"icon","type":"image/png","sizes":"32x32","href":"/_static/favicons/favicon-32x32.png"}],["$","link",null,{"rel":"icon","type":"image/png","sizes":"16x16","href":"/_static/favicons/favicon-16x16.png"}],["$","link",null,{"rel":"manifest","href":"/_static/favicons/site.webmanifest"}],["$","link",null,{"rel":"mask-icon","href":"/_static/favicons/safari-pinned-tab.svg","color":"#5bbad5"}],["$","meta",null,{"name":"msapplication-TileColor","content":"#000000"}],["$","meta",null,{"name":"theme-color","media":"(prefers-color-scheme: light)","content":"#fff"}],["$","meta",null,{"name":"theme-color","media":"(prefers-color-scheme: dark)","content":"#000"}],["$","link",null,{"rel":"alternate","type":"application/rss+xml","href":"/feed.xml"}],["$","meta",null,{"content":"width=device-width, initial-scale=1","name":"viewport"}],["$","meta",null,{"name":"google-site-verification","content":"br9AjaAyJgS4OVigpXtHmm2DwdzuzMqzpK4G77lD2TY"}]],["$","body",null,{"className":"mx-auto min-h-screen max-w-3xl antialiased dark:bg-zinc-950 dark:text-gray-100 __className_0aa4ae","children":[["$","$L5",null,{"attribute":"class","defaultTheme":"dark","enableSystem":true,"disableTransitionOnChange":true,"children":[["$","main",null,{"className":"mx-4  px-2 md:px-0 lg:mx-auto flex flex-col justify-between min-h-screen","children":[["$","$L6",null,{}],["$","$L7",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","template":["$","$L8",null,{}],"templateStyles":"$undefined","notFound":["$","div",null,{"className":"flex flex-col items-start justify-start md:flex-row md:items-center md:justify-center md:space-x-6","children":[["$","div",null,{"className":"space-x-2 pb-8 pt-6 md:space-y-5","children":["$","h1",null,{"className":"text-6xl font-extrabold leading-9 tracking-tight  md:border-r-2 md:px-6 md:text-8xl md:leading-14","children":"404"}]}],["$","div",null,{"className":"max-w-md","children":[["$","p",null,{"className":"mb-4 text-xl font-bold leading-normal md:text-2xl","children":"Sorry we couldn't find this page."}],["$","$L9",null,{"href":"/","className":"underline","children":"Back to homepage"}]]}]]}],"notFoundStyles":[],"childProp":{"current":["$","$L7",null,{"parallelRouterKey":"children","segmentPath":["children","blog","children"],"loading":"$undefined","loadingStyles":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","template":["$","$L8",null,{}],"templateStyles":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","childProp":{"current":["$","$L7",null,{"parallelRouterKey":"children","segmentPath":["children","blog","children",["slug","husky-commitlint-lint-staged","d"],"children"],"loading":"$undefined","loadingStyles":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","template":["$","$L8",null,{}],"templateStyles":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","childProp":{"current":["$La","$Lb",null],"segment":"__PAGE__?{\"slug\":\"husky-commitlint-lint-staged\"}"},"styles":[]}],"segment":["slug","husky-commitlint-lint-staged","d"]},"styles":[]}],"segment":"blog"},"styles":[]}],["$","footer",null,{"className":"flex justify-center align-center pt-10 pb-5 h-20px","children":["$","p",null,{"className":"text-gray-500  dark:text-gray-400 text-sm","children":["© ",2024," ",["$","a",null,{"href":"https://x.com/adarsha_ach","target":"_blank","rel":"noopener noreferrer","children":"Adarsha Acharya."}],"  All rights reserved."]}]}]]}],null]}],["$","$Lc",null,{"gaId":"$undefined"}],["$","$Ld",null,{"async":true,"src":"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-undefined","crossOrigin":"anonymous","strategy":"afterInteractive"}]]}]]}],null]
e:I[3364,["311","static/chunks/311-ece9a4947c63cbe4.js","900","static/chunks/900-5fb194ef90f0bbe9.js","965","static/chunks/965-704ef81d34001ffc.js","308","static/chunks/app/blog/%5Bslug%5D/page-79b4219c250c2fa1.js"],""]
f:I[5900,["311","static/chunks/311-ece9a4947c63cbe4.js","900","static/chunks/900-5fb194ef90f0bbe9.js","965","static/chunks/965-704ef81d34001ffc.js","308","static/chunks/app/blog/%5Bslug%5D/page-79b4219c250c2fa1.js"],"Image"]
10:I[419,["311","static/chunks/311-ece9a4947c63cbe4.js","900","static/chunks/900-5fb194ef90f0bbe9.js","965","static/chunks/965-704ef81d34001ffc.js","308","static/chunks/app/blog/%5Bslug%5D/page-79b4219c250c2fa1.js"],"BlogComments"]
b:["$","section",null,{"children":[["$","h1",null,{"className":"text-2xl font-bold tracking-tighter","children":["$","$Le",null,{"children":"Pre-commit hooks with husky v6, commitlint and lint-staged"}]}],["$","div",null,{"className":"mb-8 mt-2 flex items-center justify-between text-sm text-neutral-600 dark:text-neutral-400","children":["$","p",null,{"children":["April 6, 2021"," - ","4 min read"]}]}],[["$","article",null,{"className":"prose prose-neutral dark:prose-invert prose-quoteless  max-w-none","children":[["$","h3",null,{"id":"commit-conventions","children":[["$","a",null,{"className":"anchor","href":"#commit-conventions","children":["$","span",null,{"className":"icon icon-link"}]}],"Commit Conventions"]}],"\n",["$","p",null,{"children":"While working on the larger projects the contributors may add any sorts of random commit messages that will make the git log messy. It's always good to enforce some kinds of conventions while making the commit message.It will make the commit history more readable."}],"\n",["$","p",null,{"children":["We can write convention by ourself but there is already ",["$","a",null,{"target":"_blank","rel":"noopener noreferrer","href":"https://www.conventionalcommits.org/en/v1.0.0/","children":"Conventional Commits"}]," and npm packages built for us to make this process a lot easier."]}],"\n",["$","p",null,{"children":"Example :\r\nCommit message with scope"}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"bash","data-theme":"default","children":["$","code",null,{"data-language":"bash","data-theme":"default","style":{"display":"grid"},"children":["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#61AFEF"},"children":"feat(lang"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"): add nepali language"}]]}]}]}]}],"\n",["$","p",null,{"children":["You can check other conventions ",["$","a",null,{"target":"_blank","rel":"noopener noreferrer","href":"https://www.conventionalcommits.org/en/v1.0.0/","children":"here"}],"."]}],"\n",["$","div",null,{"align":"center","children":["$","$Lf",null,{"src":"/_static/blogs/husky-commitlint-lint-staged/commitlint.svg","width":1280,"height":720,"alt":"commitlint","className":"rounded-lg"}]}],"\n",["$","div",null,{"align":"center","children":["$","p",null,{"children":["$","em",null,{"children":["Credit : ",["$","a",null,{"target":"_blank","rel":"noopener noreferrer","href":"https://github.com/conventional-changelog/commitlint/blob/master/README.md","children":"commitlint"}]," package docs"]}]}]}],"\n",["$","h3",null,{"id":"pre-commit-checks","children":[["$","a",null,{"className":"anchor","href":"#pre-commit-checks","children":["$","span",null,{"className":"icon icon-link"}]}],"Pre-commit checks"]}],"\n",["$","p",null,{"children":"Git hooks are the actions that git allows you to perform certain action when we trigger certain actions in our git workflow. The events might be:"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"pre-commit"}],"\n",["$","li",null,{"children":"pre-push"}],"\n",["$","li",null,{"children":"pre-rebase"}],"\n",["$","li",null,{"children":"post-update"}],"\n"]}],"\n",["$","p",null,{"children":["Pre-commit hooks are actions that run after staging your changes and running ",["$","code",null,{"children":"git commit"}]," and before a commit is completed."]}],"\n",["$","p",null,{"children":["We can make pre-commit hooks to check ",["$","code",null,{"children":"conventional-commits"}]," on every commit.\r\nIf the checks fail then the commit is not made and an error shown, while if all checks pass the commit is made as normal."]}],"\n",["$","h3",null,{"id":"husky-","children":[["$","a",null,{"className":"anchor","href":"#husky-","children":["$","span",null,{"className":"icon icon-link"}]}],"Husky 🐶"]}],"\n",["$","p",null,{"children":"Husky makes these things easier by defining the hooks and run the certain sceipts when certain events are triggered in git workflow."}],"\n",["$","h3",null,{"id":"whats-in-husky-v6-","children":[["$","a",null,{"className":"anchor","href":"#whats-in-husky-v6-","children":["$","span",null,{"className":"icon icon-link"}]}],"What's in Husky v6 ?"]}],"\n",["$","p",null,{"children":"After the introduction from husky v4 to v6 there are sinificant changes in the husky tooling. The new Husky approach tends to keep the Husky away from the JS eco-system, instead making it hybrid."}],"\n",["$","p",null,{"children":"There are two excellent articles by husky authors regarding this :"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":["\n",["$","p",null,{"children":["$","a",null,{"target":"_blank","rel":"noopener noreferrer","href":"https://blog.typicode.com/husky-git-hooks-javascript-config/","children":"Why husky has dropped conventional JS config"}]}],"\n"]}],"\n",["$","li",null,{"children":["\n",["$","p",null,{"children":["$","a",null,{"target":"_blank","rel":"noopener noreferrer","href":"https://blog.typicode.com/husky-git-hooks-autoinstall/","children":"Why husky doesn't autoinstall anymore"}]}],"\n"]}],"\n"]}],"\n",["$","h3",null,{"id":"local-setup","children":[["$","a",null,{"className":"anchor","href":"#local-setup","children":["$","span",null,{"className":"icon icon-link"}]}],"Local Setup"]}],"\n",["$","p",null,{"children":"I've taken an React project in this example but you can setup on any projects."}],"\n",["$","p",null,{"children":"Run following command in your terminal :"}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"bash","data-theme":"default","children":["$","code",null,{"data-language":"bash","data-theme":"default","style":{"display":"grid"},"children":["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#61AFEF"},"children":"npx"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"husky-init"}]]}]}]}]}],"\n",["$","p",null,{"children":["Chack your ",["$","code",null,{"children":"package.json"}]," file. You may have seen ",["$","code",null,{"children":"prepare"}]," script and ",["$","code",null,{"children":"husky"}]," added as dev dependencies."]}],"\n",["$","p",null,{"children":["$","code",null,{"children":"package.json"}]}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"json","data-theme":"default","children":["$","code",null,{"data-language":"json","data-theme":"default","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"{"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"\"scripts\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    "}],["$","span",null,{"style":{"color":"#FFFFFF"},"children":"..."}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"\"prepare\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"husky install\""}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  },"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"\"devDependencies\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    "}],["$","span",null,{"style":{"color":"#FFFFFF"},"children":"..."}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"\"husky\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"^6.0.0\""}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"}"}]}]]}]}]}],"\n",["$","p",null,{"children":"Install husky in your project :"}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"bash","data-theme":"default","children":["$","code",null,{"data-language":"bash","data-theme":"default","style":{"display":"grid"},"children":["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#61AFEF"},"children":"npm"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"install"}]]}]}]}]}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"bash","data-theme":"default","children":["$","code",null,{"data-language":"bash","data-theme":"default","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#61AFEF"},"children":"npx"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"husky"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"add"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":".husky/commit-msg"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"'npx --no-install commitlint --edit \"$1\"'"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}]]}]}]}],"\n",["$","p",null,{"children":["Previously, all hooks lived within package.json under the \"husky\" object. Now it creates separate directory named ",["$","code",null,{"children":".husky/"}]," and creates two files ",["$","code",null,{"children":"commit-msg"}]," & ",["$","code",null,{"children":"pre-commit"}],"."]}],"\n",["$","p",null,{"children":["Checking ",["$","code",null,{"children":"comit-msg"}]," file you might find the following bash script :"]}],"\n",["$","p",null,{"children":["$","code",null,{"children":".husky/commit-msg"}]}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"bash","data-theme":"default","children":["$","code",null,{"data-language":"bash","data-theme":"default","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":"#!/bin/sh"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#56B6C2"},"children":"."}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"$("}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"dirname"}],["$","span",null,{"style":{"color":"#98C379"},"children":" \""}],["$","span",null,{"style":{"color":"#E06C75","fontStyle":"italic"},"children":"$$0"}],["$","span",null,{"style":{"color":"#98C379"},"children":"\")/_/husky.sh\""}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#61AFEF"},"children":"npx"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66"},"children":"--no-install"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"commitlint"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66"},"children":"--edit"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"\""}]]}],"\n",["$","span",null,{"data-line":"","children":" "}]]}]}]}],"\n",["$","p",null,{"children":["Since, we are not doing any thing in ",["$","code",null,{"children":"pre-commit"}]," hooks clear everything what's inside the ",["$","code",null,{"children":".husky/pre-commit"}]," and we will add additional scripts over here later."]}],"\n",["$","p",null,{"children":["$","strong",null,{"children":"Add commit-lint package to lint commit messages."}]}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"bash","data-theme":"default","children":["$","code",null,{"data-language":"bash","data-theme":"default","style":{"display":"grid"},"children":["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#61AFEF"},"children":"npm"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"install"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"@commitlint/config-conventional"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"@commitlint/cli"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66"},"children":"--dev"}]]}]}]}]}],"\n",["$","p",null,{"children":["Create file named ",["$","code",null,{"children":"commitlint.config.js"}]," in your root directory and paste following code there :\r\n",["$","code",null,{"children":"commitlint.config.js"}],":"]}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"js","data-theme":"default","children":["$","code",null,{"data-language":"js","data-theme":"default","style":{"display":"grid"},"children":["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#E5C07B"},"children":"module"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"exports"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" { "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"extends"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": ["}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"@commitlint/config-conventional\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"] };"}]]}]}]}]}],"\n",["$","p",null,{"children":["$","strong",null,{"children":"The setup now works for the commitlint !!"}]}],"\n",["$","$Lf",null,{"src":"/_static/blogs/husky-commitlint-lint-staged/fail-commit.png","width":1280,"height":720,"alt":"fail-commit","className":"rounded-lg"}],"\n",["$","h3",null,{"id":"adding-lint-staged","children":[["$","a",null,{"className":"anchor","href":"#adding-lint-staged","children":["$","span",null,{"className":"icon icon-link"}]}],"Adding lint-staged"]}],"\n",["$","p",null,{"children":["But, the problem with our current setup is that the hooks runs of the whole file system in our project which is perfectly fine in small projects.\r\nSuppose we are working on large project where we have to lun prettier and lint before every commits ",["$","code",null,{"children":"pre-commit"}]," hooks will then run all the unstaged files too and makes the"]}],"\n",["$","p",null,{"children":"But as the file size grows\r\nwe want to only track those files which are only changed and staged."}],"\n",["$","p",null,{"children":["For that we need npm package ",["$","code",null,{"children":"lint-staged"}],"."]}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"bash","data-theme":"default","children":["$","code",null,{"data-language":"bash","data-theme":"default","style":{"display":"grid"},"children":["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#61AFEF"},"children":"npm"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"install"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"lint-staged"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66"},"children":"--save-dev"}]]}]}]}]}],"\n",["$","p",null,{"children":["Now go to package.json and write the following script ",["$","code",null,{"children":"pre-commit"}]," which runs the lint-staged in our project."]}],"\n",["$","p",null,{"children":["$","code",null,{"children":"package.json"}]}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"json","data-theme":"default","children":["$","code",null,{"data-language":"json","data-theme":"default","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"scripts\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    "}],["$","span",null,{"style":{"color":"#FFFFFF"},"children":"..."}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"\"pre-commit\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"lint-staged\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"\"prepare\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"husky install\""}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  },"}]}]]}]}]}],"\n",["$","p",null,{"children":["Now create file named ",["$","code",null,{"children":".lintstagedrc"}]," on our root directory and let us write configuration what we want the ",["$","code",null,{"children":"lint-staged"}]," to do before commits."]}],"\n",["$","p",null,{"children":["$","em",null,{"children":"You can setup below file as per your needs here I've setup lint-staged to run the eslint and prettier on src/ directory."}]}],"\n",["$","p",null,{"children":[["$","code",null,{"children":".lintstagedrc"}],":"]}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"json","data-theme":"default","children":["$","code",null,{"data-language":"json","data-theme":"default","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"{"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"\"src/**/*.+(js|json|ts|tsx)\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": ["}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"eslint\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"],"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"\"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": ["}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"prettier --write\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"]"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"}"}]}]]}]}]}],"\n",["$","p",null,{"children":["Now inside ",["$","code",null,{"children":".husky/pre-commit"}]," add the following script :"]}],"\n",["$","p",null,{"children":[["$","code",null,{"children":".husky/pre-commit"}],":"]}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"bash","data-theme":"default","children":["$","code",null,{"data-language":"bash","data-theme":"default","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":"#!/bin/sh"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#56B6C2"},"children":"."}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"$("}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"dirname"}],["$","span",null,{"style":{"color":"#98C379"},"children":" \""}],["$","span",null,{"style":{"color":"#E06C75","fontStyle":"italic"},"children":"$$0"}],["$","span",null,{"style":{"color":"#98C379"},"children":"\")/_/husky.sh\""}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#61AFEF"},"children":"npm"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"run"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"pre-commit"}]]}]]}]}]}],"\n",["$","p",null,{"children":"That's it ! Now test everything that we've worked on."}],"\n",["$","$Lf",null,{"src":"/_static/blogs/husky-commitlint-lint-staged/success.png","width":1280,"height":720,"alt":"commit-success","className":"rounded-lg"}],"\n",["$","blockquote",null,{"children":["\n",["$","p",null,{"children":["🧠 If you are already using husky in your project you can migrate easily yo v6 ",["$","a",null,{"target":"_blank","rel":"noopener noreferrer","href":"https://github.com/typicode/husky-4-to-6","children":"check this link!"}]]}],"\n"]}]]}],["$","$L10",null,{}]]]}]
a:null