Formatting your code is a waste of time - use Prettier instead

Prettier helps format our code, and also should help take the argument away from how our code is formatted in the first place so that we don't have to debate about 2 or 4 spaces, semi-colons in our JS, or other things like that.
🔗 Links
✅ Prettier: prettier.io/
⌚ Timestamps
00:00 - Introduction
02:05 - Example of Prettier in action
03:34 - Installing Prettier
04:43 - Configuring it to be your default formatter
05:49 - ESLint + Prettier
06:29 - Configuring Prettier settings globally
08:06 - Configuring Prettier for a single project
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@siraftel7915]

Thanks a LOT. I just finish coding, and boom. This came out. So usefull as allways. Cheers

[@JayWithABeanie]

Thank you for taking the time in your life to create these videos to help us all out. It's especially interesting that you're able to keep bringing out new and interesting content for beginning and experienced web developers

[@amidembio6155]

You should see this video. So relaxing and useful for programmer kzbin.info/www/bejne/naHdhKulr7iif6s

[@mykalimba]

0:28 "...is it two spaces or four spaces for a tab?" The correct answer is "neither", because it's a TAB!

[@MoonLightHAB]

Wow, i was searching up for this topic and your video just popped up in my recommended, nice timing haha.

[@KevinPowell]

Perfect!

[@andreamuro8074]

Thanks for making prettier settings easy. I subscribed based on this video!! I'm excited to see more of your videos! 😁

[@local-admin]

Was just looking for a video by you on this. One of few I go to for css help, thanks for your time Kevin!

[@amidembio6155]

You should see this video. So relaxing and useful for programmer kzbin.info/www/bejne/naHdhKulr7iif6s

[@local-admin]

@@amidembio6155 Beautiful country you have!

[@kaffeetscherl]

A nice feature you can use with the command line is creating git hooks. Configure your formatter locally as you like but as soon as you commit changes, it will be formatted according to the guidelines.

[@amidembio6155]

You should see this video. So relaxing and useful for programmer kzbin.info/www/bejne/naHdhKulr7iif6s

[@kabijoshi5949]

My policy is I subscribe only if, I learn new thing or two when I read the video for a specific query. And I subscribed. Thank you.

[@adrianterencehand]

Fantastic video! When I add up the time spent manually chasing correct formatting, Kevin you might have given me back literal days this year ❤️ not necessarily with regard to the technical detail, rather affirming that it’s *okay* to just let a formatter do it’s thing.

[@tinmancode]

Hehehehe manually chasing down formatting. Why?

[@amidembio6155]

You should see this video. So relaxing and useful for programmer kzbin.info/www/bejne/naHdhKulr7iif6s

[@FreakySohl]

Thank you! This is gonna save me so much time! Keep 'em coming! Love your vids :)

[@amidembio6155]

You should see this video. So relaxing and useful for programmer kzbin.info/www/bejne/naHdhKulr7iif6s

[@Born2DoubleUp]

I'm here! 😎 Great video, just posting a comment to show some support! Keep up the good work. 🤙

[@Ana_Alien]

Although I don't speak English very well, I can understand you because of your great way of explaining

[@ssj1260]

"Although I don't speak English very well" he writes in perfect English with amazing grammar.

[@rohanhazari4642]

@@ssj1260 well he did say "speak" not write

[@elpolodiablo5486]

@@ssj1260 I think he used Google to translate from his native language to English. He forgot to translate his username though.

[@Ana_Alien]

@@ssj1260 The answer is: Google Translate

[@xavierkmuneku]

This is why I rate your channel Kevin, you always bring topics that many overlook... Keep it up!

[@amidembio6155]

You should see this video. So relaxing and useful for programmer kzbin.info/www/bejne/naHdhKulr7iif6s

[@ashleyhoward14]

I love that you slowed down while saying "front end friends" just to make sure we understood 😂

[@nivoset]

