[{"data":1,"prerenderedAt":344},["ShallowReactive",2],{"\u002Fblog\u002F2025-02-12-automate-formatting-of-code-with-prettier-and-husky":3},{"id":4,"title":5,"body":6,"category":333,"date":334,"description":335,"extension":336,"meta":337,"navigation":338,"path":339,"seo":340,"stem":341,"thumbnail":342,"__hash__":343},"blogs\u002Fblog\u002F2025-02-12-automate-formatting-of-code-with-prettier-and-husky.md","Automate Formatting of Code with Prettier and Husky",{"type":7,"value":8,"toc":327},"minimark",[9,14,18,22,61,65,149,152,171,194,262,265,269,272,275,287,294,297,313,323],[10,11,13],"h2",{"id":12},"standardizing-the-code-format-before-committing-to-github","Standardizing the code format before committing to GitHub",[15,16,17],"p",{},"When working as a team, having a consistent coding structure and format is very important. Imagine a scenario where someone in the team installs a formatter while others don't. This results in commits that appear to have significant changes, but in reality, they only involve minor formatting differences, such as spaces and quote styles. Here comes the automation that I personally use for most of my projects and decided to write it down as a blog so that I could share it with future developers or even my future self.",[10,19,21],{"id":20},"step-1-install-the-dependencies","Step 1: Install the dependencies",[23,24,29],"pre",{"className":25,"code":26,"language":27,"meta":28,"style":28},"language-bash shiki shiki-themes github-dark","npm install -D husky lint-staged eslint prettier\n","bash","",[30,31,32],"code",{"__ignoreMap":28},[33,34,37,41,45,49,52,55,58],"span",{"class":35,"line":36},"line",1,[33,38,40],{"class":39},"svObZ","npm",[33,42,44],{"class":43},"sU2Wk"," install",[33,46,48],{"class":47},"sDLfK"," -D",[33,50,51],{"class":43}," husky",[33,53,54],{"class":43}," lint-staged",[33,56,57],{"class":43}," eslint",[33,59,60],{"class":43}," prettier\n",[10,62,64],{"id":63},"step-2-create-config-for-prettier","Step 2: Create config for Prettier",[23,66,71],{"className":67,"code":68,"filename":69,"language":70,"meta":28,"style":28},"language-json shiki shiki-themes github-dark","{\n  \"singleQuote\": true,\n  \"semi\": true,\n  \"printWidth\": 100,\n  \"trailingComma\": \"all\",\n  \"endOfLine\": \"auto\"\n}\n",".prettierrc.json","json",[30,72,73,79,94,106,119,132,143],{"__ignoreMap":28},[33,74,75],{"class":35,"line":36},[33,76,78],{"class":77},"s95oV","{\n",[33,80,82,85,88,91],{"class":35,"line":81},2,[33,83,84],{"class":47},"  \"singleQuote\"",[33,86,87],{"class":77},": ",[33,89,90],{"class":47},"true",[33,92,93],{"class":77},",\n",[33,95,97,100,102,104],{"class":35,"line":96},3,[33,98,99],{"class":47},"  \"semi\"",[33,101,87],{"class":77},[33,103,90],{"class":47},[33,105,93],{"class":77},[33,107,109,112,114,117],{"class":35,"line":108},4,[33,110,111],{"class":47},"  \"printWidth\"",[33,113,87],{"class":77},[33,115,116],{"class":47},"100",[33,118,93],{"class":77},[33,120,122,125,127,130],{"class":35,"line":121},5,[33,123,124],{"class":47},"  \"trailingComma\"",[33,126,87],{"class":77},[33,128,129],{"class":43},"\"all\"",[33,131,93],{"class":77},[33,133,135,138,140],{"class":35,"line":134},6,[33,136,137],{"class":47},"  \"endOfLine\"",[33,139,87],{"class":77},[33,141,142],{"class":43},"\"auto\"\n",[33,144,146],{"class":35,"line":145},7,[33,147,148],{"class":77},"}\n",[15,150,151],{},"Use the following to format the code:",[23,153,155],{"className":25,"code":154,"language":27,"meta":28,"style":28},"npx prettier --write .\n",[30,156,157],{"__ignoreMap":28},[33,158,159,162,165,168],{"class":35,"line":36},[33,160,161],{"class":39},"npx",[33,163,164],{"class":43}," prettier",[33,166,167],{"class":47}," --write",[33,169,170],{"class":43}," .\n",[15,172,173,174,177,178,181,182,185,186,189,190,193],{},"You may add the following to the ",[30,175,176],{},"scripts"," section of ",[30,179,180],{},"package.json"," so that you can run ",[30,183,184],{},"npm run format"," to format manually all files while ",[30,187,188],{},"npm run lint-staged"," to check prettier on the staged files which is what we want to do in the end of the tutorial. In the example below, I am using ",[30,191,192],{},"*.{js,ts,vue}"," to format all JavaScript, TypeScript, and Vue files. For different project that use different languages, you may want to change the file extension.",[23,195,197],{"className":67,"code":196,"filename":180,"language":70,"meta":28,"style":28},"\"scripts\": {\n  \u002F\u002F Other default scripts\n  \"format\": \"prettier --write .\",\n  \"lint-staged\": \"lint-staged\"\n},\n\"lint-staged\": {\n  \"*.{js,ts,vue}\": \"prettier --write\"\n},\n",[30,198,199,207,213,225,235,240,247,257],{"__ignoreMap":28},[33,200,201,204],{"class":35,"line":36},[33,202,203],{"class":43},"\"scripts\"",[33,205,206],{"class":77},": {\n",[33,208,209],{"class":35,"line":81},[33,210,212],{"class":211},"sAwPA","  \u002F\u002F Other default scripts\n",[33,214,215,218,220,223],{"class":35,"line":96},[33,216,217],{"class":47},"  \"format\"",[33,219,87],{"class":77},[33,221,222],{"class":43},"\"prettier --write .\"",[33,224,93],{"class":77},[33,226,227,230,232],{"class":35,"line":108},[33,228,229],{"class":47},"  \"lint-staged\"",[33,231,87],{"class":77},[33,233,234],{"class":43},"\"lint-staged\"\n",[33,236,237],{"class":35,"line":121},[33,238,239],{"class":77},"},\n",[33,241,242,245],{"class":35,"line":134},[33,243,244],{"class":43},"\"lint-staged\"",[33,246,206],{"class":77},[33,248,249,252,254],{"class":35,"line":145},[33,250,251],{"class":47},"  \"*.{js,ts,vue}\"",[33,253,87],{"class":77},[33,255,256],{"class":43},"\"prettier --write\"\n",[33,258,260],{"class":35,"line":259},8,[33,261,239],{"class":77},[15,263,264],{},"At this step, you would see that you have almost all files with corrections. You may want to commit it and save it.",[10,266,268],{"id":267},"step-3-automate-this-process-every-time-you-have-new-code-to-commit","Step 3: Automate this process every time you have new code to commit",[15,270,271],{},"Pre-commit hooks allow us to run a set of commands before the commit is finalized. We will be setting up the pre-commit hook to run Prettier every time we are about to commit. We will be using Husky to achieve this.",[15,273,274],{},"Initialize Husky:",[23,276,278],{"className":25,"code":277,"language":27,"meta":28,"style":28},"npx husky-init\n",[30,279,280],{"__ignoreMap":28},[33,281,282,284],{"class":35,"line":36},[33,283,161],{"class":39},[33,285,286],{"class":43}," husky-init\n",[15,288,289,290,293],{},"You may delete the ",[30,291,292],{},".husky\u002F_"," folder as it is not being used in this example. We are only using the pre-commit feature.",[15,295,296],{},"Update the file below:",[23,298,301],{"className":25,"code":299,"filename":300,"language":27,"meta":28,"style":28},"npm run lint-staged\n",".husky\u002Fpre-commit",[30,302,303],{"__ignoreMap":28},[33,304,305,307,310],{"class":35,"line":36},[33,306,40],{"class":39},[33,308,309],{"class":43}," run",[33,311,312],{"class":43}," lint-staged\n",[15,314,315,316,319,320,322],{},"Now, whenever we run ",[30,317,318],{},"git commit",", all the defined scripts will run before the commit finalizes. You may now proceed to change the format by tweaking the ",[30,321,69],{}," file.",[324,325,326],"style",{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":28,"searchDepth":81,"depth":81,"links":328},[329,330,331,332],{"id":12,"depth":81,"text":13},{"id":20,"depth":81,"text":21},{"id":63,"depth":81,"text":64},{"id":267,"depth":81,"text":268},"Productivity","2025-02-12","Learn how to automate the formatting of your code using Prettier and Husky. This guide walks you through setting up Prettier for consistent code formatting and using Husky to enforce these standards with pre-commit hooks, ensuring a clean and uniform codebase for your team.","md",{},true,"\u002Fblog\u002F2025-02-12-automate-formatting-of-code-with-prettier-and-husky",{"title":5,"description":335},"blog\u002F2025-02-12-automate-formatting-of-code-with-prettier-and-husky","\u002Fimg\u002Fblog\u002Fautomate-formatting-of-code-with-husky-cover.webp","WJiDkYet2zG_xPFsOICyENw466jeXA3XLBw3qAWJQoY",1783650495301]