{"tag":{"followersCount":3376,"id":"592d689fa6614cba3f738146","logo":"https://res.cloudinary.com/hashnode/image/upload/v1496483511/fdbnmvy2bkecx03csbom.png","name":"Prettier","postsCount":76,"slug":"prettier","tagline":"Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.","info":{"html":"

Prettier is an opinionated JavaScript formatter inspired by refmt with advanced support for language features from ES2017, JSX, and Flow. It removes all original styling* and ensures that all outputted JavaScript conforms to a consistent style. (See this blog post). GitHub

\n","__typename":"Content"},"trending":{"edges":[{"node":{"id":"60909ac5150acd02607141c6","_id":"60909ac5150acd02607141c6","coverImage":{"isPortrait":false,"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1619612287052/-mOMZcjWa.png","__typename":"PostCoverImage"},"slug":"nextjs-eslint-prettier-husky","readTime":10,"replyCount":3,"responseCount":4,"brief":"Introduction\nSticking to a consistent style guide is something that we all love doing as programmers. Whether it's spaces instead of tabs, double quotes instead of single, or putting your {'s on a new line (if you are a savage). \nSometimes, however, ...","subtitle":"Learn how to utilize TypeScript, ESLint, Prettier, Husky & VS Code to style a Next.JS Project using Google's TypeScript Style Guide.","isFeatured":true,"contributors":[{"_id":"576931c5ce293c3093220ac1","name":"Pankaj Patel","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1629992191819/A7Rvs9DqK.png","username":"pankajpatel","__typename":"User"},{"_id":"601c66cf1054fa16dadd6a61","name":"Obayuwana Paul","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1612474171153/j1-OiKpBl.jpeg","username":"Pauxiel","__typename":"User"},{"_id":"6096c14021068818a5c61623","name":"Mario","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1620492609219/iVEkVeItu.png","username":"mariobm","__typename":"User"},{"_id":"61b4f304b055806a4b00e3bc","name":"Umut Tufanoglu","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1639248644879/i7wW8huPM.jpeg","username":"utdevelopment","__typename":"User"}],"bookmarked":false,"views":28358,"url":"https://jarrodwatts.hashnode.net/nextjs-eslint-prettier-husky","totalReactions":105,"title":"How To Style Your Next.JS Projects EXACTLY Like Google (in TypeScript)","dateAdded":"2021-05-04T00:52:21.721Z","cuid":"cko9bhf4l00xfgws1dvyy69wc","preferences":{"disableComments":false,"__typename":"PostPreferences"},"__typename":"Post","author":{"_id":"6024dd894d9e7d4dd727df79","name":"Jarrod Watts","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1654398119830/DdanKTcxg.png","isPro":false,"username":"JarrodWatts","__typename":"User"},"series":null,"tags":[{"_id":"584879f0c0aaf085e2012086","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1651122498709/FQjch0sgd.png","name":"Next.js","slug":"nextjs","__typename":"Tag"},{"_id":"56744721958ef13879b94cad","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1607082785538/EryuLRriM.png","name":"JavaScript","slug":"javascript","__typename":"Tag"},{"_id":"56744723958ef13879b954e0","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1607081795383/tEjUv8e8s.png","name":"TypeScript","slug":"typescript","__typename":"Tag"},{"_id":"570f716a115103c3b0978698","logo":null,"name":"eslint","slug":"eslint","__typename":"Tag"},{"_id":"592d689fa6614cba3f738146","logo":"https://res.cloudinary.com/hashnode/image/upload/v1496483511/fdbnmvy2bkecx03csbom.png","name":"Prettier","slug":"prettier","__typename":"Tag"}],"publication":{"_id":"6024dda68a18494dfcecbf44","url":"https://jarrodwatts.hashnode.net","canonicalURL":"https://jarrodwatts.hashnode.net","title":"Jarrod Watts","displayTitle":"Jarrod Watts' Blog","isHeadless":false,"favicon":null,"headerColor":"#ffffff","metaTags":"\n\n","isTeam":true,"domainInfo":{"hashnodeSubdomain":"jarrodwatts","domain":{"host":"blog.jarrodwatts.com","ready":true,"__typename":"DomainStatus"},"__typename":"DomainInfo"},"urlPattern":"SIMPLE","__typename":"Publication"},"comments":{"edges":[{"node":{"id":"6094f396d1bbc47b91a67fc9","author":{"_id":"576931c5ce293c3093220ac1","name":"Pankaj Patel","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1629992191819/A7Rvs9DqK.png","isPro":false,"username":"pankajpatel","__typename":"User"},"content":{"html":"

Great article Jarrod, the pre-commit script looks really good.

Though I would also suggest to checkout lint-staged package.

Husky+LintStaged will allow you to configure commit hooks right from package.json

Keep up the good writing.

\n","markdown":"Great article Jarrod, the pre-commit script looks really good.\n\nThough I would also suggest to checkout [lint-staged](https://www.npmjs.com/package/lint-staged/) package.\n\nHusky+LintStaged will allow you to configure commit hooks right from package.json\n\nKeep up the good writing.","text":"Great article Jarrod, the pre-commit script looks really good.\nThough I would also suggest to checkout lint-staged package.\nHusky+LintStaged will allow you to configure commit hooks right from package.json\nKeep up the good writing.\n","__typename":"Content"},"dateAdded":"2021-05-07T08:00:22.559Z","stamp":"ckoe13eal0fkqeps14dly3zh4","totalReactions":2,"__typename":"Comment"},"__typename":"PostCommentEdge"}],"pageInfo":{"hasNextPage":true,"endCursor":"MQ==","__typename":"PageInfo"},"__typename":"PostCommentConnection"}},"__typename":"PostEdge"},{"node":{"id":"621b746d085330c3f79c2f26","_id":"621b746d085330c3f79c2f26","coverImage":{"isPortrait":false,"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1645965586101/f9tZgtt-T.png","__typename":"PostCoverImage"},"slug":"onlyformats","readTime":3,"replyCount":3,"responseCount":3,"brief":"Hey everybody!\nI saw the Netlify x Hashnode Hackathon and I was very very excited to participate this time. It was quite hard to think about an idea but I finally got one!\nStory\nThis time building an app was a weird and funny experience at the same t...","subtitle":"","isFeatured":false,"contributors":[{"_id":"5ebd7a2dacf8911d7951ed40","name":"Victoria Lo","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1672984921463/25B4G5fCJ.jpg","username":"victoria","__typename":"User"},{"_id":"5ff9950caa5c467fe15584f5","name":"Muhammad Awais","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1610192141204/ycAkauJTN.png","username":"muhammadawaisshaikh","__typename":"User"},{"_id":"600ffaa89d3cb25c41e0b37d","name":"Faheem Khan","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1621684448069/hSip2JQWK.jpeg","username":"FaheemKhancodes","__typename":"User"}],"bookmarked":false,"views":3622,"url":"https://usman2102.hashnode.net/onlyformats","totalReactions":70,"title":"🎉 Introducing Only Formats | The quickest way to format code!","dateAdded":"2022-02-27T12:54:05.568Z","cuid":"cl059x9n309kmudnv4d6ccbjj","preferences":{"disableComments":false,"__typename":"PostPreferences"},"__typename":"Post","author":{"_id":"5f3ca7269584ef298dc172e4","name":"Usman Sabuwala","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1627648591642/VKg_lEi1D.jpeg","isPro":false,"username":"usmanwrites","__typename":"User"},"series":null,"tags":[{"_id":"57ce27e495368c463b098050","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1643738530485/hefsQTBQs.jpeg","name":"Netlify","slug":"netlify","__typename":"Tag"},{"_id":"61f964df43e34d1181694f7a","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1643738501865/gwhdRR_jN.jpeg","name":"NetlifyHackathon","slug":"netlifyhackathon","__typename":"Tag"},{"_id":"56744723958ef13879b95434","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1513321478077/ByCWNxZMf.png","name":"React","slug":"reactjs","__typename":"Tag"},{"_id":"592d689fa6614cba3f738146","logo":"https://res.cloudinary.com/hashnode/image/upload/v1496483511/fdbnmvy2bkecx03csbom.png","name":"Prettier","slug":"prettier","__typename":"Tag"},{"_id":"5f058ab0c9763d47e2d2eedc","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1607082937737/ze6cYRSZ_.png","name":"2Articles1Week","slug":"2articles1week","__typename":"Tag"}],"publication":{"_id":"5f3ca8cc2324e0296c44f6ac","url":"https://usman2102.hashnode.net","canonicalURL":"https://usman2102.hashnode.net","title":"Usman Writes","displayTitle":null,"isHeadless":false,"favicon":"https://cdn.hashnode.com/res/hashnode/image/upload/v1668171082356/Jk5Up9IbF.jpg","headerColor":"","metaTags":"\n\n\n","isTeam":true,"domainInfo":{"hashnodeSubdomain":"usman2102","domain":{"host":"blog.usmans.me","ready":true,"__typename":"DomainStatus"},"__typename":"DomainInfo"},"urlPattern":"SIMPLE","__typename":"Publication"},"comments":{"edges":[{"node":{"id":"621c2482085330c3f79c41f2","author":{"_id":"600ffaa89d3cb25c41e0b37d","name":"Faheem Khan","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1621684448069/hSip2JQWK.jpeg","isPro":false,"username":"FaheemKhancodes","__typename":"User"},"content":{"html":"

A useful product indeed.\nYou're winning bro 🚀

\n","markdown":"A useful product indeed.\nYou're winning bro 🚀","text":"A useful product indeed.\nYou're winning bro 🚀\n","__typename":"Content"},"dateAdded":"2022-02-28T01:25:22.327Z","stamp":"cl060rf2u0carudnv1rkf98b1","totalReactions":3,"__typename":"Comment"},"__typename":"PostCommentEdge"}],"pageInfo":{"hasNextPage":true,"endCursor":"MQ==","__typename":"PageInfo"},"__typename":"PostCommentConnection"}},"__typename":"PostEdge"},{"node":{"id":"6306146379f56556d0cb7404","_id":"6306146379f56556d0cb7404","coverImage":{"isPortrait":false,"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1657211105436/8tcRDXcql.jpg","__typename":"PostCoverImage"},"slug":"setting-up-efficient-workflows-with-eslint-prettier-and-husky","readTime":6,"replyCount":0,"responseCount":2,"brief":"Linting and pretty-printing JavaScript code can help in detecting errors earlier, making code more legible, and improving overall code quality. However, there may be some friction when using a formatter for pretty-printing and a linter.\nIn this artic...","subtitle":"Learn how to use ESLint Prettier and Husky for code analysis, formatting and automation | a step by step guide","isFeatured":true,"contributors":[{"_id":"5f46a01aa639932bd830f982","name":"Andrew Baisden","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1671044451262/Quo5x4UFy.png","username":"andrewbaisden","__typename":"User"},{"_id":"62a09de4735319718350b66c","name":"Jenn Penington","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1654693350385/TBw7Vki55.png","username":"jenpenn","__typename":"User"}],"bookmarked":false,"views":1184,"url":"https://avocadev.hashnode.net/setting-up-efficient-workflows-with-eslint-prettier-and-husky","totalReactions":60,"title":"Setting up efficient workflows with ESLint, Prettier and Husky","dateAdded":"2022-08-24T12:06:59.518Z","cuid":"cl77kmbu6002h36nv0h12e0db","preferences":{"disableComments":false,"__typename":"PostPreferences"},"__typename":"Post","author":{"_id":"6287910789168247f55ef188","name":"Developer Avocado","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1653062053832/UfKhDefoy.jpg","isPro":false,"username":"AvocaDEV","__typename":"User"},"series":null,"tags":[{"_id":"570f716a115103c3b0978698","logo":null,"name":"eslint","slug":"eslint","__typename":"Tag"},{"_id":"62add4d60924134a80487aaa","logo":null,"name":"husky","slug":"husky","__typename":"Tag"},{"_id":"56744722958ef13879b94f1b","logo":"https://res.cloudinary.com/hashnode/image/upload/v1450469658/vdxecajl3uwbprclsctm.jpg","name":"Web Development","slug":"web-development","__typename":"Tag"},{"_id":"56744723958ef13879b955a9","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1607083054200/qEk2BI11Dk.png","name":"Beginner Developers","slug":"beginners","__typename":"Tag"},{"_id":"592d689fa6614cba3f738146","logo":"https://res.cloudinary.com/hashnode/image/upload/v1496483511/fdbnmvy2bkecx03csbom.png","name":"Prettier","slug":"prettier","__typename":"Tag"}],"publication":{"_id":"6287912d8fb776481a2852f2","url":"https://avocadev.hashnode.net","canonicalURL":"https://avocadev.hashnode.net","title":"Developer Avocado Blog","displayTitle":null,"isHeadless":false,"favicon":"https://cdn.hashnode.com/res/hashnode/image/upload/v1665313410944/pmpuet5ma.png","headerColor":"","metaTags":null,"isTeam":true,"domainInfo":{"hashnodeSubdomain":"avocadev","domain":null,"__typename":"DomainInfo"},"urlPattern":"SIMPLE","__typename":"Publication"},"comments":{"edges":[{"node":{"id":"6306280ed69cbd5671587a1e","author":{"_id":"62a09de4735319718350b66c","name":"Jenn Penington","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1654693350385/TBw7Vki55.png","isPro":false,"username":"jenpenn","__typename":"User"},"content":{"html":"

Great tutorial!

\n","markdown":"Great tutorial!","text":"Great tutorial!\n","__typename":"Content"},"dateAdded":"2022-08-24T13:30:54.597Z","stamp":"cl77nm8sj00pf0jnv6n776zub","totalReactions":0,"__typename":"Comment"},"__typename":"PostCommentEdge"}],"pageInfo":{"hasNextPage":true,"endCursor":"MQ==","__typename":"PageInfo"},"__typename":"PostCommentConnection"}},"__typename":"PostEdge"}],"__typename":"FeedPostConnection"},"__typename":"Tag"}}

How To Style Your Next.JS Projects EXACTLY Like Google (in TypeScript)

🎉 Introducing Only Formats | The quickest way to format code!

Setting up efficient workflows with ESLint, Prettier and Husky

Mastering Code Formatting with Prettier in Next.js TypeScript Projects

Setting up ESLint in a Next.js TypeScript Project: Improving Code Quality and Consistency

Setting up Prettier and Husky for Automatic Code Formatting

5 VS Code Extensions to Write Better Code

Make Your Code Shine with Prettier Extension for VS Code

Top 5 reasons you need to start using prettier as a Front-End Developer in 2023

How To Setup Prettier Formatter

Steps on how to Implement Pre-commit and Pre-push (Husky, Lint-Staged, StyleLint, Pretty-Quick) into a React.js Project

React Native ESlint & Prettier for Expo and CLI with trivago prettier for import sorting. Update: TypeScript Support

Using Husky Pre-commit git hook with prettier