Always laugh and think of the pettier package. That just keeps changing prettier settings randomly.

[@youknowme313]

Do off your auto safe 👍

[@amidembio6155]

You should see this video. So relaxing and useful for programmer kzbin.info/www/bejne/naHdhKulr7iif6s

[@darz_k.]

@@amidembio6155 Not nice to spam other channels Brother.

[@schizoidman9459]

Me again. This is a huge help. I do agree that formatting code is a loss of time. Unfortunately this is not available for other languages. In Java this would be very complicated because of Javadoc, but Eclipse already has some automatic standard formatting, which helps a lot. By the way, it would be nice if Javadoc would be formatted as we see the code on the IDE (Eclipse), instead of needing to hover over with the mouse. Javadoc kind of obfuscates the code. It looks like that you have not only excellent communication skills but also a lot of practice in programming and teaching (I knew!!!). I don't know if it is also because your English is Canadian that it makes it sound better. But I believe one can barely notice any Canadian spelling of yours except for the pronunciation of "out" as in "about". Most Canadians are easily recognized in this spelling. 👍

[@mr0big]

If you happen to work in a team make sure you either use the same auto-formatter with the same setting across the whole team, or nobody should use anything at all. if you try live in between then you will encounter a ton of conflicts on every merge. Using a lazy autoformatter that only changes the lines you actually touched might work as well.

[@folkrav]

Enforcing code quality tools as a CI step is a must in growing teams. First thing we do in all projects is setup eslint, prettier, and a basic testing config.

[@amidembio6155]

You should see this video. So relaxing and useful for programmer kzbin.info/www/bejne/naHdhKulr7iif6s

[@seqidurrrrrr]

I've moved away from prettier-eslint by combining eslint-plugin-prettier and eslint-config-prettier. This perfectly combines the two, letting prettier take over all formatting linting using your config, and doesn't require more plugins to use.

[@amidembio6155]

You should see this video. So relaxing and useful for programmer kzbin.info/www/bejne/naHdhKulr7iif6s

[@somdhen]

Very much informative and this tutorial helps a lot. Thanks very much !

[@utkarshadlakha8973]

Looking for this for a while thanks for this

[@reflectionethio9662]

Thank you Kevin , for what you are doing

[@kashgarinn]

This just makes me realize that formatting should be interpreted when you open the file, not when you write or save it. i.e. there should be no need for a global corporate formatting system because you should be able to choose your formatting individually, and that formatting is set when you open/save the file

[@12Tsurugi]

Does such a tool exist?

[@JakobBjerrePetersen]

And how would that work when you're merging stuff that your coworker did (that is formatted totally wrong, according to your local formatting style guide lines)? Your coworker creates a block of code that you need to edit a bit, then it's entirely reformatted, and you have now touched every single line of code. Goodbye GIT blame.

[@cleecoloma]

This was very helpful. Thanks Kevin!

[@yukiteru9099]

Thank you Kevin, you really helped me a lot!

[@angelocina5914]

thks mate for your video! I can suggest you to remember to unflag option in Prettier "Require Config", because in some case when you install Prettier first time this is flagged and Prettier doesn't work without a configuration file in the root of project. i hope this is helpful.

[@soheil6180]

Hitting the bell on your channel is the best decision I've made on KZbin

[@mustafamuse2904]

Thank you Kevin Powell the king of css.

[@djmtype]

Please consider doing a stylelint tutorial in conjunction with prettier. There doesn't seem to be any current videos covering this topic.

[@DexterMorgan]

Nothing like taking code from your co-workers and completely changing the formatting to your own because screw you Greg for leaving me with the bar tab.

[@oliver139]

Nice video! Any chance you will talk about StyleLint as well?😃

[@adithmanu3715]

Hi Kevin, I am not a fan of CSS but, your videos inspire me to use it. My question is: Is material UI a good choice when styling in React-based frameworks

[@tinmancode]

