How to use Prettier in VS Code - Code Formatting

Подписаться 11 тыс.

Просмотров 280 тыс.

50% 1

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/docs/en/configura...
Prettier Settings Options
prettier.io/docs/en/options.html
Prettier extension
marketplace.visualstudio.com/...

Наука

Опубликовано:

11 янв 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 225

@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! 😁

@soumitralahiri6328 Год назад

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

@CodingWithAdam Год назад

You’re welcome! really glad the tutorial helped!

@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 5 месяцев назад

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

@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 7 месяцев назад

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

@cjcro6456 Год назад

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

@CodingWithAdam Год назад

Thank you! Glad you enjoyed the tutorial!

@jeffreyhunter4115 Год назад

Thank you! Just what I was looking for.

@CodingWithAdam Год назад

You’re welcome!

@achillesus7 Год назад

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

@CodingWithAdam Год назад

You’re welcome!

@kirankumarsukumar Год назад

Explained perfectly.

@CodingWithAdam Год назад

Thank you!

@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.

@narekmusakhanyan523 Год назад

Clear explanation. Thank you

@CodingWithAdam Год назад

Thank you. You’re welcome!

@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!

@isatyamshivam Год назад

Thanks Adam, for to the point explanat. 😀

@CodingWithAdam Год назад

You’re welcome!

@elcancion Год назад

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

@CodingWithAdam Год назад

Glad the video helped! Thank you for the Sub!

@staycalm4957 Год назад

Nice and right to the point! Thanks!

@CodingWithAdam Год назад

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

@gfxmentoring Год назад

Informative! Thanks for sharing your great experience.

@CodingWithAdam Год назад

You’re welcome! Happy you enjoyed the video!

@michalroesler 9 месяцев назад

awesome Tutorial - Thank you Adam.

@CodingWithAdam 9 месяцев назад

You’re welcome! 😁

@carlosbracho1304 6 месяцев назад

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

@CodingWithAdam 6 месяцев назад

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

@entrinsek9230 2 месяца назад

LOVE YOUUUUU workspace setting i was stucking on it thank you

@CodingWithAdam 2 месяца назад

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

@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!

@user-xe8cq9eg9s 10 месяцев назад

Big thank you, it was very helpful to me 🌼

@CodingWithAdam 10 месяцев назад

You’re welcome! 😀

@mouatezbenariba 2 года назад

Great, informative and on point !

@CodingWithAdam 2 года назад

Thank You!

@karinapsheny5063 Год назад

Thank u! Great description! =)

@CodingWithAdam Год назад

You’re welcome! Thank you :)

@duyphuongnguyen431 2 месяца назад

Thanks man. It helps me too much !!!

@CodingWithAdam 2 месяца назад

You’re welcome! Glad the tutorial helped!

@ravimakwana992 2 месяца назад

Thanks for the tutorial!

@CodingWithAdam 2 месяца назад

You’re welcome!

@sandeepnandanwar5240 Месяц назад

now i understant how automatic formatiing the code thanks very much

@CodingWithAdam Месяц назад

You’re welcome! Glad the tutorial 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!

@CieloGotCash Год назад

Nice video man make more coding tutorials u rock👑💯

@CodingWithAdam Год назад

Thank you! 😁

@juggles5474 8 месяцев назад

Great video, thanks!

@CodingWithAdam 8 месяцев назад

Thank you! You’re welcome!

@mattvalgreen 3 месяца назад

Thank you sir. great explanation video 👍

@CodingWithAdam 3 месяца назад

You’re welcome! Glad the tutorial was helpful!

@luiscampos6064 2 года назад

Very helpful, thanks.

@CodingWithAdam 2 года назад

You’re welcome!

@rhymekidstv Год назад

Very informative. Thank you

@CodingWithAdam Год назад

Thank you. You’re welcome!

@alkhiddier9407 Месяц назад

thanks, this video help me and easy to understand

@CodingWithAdam Месяц назад

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

@tullyendicott6700 Год назад

Thanks - very clear.

@CodingWithAdam Год назад

You’re welcome!

@crowning8691 10 месяцев назад

Great job! Thanks for help.

@CodingWithAdam 10 месяцев назад

Thank you! You're welcome!

@ashimghoshfm Год назад

well explained sir. Thank you! Subscribed

@CodingWithAdam Год назад

You’re welcome! Thank you for subscribing!

@LcyYoutube Год назад

Thanks a lot! Nice tutorial :)

@CodingWithAdam Год назад

You’re welcome! Glad you enjoyed the tutorial 😁

@ashaysaoji2273 7 месяцев назад

Thanks for the help!

@CodingWithAdam 7 месяцев назад

You’re welcome!

@patrickhollywood93 Год назад

Thanks for sharing your tutorial. :D

@CodingWithAdam Год назад

You’re welcome!

@nickgannon7466 Год назад

This is a good thing you've done

@CodingWithAdam Год назад

Thank you!

@typalogic4454 7 месяцев назад

Thanks for the video :)

@CodingWithAdam 7 месяцев назад

You’re welcome!

@masrado3195 Год назад

Smooth language and video good job

@CodingWithAdam Год назад

Thank you!!! Appreciate the feedback!

@jiazhengliu2137 Год назад

Amazing video!

@CodingWithAdam Год назад

Thank you! 😁

@wave.firefreezer8390 Год назад

Amazing top video!

@CodingWithAdam Год назад

Thank you!

@thechesstrain528 Год назад

thanks , it worked for me :)

@CodingWithAdam Год назад

You're welcome!

@agusalfandi6672 Год назад

