How to use Prettier in VS Code - Code Formatting

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

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

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/do...
Prettier Settings Options
prettier.io/do...
Prettier extension
marketplace.vi...

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

26 сен 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

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

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!

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

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

now i understant how automatic formatiing the code thanks very much

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

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

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

Clear explanation. Thank you

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

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!

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

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

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

You’re welcome! Glad you enjoyed the video.

@kirankumarsukumar Год назад

Explained perfectly.

@CodingWithAdam Год назад

Thank you!

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

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

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

Thank you sir. great explanation video 👍

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

You’re welcome! Glad the tutorial was helpful!

@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

@quatron9561 Год назад

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

@CodingWithAdam Год назад

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

@elcancion Год назад

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

@CodingWithAdam Год назад

Glad the video helped! Thank you for the Sub!

@jeffreyhunter4115 Год назад

Thank you! Just what I was looking for.

@CodingWithAdam Год назад

You’re welcome!

@masrado3195 Год назад

Smooth language and video good job

@CodingWithAdam Год назад

Thank you!!! Appreciate the feedback!

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

Thanks Adam, for to the point explanat. 😀

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

You’re welcome!

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

LOVE YOUUUUU workspace setting i was stucking on it thank you

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

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

@simpleview1433 Год назад

very helpfull video, thanks bro )

@CodingWithAdam Год назад

You’re welcome!

@МаринаМирна-х6и Год назад

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

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

@nickgannon7466 Год назад

This is a good thing you've done

@CodingWithAdam Год назад

Thank you!

@rhymekidstv Год назад

Very informative. Thank you

@CodingWithAdam Год назад

Thank you. You’re welcome!

@michalroesler Год назад

awesome Tutorial - Thank you Adam.

@CodingWithAdam Год назад

You’re welcome! 😁

@ashimghoshfm Год назад

well explained sir. Thank you! Subscribed

@CodingWithAdam Год назад

You’re welcome! Thank you for subscribing!

@3amnatural Год назад

Thanks ❤

@CodingWithAdam Год назад

You’re welcome! 😀

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

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

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

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

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

Thanks man. It helps me too much !!!

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

You’re welcome! Glad the tutorial helped!

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

@gfxmentoring Год назад

Informative! Thanks for sharing your great experience.

@CodingWithAdam Год назад

You’re welcome! Happy you enjoyed the video!

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

perfect vedio than others

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

Thank you! 😁

@tullyendicott6700 Год назад

Thanks - very clear.

@CodingWithAdam Год назад

You’re welcome!

@LcyYoutube Год назад

Thanks a lot! Nice tutorial :)

@CodingWithAdam Год назад

You’re welcome! Glad you enjoyed the tutorial 😁

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

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

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

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

@sebastianantoniochaviracha4845 Год назад

Thank you :)

@CodingWithAdam Год назад

You’re welcome!!!

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

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

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

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

Great, informative and on point !

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

Thank You!

@karinapsheny5063 Год назад

Thank u! Great description! =)

@CodingWithAdam Год назад

You’re welcome! Thank you :)

@snowman1185-v Год назад

Thanks for sharing your tutorial. :D

@CodingWithAdam Год назад

You’re welcome!

@CieloGotCash Год назад

Nice video man make more coding tutorials u rock👑💯

@CodingWithAdam Год назад

Thank you! 😁

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

@hastudent738 Год назад

thank you very much sir

@CodingWithAdam Год назад

You’re welcome!!!

@crowning8691 Год назад

Great job! Thanks for help.

@CodingWithAdam Год назад

Thank you! You're welcome!

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

Very helpful, thanks.

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

You’re welcome!

@jiazhengliu2137 Год назад

Amazing video!

@CodingWithAdam Год назад

Thank you! 😁

@kiPROBRos Год назад

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

@CodingWithAdam Год назад

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

@staycalm4957 Год назад

Nice and right to the point! Thanks!

@CodingWithAdam Год назад

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

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

Amazing top video!

@CodingWithAdam Год назад

Thank you!

