How to use Prettier in VS Code - Code Formatting

In this video I will show you how to install and configure Prettier Code Formatter in VS Code. Formatting code consistently can be a challenge, particularly when working on a team. Code formatters like prettier can help solve this issue. Consistent code formatting helps with the readability of a project.
Learn how to setup VS Code to format code whenever a file is saved or code is pasted into VS Code.
Learn how to configure Prettier using a JSON configuration file .prettierrc
Learn the difference between VS Code user settings and VS Code workspace settings.
If you are having trouble getting prettier to work uninstall Prettier Code Formatter extension and follow this video.
Prettier Configuration
prettier.io/do...
Prettier Settings Options
prettier.io/do...
Prettier extension
marketplace.vi...

[@pubgm7262]

Bro thank you very much. I searched for this solution everywhere but I didn't find. This video really helped me. Now my prettier is working.

[@CodingWithAdam]

You’re welcome! I’m glad the tutorial was helpful! 😁

[@user-xj2mt1rp2v]

Although English is not my first language, I found this tutorial so easy to understand thanks to your excellent and clear explanation! Impressed and subscribed 🤗

[@CodingWithAdam]

Thank you! I’m really happy the video was easy to follow! 😁

[@MrNams]

"IndentPPDirectives:BeforeHash" is not working, i use too much preprocessing directive and it literally annoying @@CodingWithAdam

[@soumitralahiri6328]

Just what I was looking for to resolve my code formatting issue. Thanks Adam!

[@CodingWithAdam]

You’re welcome! really glad the tutorial helped!

[@Varyeth]

presh helped me a lot since im just starting to learn and it takes sooooooo much effort to just press shift lol

[@CodingWithAdam]

Glad the video helped!

[@sandeepnandanwar5240]

now i understant how automatic formatiing the code thanks very much

[@CodingWithAdam]

You’re welcome! Glad the tutorial was helpful! 😁

[@narekmusakhanyan523]

Clear explanation. Thank you

[@CodingWithAdam]

Thank you. You’re welcome!

[@fighter8931]

wow ,
I didn't know that prettier is so nice before watching this video
thanks for the nice video

[@CodingWithAdam]

You’re welcome! Glad you enjoyed the video.

[@kirankumarsukumar]

Explained perfectly.

[@CodingWithAdam]

Thank you!

[@ravimakwana992]

Thanks for the tutorial!

[@CodingWithAdam]

You’re welcome!

[@cjcro6456]

Nice job with explaining bud. Was very easy to understand.

[@CodingWithAdam]

Thank you! Glad you enjoyed the tutorial!

[@erickchavez4551]

Amazing video. This has saved me lots of time trying to keep my code neat. Thanks!

[@CodingWithAdam]

You’re welcome! I’m really happy you enjoyed the tutorial!

[@BobDenton655]

what button do you press on keyboard , so you activate it after you are done with project ?

[@JohnAshleyMckenzie]

Be carful with the format on save. When you format code that you have not changed and commit it to git it can make it hard to tell what the REAL changes for the commit are. Easy to work around this, just run prettier on the whole code base (WITHOUT ANYT OTHER CHANGES) then check it in. Then running the formatter on save will not obfuscate the real changes in your commits.

[@CodingWithAdam]

Those are great tips! Thanks!

[@mattvalgreen]

Thank you sir. great explanation video 👍

[@CodingWithAdam]

You’re welcome! Glad the tutorial was helpful!

[@entrinsek9230]

LOVE YOUUUUU workspace setting i was stucking on it thank you

[@CodingWithAdam]

You’re welcome! I’m glad the tutorial helped! 😁

[@elcancion]

Yeah dude, this video nailed it, here is a new sub!

[@CodingWithAdam]

Glad the video helped! Thank you for the Sub!

[@alkhiddier9407]

thanks, this video help me and easy to understand

[@CodingWithAdam]

You’re welcome! Glad the video was easy to understand! 😀

[@inescherif5385]

Thank u so much! That was helpful!

[@CodingWithAdam]

You're welcome! Glad the video was helpful.

[@quatron9561]

Thank you for this, I was wondering if I was doing something wrong.

[@CodingWithAdam]

You’re welcome! I’m glad the video helped!

[@achillesus7]