Is white a good paint for cars? Is range rover a good choice for asphalt based roads, Why. Pick it cos you want to learn it, or you like it or you are exploring. The time of your project is also a good point to consider. If you really have to pick one then you need something to compare them against. Like how long will it take to learn that framework vs the time to deliver if the work has a deadline. Do you need pre built components that are already built to speed up your development. Or do you have a custom interface created by a designer for you which means you have to write extra code to make the material ui look like the design you were giving. Do you have custom behaviors needs for your elements and are most supported by the library you pick. Tab indexing and other accessible web requirements. You don't want your org to fail ADA compliance

[@tinmancode]

Your requirements should influence what you choose. Other just pick a random ui library every new project and as well a random js framework too

[@amidembio6155]

You should see this video. So relaxing and useful for programmer kzbin.info/www/bejne/naHdhKulr7iif6s

[@felipeinfantinom]

Hi, nice video. I watch a lot of your videos. Couldn't seem to find any about Tailwind CSS, would you maybe consider making a video about it?

[@smarter_in_5_mins]

Thanks for info. Do you have a video about tools you are using? I have not found any.

[@amniar8158]

thankyou so much man have a great day

[@johnledger4230]

Hi, I have watched a lot of your CSS videos and found many ot them very useful. However prettier, and other code formatters I have looked at do not seem to be able to be configured to the very strict way I write my code and have done for many years If there is a config option for prettier that does this then I would be glad to learn it. I do essentially Allman style code formatting in all languages, where opening braces and parentheses appear on a line by themselves and align verically with the matchung closing brace/parenthesis. The exception is where all the enclosed code can fit comfortably on one line. Also the indented code is indented by 1 tab, and not a number of spaces. I know this is controversial but I would like to know if any formatter can be configured this way. I got VSC to nearly do it right once but have not tried recently

[@amidembio6155]

You should see this video. So relaxing and useful for programmer kzbin.info/www/bejne/naHdhKulr7iif6s

[@elkcityhazard]

didn't think there was much to say about prettier but if Kevin Powell has a video about it then I'm definitely going to find out what I don't know.

[@savankumar0]

Back to back videos nice 😀 ❤️

[@doyourworkout5608]

Thanks for showing this extension

[@preetsojitra2650]

Heyy Kevin, which vs code theme do you use?

[@faridguelmi7123]

00:45 to 01:00 that's the SOLUTION to this idiocy. Hats off Kevin

[@machperiod6784]

Hoping you will soon upload a video describing actual website webpage layout formatting as I'm having difficulty in arranging layouts how to put things in a right place so that it could make the actual webpage

[@tinmancode]

You'd probably need start with a design on paper or figma or xd and then try identifying the parts of the design like anatomy of a organism and the try to write your code that way. Create code or html elements for the big organs first like where does the navbar go. The aside. Your headings and body. Little stuff and have fun

[@michaelfaith]

I love prettier. It's great, and coupled with eslint is a great combination for improved code quality

[@tinmancode]

How did you get them to cooperate. I have a colleague who is struggling with the two cos they don't play nice and Eslint is in the build process so the code just breaks on some of prettier formating randomly. Eslint throws a spoilt fit randomly

[@michaelfaith]

@@tinmancode Kevin mentions it briefly, there's a third library called eslint-config-prettier, which turns off the eslint rules that conflict with prettier's formatting rules. If you don't add that, then yeah they do tend to battle each other on certain things. Add that library and they work really well together. We have three package.json scripts in our setup. "format" is for developers to use locally before committing and it runs prettier with the --write flag. "format:check" is for the build pipeline, and runs the prettier validation without write. And then "lint" is for local and build pipeline, and runs the eslint check.

[@amidembio6155]

You should see this video. So relaxing and useful for programmer kzbin.info/www/bejne/naHdhKulr7iif6s

[@sonarsphere]

Thank you Kevin!

[@bushigi5913]