@evgehaplay4912 Год назад

Thanks!

@CodingWithAdam Год назад

You’re welcome!

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

Thank you!

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

You’re welcome!

@JuyelHaque-h9d 4 месяца назад

Bro thank you very much

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

You're welcome! Glad the video helped!

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

thanks , it worked for me :)

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

You're welcome!

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

Thanks for the help!

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

You’re welcome!

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

Thank you ❤️

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

You’re welcome! 😀

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

thanks🥰

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

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

@johnbonjovi9347 Год назад

Good one! Tnx

@CodingWithAdam Год назад

Thank you! You’re welcome!

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

Thanks for the video :)

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

You’re welcome!

@sefa6636 Год назад

thank you man

@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

@zirakqader3664 Год назад

Great one :)

@CodingWithAdam Год назад

Thank you!

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

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

@abdullahsoomro6238 Год назад

Thanks alot.

@CodingWithAdam Год назад

You’re welcome!

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

Amazing video

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

Thank you! 😁

@Nouman-Bhai Месяц назад

My c File code is not formatted...

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

Unfortunately prettier does not support c files.

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

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

thanks for this

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

You’re welcome!

@Nr8k Год назад

Thanks gangy

@CodingWithAdam Год назад

You’re welcome!

@simpleview1433 Год назад

for more easy way to add semi and singleQuote is adding this code to your settings.json file ) - "editor.formatOnSave": true, "prettier.semi": false, "prettier.singleQuote": true,

@CodingWithAdam Год назад

Thanks for the tip!

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

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

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.

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

Appreciate it!

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

You’re welcome!

@mahtab_sudip Год назад

Thanks

@CodingWithAdam Год назад

You're Welcome!

@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

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

@soyelchicodelanus8471 Год назад

thanks!!!

@CodingWithAdam Год назад

You’re welcome!!!

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

Thank you.

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

You’re welcome!

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

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

It wont work on html files. Atom's Beautify >>>>> VS code's Prettier

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

thxxxxxx very helpfullllll

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

You’re welcome!

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

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

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

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.

@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

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

thx bro

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

You’re welcome!

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

thanks man!

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

You're Welcome!

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

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

nice

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

Thanks!

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

Perfect

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

Thanks!

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

does prettier support python?

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

It does not support python. I suggest checking out a formatter for python called black. marketplace.visualstudio.com/items?itemName=ms-python.black-formatter Here is a helpful article code.visualstudio.com/docs/python/formatting

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

My Prettier is still not autosaving

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

If it’s not formatting on save I would check if the check box is checked in the settings for format on save.

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

bro had youtube minecraft shorts voice !!

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

I hope that’s a good thing 😀 I have not seen those videos. Please let me know what channel that is.

@TaprobanaOrg Год назад

💙💙

@CodingWithAdam Год назад

😀👍

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

prettier isn't appearing after installing

@zeljkoferber9684 29 дней назад

dont work at all , what is the prob

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

why doesn't work on python codes,,,please help

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

Prettier does not support python. I suggest checking out autopep8 or black to format python code. Here is an article that should help dev.to/eegli/quick-guide-to-python-formatting-in-vs-code-2040

@GeekForeverChannel Год назад

it mess up in .ejs files

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

👍👍👍

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

You’re welcome!

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

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

im trying to like your video but i dont know how xD

@nix7705 Год назад

Cant install it. Microsoft Visual Studio Community 2022 (64-bit) Version 17.6.5, Winsows 11 There just nothing in seach results for "Prettier - Code formatter". Downloading it manually and executing leads to error " - Extension is not signed. - VSIXInstaller.NoApplicableSKUsException: One or more extensions are for Visual Studio Code. Try installing them in Visual Studio Code." I want to kill microsoft. Why it's not working? In the past everything was ok. But fresh windows and VS just some sort of annoyanse.

@CodingWithAdam Год назад

It looks like you downloaded visual studio and not visual studio code. It can be confusing with 2 products with similar names. Here is the correct download link code.visualstudio.com/ I hope this helps 😀