Thanks for the config file and the 'semi' parameter !

[@CodingWithAdam]

You’re welcome!

[@jeffreyhunter4115]

Thank you! Just what I was looking for.

[@CodingWithAdam]

You’re welcome!

[@duyphuongnguyen431]

Thanks man. It helps me too much !!!

[@CodingWithAdam]

You’re welcome! Glad the tutorial helped!

[@isatyamshivam]

Thanks Adam, for to the point explanat. 😀

[@CodingWithAdam]

You’re welcome!

[@masrado3195]

Smooth language and video good job

[@CodingWithAdam]

Thank you!!! Appreciate the feedback!

[@3amnatural]

Thanks
❤

[@CodingWithAdam]

You’re welcome! 😀

[@nickgannon7466]

This is a good thing you've done

[@CodingWithAdam]

Thank you!

[@carlosbracho1304]

Man, you are the best! thank you for this video !

[@CodingWithAdam]

Thank you! I’m glad you enjoyed the video!

[@simpleview1433]

very helpfull video, thanks bro )

[@CodingWithAdam]

You’re welcome!

[@michalroesler]

awesome Tutorial - Thank you Adam.

[@CodingWithAdam]

You’re welcome! 😁

[@robsongrubba]

Thank you very much!

[@CodingWithAdam]

You’re welcome! Glad you enjoyed the video!

[@rhymekidstv]

Very informative. Thank you

[@CodingWithAdam]

Thank you. You’re welcome!

[@tullyendicott6700]

Thanks - very clear.

[@CodingWithAdam]

You’re welcome!

[@sebastianantoniochaviracha4845]

Thank you :)

[@CodingWithAdam]

You’re welcome!!!

[@ahmadkhalil970]

perfect vedio than others

[@CodingWithAdam]

Thank you! 😁

[@JohnGallie]

awesome video, Thanks for taking the time to do this! helped me get my Sh*T together lol...

[@CodingWithAdam]

You’re welcome! I’m so glad the video helped! 😁

[@LcyYoutube]

Thanks a lot! Nice tutorial :)

[@CodingWithAdam]

You’re welcome! Glad you enjoyed the tutorial 😁

[@mouatezbenariba]

Great, informative and on point !

[@CodingWithAdam]

Thank You!

[@gabriel5591]

very usefull bro! Thanks

[@CodingWithAdam]

You’re welcome! Glad the video was useful.

[@ashimghoshfm]

well explained sir. Thank you! Subscribed

[@CodingWithAdam]

You’re welcome! Thank you for subscribing!

[@gfxmentoring]

Informative! Thanks for sharing your great experience.

[@CodingWithAdam]

You’re welcome! Happy you enjoyed the video!

[@patrickhollywood93]

Thanks for sharing your tutorial. :D

[@CodingWithAdam]

You’re welcome!

[@karinapsheny5063]

Thank u! Great description! =)

[@CodingWithAdam]

You’re welcome! Thank you :)

[@juggles5474]

Great video, thanks!

[@CodingWithAdam]

Thank you! You’re welcome!

[@staycalm4957]

Nice and right to the point!
Thanks!

[@CodingWithAdam]

You’re welcome! Glad you liked the video! 😁

[@hastudent738]

thank you very much sir

[@CodingWithAdam]

You’re welcome!!!

[@crowning8691]

Great job! Thanks for help.

[@CodingWithAdam]

Thank you! You're welcome!

[@CieloGotCash]

Nice video man make more coding tutorials u rock👑💯

[@CodingWithAdam]

Thank you! 😁

[@jiazhengliu2137]

Amazing video!

[@CodingWithAdam]

Thank you! 😁

[@araitmai]

Thank you!

[@CodingWithAdam]

You’re welcome!

[@agusalfandi6672]

thanks man, this help full me

[@CodingWithAdam]

You’re welcome!

[@user-gm5vf8iv1i]

Bro thank you very much

[@CodingWithAdam]

You're welcome! Glad the video helped!

[@ashaysaoji2273]

Thanks for the help!

[@CodingWithAdam]

You’re welcome!

[@evgehaplay4912]

Thanks!

[@CodingWithAdam]

You’re welcome!

[@wave.firefreezer8390]

Amazing top video!