Thank you Kevin for bringing this beginner friendly topic which probably most of the senior developers won't even mention.

[@Shulkerkiste]

For me, formatting code is one of the easiest things in programming. I always write perfect formatted code directly. I often see programmers who don't care about good formatting which is really awkward for me ^^

[@faridguelmi7123]

Why format yourself when you have ton of formatters (if you're using VScode like everyone today)

[@Shulkerkiste]

@@faridguelmi7123 Well, I don't format as an extra step but my code is formatted after typing it.

[@faridguelmi7123]

@@Shulkerkiste that's what I'm talking about

[@Shulkerkiste]

​@@faridguelmi7123 Then I don't understand your suggestion. I'm just typing for example: selector { width: 42px; } instead of selector{ width:1337px;} I'm using the JetBrains IDEs. Maybe it is easier and faster to write formatted code with these IDEs. I'm not using VSC so I don't know.

[@faridguelmi7123]

@@Shulkerkiste I thought you're doing the formatting yourself. That's why I suggested you use a formatter

[@AChannelFrom2006]

I remember losing some marks on an assignment at uni because of my formatting. I have always been a 2 spaces person. Something that I don't like is tabbed code.

[@junsu-ho]

I found that box-shadow is annoying in Prettier, I like to have each on separate line, prettier clumps everything together ... that's not readable, anyone knows how to fix it?

[@zackpyle496]

Love Prettier! But I was just thinking the other day, how cool would it be if Prettier would also reorder your css properties?!

[@dimofamo]

This! I'm quite consistent with indents but speaking about properties order I'm a mess 😭

[@shanejeremich4681]

How come when you save your HTML file with Prettier, it auto formats your code where I/ see the image element does not have the forward slash in the self-closing tag? Every time I save with Prettier, it always adds an unnecessary slash. Is there a setting or something I'm overlooking?

[@hectorcast943]

Hey am about to start my internship about front end development, I know the basic, but didn’t wanna do web development, any tips to give me so I can easily complete projects?

[@graaam101]

It bugs me that the HTML in the first example is missing closing `` on each line...lol

[@perkin524]

I am unable to make Prettier work for html docs with a php extension - despite trying to install the Prettier php extension. Could you make a quick video showing how to do that?

[@dr8868]

This was great explanation.

[@dasunguy]

"Poorly formatted *code* was the bane of my existence. ... just trying to read like a string of *CSS* ... their *HTML* nesting ..." Oh, you!

[@Davyyd1]

is there a way to space between line of code

[@cobain200]

I hope you guys can help me! How can i write a line of Html Code that should be ignored by prettier. For example i have two paragraphs next to each other as CSS -Inline-Block lorem lorem and i want them to stay like this.....Prettier puts them one under the other. Please help.

[@Codewow]

Considering all of my projects have been solo projects... my formatting is literally whatever the hell I feel like in the moment... so yeah. Never look at my code if you get angry hahaha. I use a prettifier plugin to help clean it up, but it also causes some problems.. so I can't use it often.

[@KevinPowell]

You can configure it to ignore certain file types. I've had to do that because it plays hell with a few, lol.

[@952a259]

Thanks a lot! 👍

[@vitamax3777]

prettier extension is configured as a formatter but cannot format the file 😥there was a problem in sass file after installing the prettier. Somebody know why?

[@ashikmahmud4076]

I have used Beautify formatter since almost 2 yr. Yesterday I was trying to switch into prettier formatter but I can't some reason of issues. As like can't format HTML file in my case. I tried more and more for staying prettier but I can't stayed Eventually, I switched back in Beautify formatter 😔

[@somnvm37]

thb this plugin lacks costamisaion. It doesn't allow me to make as much spaces as I want (if I want to allign all the comments) and many other things

[@senior_developer]

How to do that with Styled-Components?

[@t20miguelvillarica33]

Your vids are great!!

[@JimKernix]

An unrelated question involving VS Coe: Anyone have their color picker stop working? Mine has and I don't know how to get it back. Any suggestions?

[@yogiealfin3679]

Why your img tag not formated with self closing tag like /> my prettier format it with self closing tag

[@aryan7069_]

Prettier is great but only one thing i dont like... In my react jsx code on formatting prettier adds {" "} on starting and end of word inside html element.

[@yves5960]

Does this work for Laravel blade files?

[@theasianviking86]

As much as I did love pretty.. it made my life hard when I added certain plugins that also formated my other style of code (example Scss) and because of that I rather go with only SASS formater and use VScode built-in formater

[@LuBre]

Doesn't "remove semicolons" add a risk of breaking everything, as soon as you minify your js file?

[@choudharykeshav691]

Can someone please tell theme name

[@tinmancode]

I have a colleague that has prettier and Eslint. Even Rússia and usa get along better than those two extensions. And the code breaks because Eslint is hooked into the build and there are some prettier formatting it hates. Working on that code base is miserable. I would rather code in binary with a pencil and paper

[@farzamqureshi1389]

How to use it for php?

[@yourregularguy4377]

What if there are missing tags? Does it replace them?

[@KevinPowell]

Don't think so, no. Specially since it's hard to say what tag is actually missing at times depending on how things are nested, and also, as a lot of elements have optional closing tags, like paragraphs, list items, and a few others... I could be wrong on that though, I haven't tested it out specifically.

[@SophieExMachina]

I don't like Prettier because it enforces certain code style rules like collapsing statements to one line in JavaScript.. Or not letting you break objects and arrays into multiple lines unless it exceeds the max-width you set on your lines. I really prefer having objects and arrays into multiple lines because it makes it so much easier to edit them. Additionally, it also has benefits in Git because Git picks up the changes in an array or object better that way because you only removed or added a few lines rather than editing the array/object on one line. Because of this I don't use Prettier anymore and prefer letting ESLint handle it all.

[@busyrand]

Thanks for providing your personal solution. I'm working on a project an I miss Prettier, but I remember the things you said about it handling JavaScript and PHP so I've been hesitant to grab and Install it.

[@Naej7]

Same here, their « put the maximum amount of characters possible in one line » policy is dumb, and makes your code and html inconsistent

[@amidembio6155]

You should see this video. So relaxing and useful for programmer kzbin.info/www/bejne/naHdhKulr7iif6s

[@ahndeux]

I find Prettier to be frustrating to work with on HTML files. Its great for CSS, JS and other code, but it can be a struggle with HTML. It tends to randomly not work and its not easy to figure out why. Simply putting a span inside a div can break the code and it won't format when saved.

[@tinmancode]

You probably want to check if you have a syntax error. If you use vscode then look at the bottom right. When prettier stop formatting. It will have a warning triangle. Click it and it will point out what's missing. It's not much help when html elements are missing are more than is needed. But the presence of the triangle should prompt you that your hl has issue. In that case first indent all the lines using the indent shortcut then start folding blocks of html one chunk at a time. Just do that carefully and you'll find the problem tag

[@tinmancode]

Debugging is an art and skill sometimes. And always look at the error messages in your editor. I've realized a ton of my bugs are syntax related when the code stops working completely. I check syntax before logic errors except if the code runs

[@Peter-wx9qg]

I'm not getting any options for prettier when searched under settings.

[@brokenMikrophone]

Thanks

[@majkipl9684]

im doing automaticly what's that program do

[@adrian20065]

I like using prettier for css and js. But I disabled it because I don't like the way it format html file. I would use it if I can disable it from not formatting html. Thanks Kevin.

[@TokyoXtreme]

You can easily set up HTML to be ignored by Prettier.

[@a.galvaop.787]

Installing right now. D:

[@logicalfundy]

Tried Prettier, but it misunderstood a bunch of my Typescript code and just messed it up. It's a bit *too* opinionated. Happier with just ESLint. The point should not really be to "take decisions away" - but to provide a reasonable baseline.

[@nishantkumar6960]

Thank You

[@hcgreier6037]

Might by hair splitting, but the title of the video is a little bit confusing. Formatting code is not a waste of time, it's just a waste of time doing it by HAND 😎 Like your videos very much!

[@pranjalroy6396]

Hi Kevin! How are you doing?

[@KevinPowell]

I'm doing great, thanks for asking :D

[@amniar8158]

never give up

[@ghiffaralfinfaiz5989]

thank you

[@castlemoyle]

Prettier is the one Code add-on that I've NEVER been able to successfully been able to install and have work right. I was so hopeful when I saw this video. But no luck for me. After following your video step by step, I still have ugly code. So sad.

[@djmtype]

Any way to prevent prettier from breaking up minmax values? It puts every number following a comma on its own line - yuk!

[@malcolmdsouza6663]

Plz make setup tour

[@stevenwilson5556]

Prettier out of the box puts /> at the end of a lot of HEADER tags when you save the HTML file, which breaks WC3 validation. It's not obvious how to turn this "feature" off.

[@stevenwilson5556]

OK, went through to prettier and dug through this on a message board, it cannot be changed. There's a long discussion on pros and cons and such, but if you use prettier, you cannot get your HTML file validated on the W3C validator as it will choke on the self-closing meta header tags by default

[@yogiealfin3679]

But on the video img tag not using /> after format, any clue how to do that?

[@stockholm12]

@@yogiealfin3679 I'm wondering about that too. If anyone has a solution please let us know.

[@f1am3d]

I just don't like how few formatting options Prettier has. And I don't like how it's uglifying my code. So I'm using ESLint instead.

[@BenRangel]

I dislike Prettier for CSS cause it's not configurable enough. printWidth: 80 is fine as a general rule but I don't want it line breaking in the middle of a selector. When I have 3 comma separated selectors I want 3 lines of code. Even if one selector is too wide I don't wanna see it broken up into 2 lines of code. Consider this: article section header h1, article section aside header h1, aside h1 { color:red; } The second selector contains a line break. Makes it hard to read because it's 3 selectors so you expect 3 lines. Not 4 lines. Sure I could increase the printWidth but then long background gradients I intentionally split up into multiple lines will be re formatted into a single line. And I don't wanna sprinkle my code with ignore comments. I wanna config by rule. lineBreakSelectors: false, lineBreakPropertyValues: true But you can't do that.

[@Knards]

Semicolons? Yes!

[@leenardgalad5448]

Yup its difficult to format a long code copied from stackoverflow

[@bigcitycode6079]

front end friends!☺

[@user-sn1di3gj7w]

Prettier is designed to eliminate bike shedding about style formatting. If you don't have this problem there are more configurable options out there. Opinions are often wrong, and while prettier is "standard" and "consistent" is is neither intelligent nor meaningful in many contexts. It can actually pollute code that would otherwise be easy to read, and can result in inconsistent patterns. I can think of a lot of contexts where prettier helps: React code being one of them. But there are other code patterns that are better suited to formatting by eslint extensions or similar configurable formatters. My experience is that prettier causes friction when not being used for its intended purpose: to eliminate debate. If your code team members are mature and can comport themselves effectively, there is often no need to introduce the "prettier layer" - and often a liberal exclusion in .prettierignore is more effective at keeping velocity than having prettier in your pipeline. Yes, this is also an opinion - but one you will see disallowed in any prettier moderated forum as such debate is excluded by definition. For this reason, prettier is a bike shedding about bike shedding, IMHO.

[@faridguelmi7123]

prettier doesn't work with php on my machine

[@YannMetalhead]

Good video.

[@danel1922]

its 4 spaces! everything else is crazy

[@garymaclaren7191]

Installed. Didn't work.