thanks man, this help full me

@CodingWithAdam Год назад

You’re welcome!

@simpleview1433 Год назад

very helpfull video, thanks bro )

@CodingWithAdam Год назад

You’re welcome!

@johnbonjovi9347 11 месяцев назад

Good one! Tnx

@CodingWithAdam 11 месяцев назад

Thank you! You’re welcome!

@ahmadkhalil970 8 месяцев назад

perfect vedio than others

@CodingWithAdam 8 месяцев назад

Thank you! 😁

@sefa6636 Год назад

thank you man

@CodingWithAdam Год назад

You’re welcome!

@zirakqader3664 Год назад

Great one :)

@CodingWithAdam Год назад

Thank you!

@andranikhambardzumyan6264 8 месяцев назад

Amazing video

@CodingWithAdam 8 месяцев назад

Thank you! 😁

@3amnatural Год назад

Thanks ❤

@CodingWithAdam Год назад

You’re welcome! 😀

@hastudent738 Год назад

thank you very much sir

@CodingWithAdam Год назад

You’re welcome!!!

@nicenavarro1376 5 месяцев назад

Appreciate it!

@CodingWithAdam 5 месяцев назад

You’re welcome!

@sebastianantoniochaviracha4845 Год назад

Thank you :)

@CodingWithAdam Год назад

You’re welcome!!!

@nektariis 11 месяцев назад

Thank you🎉

@CodingWithAdam 11 месяцев назад

You’re welcome 😁

@araitmai 17 дней назад

Thank you!

@CodingWithAdam 16 дней назад

You’re welcome!

@user-gm5vf8iv1i Месяц назад

Bro thank you very much

@CodingWithAdam Месяц назад

You're welcome! Glad the video helped!

@JohnGallie 12 дней назад

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

@CodingWithAdam 7 дней назад

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

@madeleniflores2990 Месяц назад

Thank you ❤️

@CodingWithAdam Месяц назад

You’re welcome! 😀

@egm5081 2 месяца назад

thanks man!

@CodingWithAdam 2 месяца назад

You're Welcome!

@abdullahsoomro6238 Год назад

Thanks alot.

@CodingWithAdam Год назад

You’re welcome!

@evgehaplay4912 Год назад

Thanks!

@CodingWithAdam Год назад

You’re welcome!

@krlwshu 2 года назад

Thank you.

@CodingWithAdam 2 года назад

You’re welcome!

@smurffronda2951 Год назад

thanks for this

@CodingWithAdam Год назад

You’re welcome!

@Nr8k Год назад

Thanks gangy

@CodingWithAdam Год назад

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! 😃

@soyelchicodelanus8471 Год назад

thanks!!!

@CodingWithAdam Год назад

You’re welcome!!!

@rakatoneco 2 года назад

thxxxxxx very helpfullllll

@CodingWithAdam 2 года назад

You’re welcome!

@JoseWaldier 2 года назад

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 2 года назад

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

Год назад

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.

@bharatbaglari 10 месяцев назад

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 2 года назад

Perfect

@CodingWithAdam 2 года назад

Thanks!

@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 ....

@goldgold4943 Год назад

Thanks

@CodingWithAdam Год назад

You’re welcome!

@truongvo920 Год назад

thanks🥰

@CodingWithAdam Год назад

You’re welcome!

@user-gt1oq6kz6o 4 месяца назад

Nice Video

@CodingWithAdam 4 месяца назад

Thank you!

@TaprobanaOrg Год назад

💙💙

@CodingWithAdam Год назад

😀👍

@_CryptoFunUA 7 месяцев назад

thx bro

@CodingWithAdam 7 месяцев назад

You’re welcome!

@Rhxrrrr 2 месяца назад

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

@yuukizin 2 года назад

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 2 года назад

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

@yuukizin 2 года назад

@@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.

@mailmallett 7 месяцев назад

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 7 месяцев назад

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.

@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

@S.Abdul_Basit 6 месяцев назад

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.

@lauris5275 2 года назад

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

@CodingWithAdam 2 года назад

Sorry to hear that.

@parkvince5399 Год назад

👍👍👍

@CodingWithAdam Год назад

You’re welcome!

@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

@mayankgaur_ 6 месяцев назад

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 6 месяцев назад

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

@kiPROBRos 9 месяцев назад

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

@CodingWithAdam 8 месяцев назад

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

@zscoder 2 года назад

you'd be a life saver if you could tell me where the options are to turn off spaces for anonymous functions (before parens). In vscode I turned off the setting but prettier is still over riding the setting and adding a space when saving :(

@CodingWithAdam 2 года назад

That's a great question prettier is very opinionated and does not provide many options. I took a look and didn't see anything that could do that. Here is a fun way to explore prettier with an interactive playground. prettier.io/playground/

@ciomio3703 10 месяцев назад

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

@CodingWithAdam 10 месяцев назад

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

@TheBlackmanIsGod 9 месяцев назад

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????

@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.

@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.

@abdullakhajamohideen 2 месяца назад

nice

@CodingWithAdam 2 месяца назад

Thanks!

@GeekForeverChannel 11 месяцев назад

it mess up in .ejs files

@100NPRE 6 месяцев назад

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

@CodingWithAdam 6 месяцев назад

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.

@plex5710 2 года назад

"semi": true will still add semicolons at the end of every line in my js or jsx files

@CodingWithAdam 2 года назад

Maybe something is overriding it? Try restarting VSCode and see if it works. The turn off on again solution sometimes works :)

@dianamirlanbekova5894 5 месяцев назад

prettier isn't appearing after installing

@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