[@CodingWithAdam]

Thank you!

[@luiscampos6064]

Very helpful, thanks.

[@CodingWithAdam]

You’re welcome!

[@thechesstrain528]

thanks , it worked for me :)

[@CodingWithAdam]

You're welcome!

[@madeleniflores2990]

Thank you ❤️

[@CodingWithAdam]

You’re welcome! 😀

[@typalogic4454]

Thanks for the video :)

[@CodingWithAdam]

You’re welcome!

[@truongvo920]

thanks🥰

[@CodingWithAdam]

You’re welcome!

[@imrealgigachad]

Thanks man

[@CodingWithAdam]

You’re welcome!

[@nektariis]

Thank you🎉

[@CodingWithAdam]

You’re welcome 😁

[@sefa6636]

thank you man

[@CodingWithAdam]

You’re welcome!

[@schajuli1991]

I installed the plugin but I only have a format with Redhat entry and no prettier ... - am I missing something?

[@schajuli1991]

Actually I can set prettier as a default formatter but then it throws an error that it's not available ....

[@zirakqader3664]

Great one :)

[@CodingWithAdam]

Thank you!

[@johnbonjovi9347]

Good one! Tnx

[@CodingWithAdam]

Thank you! You’re welcome!

[@SilviuIT-tn3dn]

I started to learn with Angela's Yu course. In the begining she was using Atom and had Beautify, that was great, started to be used of that, but...like everyone has to move to VS, i felt without hands. She had a addon list but didn't know how to "activate" prettier. Thx

[@CodingWithAdam]

You’re welcome! The auto formatting is awesome it’s hard to code with out it. Happy the video helped! 😃

[@abdullahsoomro6238]

Thanks alot.

[@CodingWithAdam]

You’re welcome!

any help, when i save (autoformat on save) using prettier, some slashes write themself at the very top where there should be a void, such as the meta info and any other. how can i disable or chagne that so it doesnt do that. thanks in advance

[@CodingWithAdam]

Prettier is an opinionated formatter and there are not many settings. That interesting problem.

[@andranikhambardzumyan6264]

Amazing video

[@CodingWithAdam]

Thank you! 😁

[@mayankgaur_]

I have noticed that the option "format document with" only appear if you have an extra formatter installed..if anyone's wondering why they don't see that option.

[@CodingWithAdam]

Thank you for the extra tip. I must have had a few formatters installed.

[@smurffronda2951]

thanks for this

[@CodingWithAdam]

You’re welcome!

[@dambro71]

Is there a way so it formats without changing any quote?
I mean ' remain '
And " remain "

[@CodingWithAdam]

Not that I’m aware of. Prettier is very opinionated and does not offer to many options. You can always save a file with out formatting from vscode if you don’t want to format a particular file. Here are the options they provide prettier.io/docs/en/options.html

[@nicenavarro1376]

Appreciate it!

[@CodingWithAdam]

You’re welcome!

[@Nouman-Bhai]

My c File code is not formatted...

[@CodingWithAdam]

Unfortunately prettier does not support c files.

[@Nr8k]

Thanks gangy

[@CodingWithAdam]

You’re welcome!

[@Titan0_7]

my prettier adds space and slash to the end of my element,
please what can i do to fix this

[@kiPROBRos]

Thanks for video tutorijal, I'm subscribe, like and share. Bay.

[@CodingWithAdam]

You’re welcome! Thank you for subbing liking and sharing 😁

[@mahtab_sudip]

Thanks

[@CodingWithAdam]

You're Welcome!

[@soyelchicodelanus8471]

thanks!!!

[@CodingWithAdam]

You’re welcome!!!

[@krlwshu]

Thank you.

[@CodingWithAdam]

You’re welcome!

[@ciomio3703]

my code is too narrow and looks vertical, what should i do, thanks for the video

[@CodingWithAdam]

You’re welcome. Prettier has configuration for the length of a line I suggest take a look at printWidth prettier.io/docs/en/options.html

[@SmithnWesson]

Installed prettier but it did not come up in the "Format Document With" menu. Nor was it available as an option when I clicked "Configure Default Formatter".

[@CodingWithAdam]

Restart vs code and then check the extensions tab to see that prettier is installed and enabled

[@SmithnWesson]

Turns out that prettier will not work with Python. Must use a different formatter for Python.

[@CodingWithAdam]

That’s right you need to use one for python. Glad you figured it out

[@lauris5275]

I been learning js for about a year, but this extension never worked on my pc. I don't know why.

[@CodingWithAdam]

Sorry to hear that.

[@rakatoneco]

thxxxxxx very helpfullllll

[@CodingWithAdam]

You’re welcome!

[@egm5081]

thanks man!

[@CodingWithAdam]

You're Welcome!

[@user-gt1oq6kz6o]

Nice Video

[@CodingWithAdam]

Thank you!

[@yuukizin]

bro recently i have been getting some colored boxes whenever i format the code ...its actually at the start of a line of code idk how that happened but i m pretty sure i have my default formatter as prettier .
what exactly happened is that it asked me to configure my formatter out of nowhere i set it to prettier now i m getting wierd colored boxes in the begining of code lines .

[@CodingWithAdam]

Interesting I’m not sure what that is. If I think of anything I’ll let you know.

[@yuukizin]

@@CodingWithAdam thx for the concern, well anyways it was because of indent rainbow extension, i havent installed such ext myself maybe it came as a package with other extension.

[@TheBlackmanIsGod]

I can’t even make a js file!!😢😢😢 why it’s your file showing a path to the file like mine is??? What am I doing wrong, what don’t I know that I don’t know???
I don’t see “code formatting” on my left window, all I have is “open editors” and “outline”, how do I get a “code formatting” option or folder over there????

[@cizario]

So we don't need .editorconfig (for indentation) ?

[@CodingWithAdam]

Good question I have never used editorconfig but yes this could replace it if that is the only thing you use it for.

[@_CryptoFunUA]

thx bro

[@CodingWithAdam]

You’re welcome!

[@Rhxrrrr]

Have i told you i love you great content we should collab

[@S.Abdul_Basit]

Can someone help, Whenever I save my JS file prettier adds spaces in my operating chaining operator
let weight3 = baas_pokemon?.pickachu?.weight let weight3 = baas_pokemon ? .pickachu ? .weight
please help.

[@mailmallett]

I understand it's not a linter but can't it still report in the problems filed such as ""No semi-colon required on line x"?. This would be great

[@CodingWithAdam]

Great question, prettier is a code formatter so it’s main purpose is to format the code rather than to report on formatting issues. With linting you can get a report of problems. Hope that helps.

[@MrHerrmeier]

Does anyone know why my HTML is mostly grey and blue, even though I installed and enabled the prettier extension?

[@CodingWithAdam]

Prettier will not change the colors. If you have the wrong file extension it’s possible vscode is not displaying the correct colors.

[@Tech_Eshwar]

but this formatter is not working for c cpp and java

[@CodingWithAdam]

Sorry to hear that. Prettier does not work for C. You can try this extension for formatting C files. marketplace.visualstudio.com/items?itemName=ms-vscode.cpptools

[@bharatbaglari]

Hey can someone tell me that in HTML style if I'm giving curly bracket to a class or Id I'm not getting a line space instead it is showing below to it

[@adusparx]

Perfect

[@CodingWithAdam]

Thanks!

[@joseeavr]

Hey, do you know how to disable formatting spaces? I just want prettier to add semicolons and single quotes in javascript files but I don't want it to get rid of extra lines in my code. You'd be a live saver!

[@CodingWithAdam]

Unfortunately prettier is a opinionated formatter with very few options. From there website:
Prettier is not a kitchen-sink code formatter that attempts to print your code in any way you wish. It is opinionated. Quoting the Why Prettier? page:
By far the biggest reason for adopting Prettier is to stop all the ongoing debates over styles.
prettier.io/docs/en/option-philosophy.html

[@abdullakhajamohideen]

nice

[@CodingWithAdam]

Thanks!

[@highvid5604]

Prettier not working on html file, please help

[@CodingWithAdam]

Try this - Inside the html document right click and select ‘“ormat document with” then select prettier.

[@100NPRE]

Why my vscode does not have the option of "format with ..." when right click? Thanks.

[@CodingWithAdam]

I wish I could help with that I have not encountered that issue. If I come across It I will let you know the solution. If you find the answer please post here to help others.