How to use Prettier in VS Code - Code Formatting

Поделиться
HTML-код
  • Опубликовано: 31 янв 2025

Комментарии • 243

  • @pubgm7262
    @pubgm7262 9 месяцев назад +13

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

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

  • @entrinsek9230
    @entrinsek9230 10 месяцев назад +1

    LOVE YOUUUUU workspace setting i was stucking on it thank you

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

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

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

    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
      @CodingWithAdam  Год назад +3

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

    • @MrNams
      @MrNams Год назад

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

  • @soumitralahiri6328
    @soumitralahiri6328 2 года назад +14

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

    • @CodingWithAdam
      @CodingWithAdam  2 года назад +1

      You’re welcome! really glad the tutorial helped!

  • @quidergo
    @quidergo 3 месяца назад +2

    Excellent explanation! You just made my day. Thank you so much, Adam.

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

      Thank you! You’re welcome glad you enjoyed the tutorial. You’re comment made my day as well 😁

  • @Varyeth
    @Varyeth Год назад +2

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

  • @fighter8931
    @fighter8931 2 года назад +3

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

    • @CodingWithAdam
      @CodingWithAdam  2 года назад +1

      You’re welcome! Glad you enjoyed the video.

  • @erickchavez4551
    @erickchavez4551 2 года назад +9

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

    • @CodingWithAdam
      @CodingWithAdam  2 года назад +1

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

    • @BobDenton655
      @BobDenton655 Год назад

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

  • @cjcro6456
    @cjcro6456 Год назад +5

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

  • @JohnAshleyMckenzie
    @JohnAshleyMckenzie Год назад +12

    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.

  • @ravimakwana992
    @ravimakwana992 10 месяцев назад +2

    Thanks for the tutorial!

  • @elcancion
    @elcancion 2 года назад +3

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

    • @CodingWithAdam
      @CodingWithAdam  2 года назад +1

      Glad the video helped! Thank you for the Sub!

  • @mattvalgreen
    @mattvalgreen 10 месяцев назад +1

    Thank you sir. great explanation video 👍

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

      You’re welcome! Glad the tutorial was helpful!

  • @narekmusakhanyan523
    @narekmusakhanyan523 2 года назад +9

    Clear explanation. Thank you

  • @sandeepnandanwar5240
    @sandeepnandanwar5240 8 месяцев назад +2

    now i understant how automatic formatiing the code thanks very much

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

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

  • @kirankumarsukumar
    @kirankumarsukumar 2 года назад +8

    Explained perfectly.

  • @achillesus7
    @achillesus7 2 года назад +2

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

  • @jeffreyhunter4115
    @jeffreyhunter4115 2 года назад +2

    Thank you! Just what I was looking for.

  • @inescherif5385
    @inescherif5385 6 месяцев назад +2

    Thank u so much! That was helpful!

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

      You're welcome! Glad the video was helpful.

  • @alkhiddier9407
    @alkhiddier9407 8 месяцев назад +2

    thanks, this video help me and easy to understand

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

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

  • @carlosbracho1304
    @carlosbracho1304 Год назад +1

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

    • @CodingWithAdam
      @CodingWithAdam  Год назад

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

  • @typalogic4454
    @typalogic4454 Год назад +1

    Thanks for the video :)

  • @masrado3195
    @masrado3195 2 года назад +2

    Smooth language and video good job

  • @duyphuongnguyen431
    @duyphuongnguyen431 9 месяцев назад +1

    Thanks man. It helps me too much !!!

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

      You’re welcome! Glad the tutorial helped!

  • @isatyamshivam
    @isatyamshivam 2 года назад +4

    Thanks Adam, for to the point explanat. 😀

  • @nickgannon7466
    @nickgannon7466 Год назад +1

    This is a good thing you've done

  • @michalroesler
    @michalroesler Год назад +2

    awesome Tutorial - Thank you Adam.

  • @JohnGallie
    @JohnGallie 7 месяцев назад +3

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

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

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

  • @araitmai
    @araitmai 7 месяцев назад +2

    Thank you!

  • @quatron9561
    @quatron9561 2 года назад +3

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

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

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

  • @mouatezbenariba
    @mouatezbenariba 2 года назад +10

    Great, informative and on point !

  • @ashaysaoji2273
    @ashaysaoji2273 Год назад +1

    Thanks for the help!

  • @ahmadkhalil970
    @ahmadkhalil970 Год назад +1

    perfect vedio than others

  • @simpleview1433
    @simpleview1433 Год назад +2

    very helpfull video, thanks bro )

  • @andranikhambardzumyan6264
    @andranikhambardzumyan6264 Год назад +1

    Amazing video

  • @rhymekidstv
    @rhymekidstv Год назад +2

    Very informative. Thank you

  • @JuyelHaque-h9d
    @JuyelHaque-h9d 9 месяцев назад +2

    Bro thank you very much

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

      You're welcome! Glad the video helped!

  • @karinapsheny5063
    @karinapsheny5063 2 года назад +2

    Thank u! Great description! =)

  • @robsongrubba
    @robsongrubba 5 месяцев назад +2

    Thank you very much!

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

      You’re welcome! Glad you enjoyed the video!

  • @kiPROBRos
    @kiPROBRos Год назад +2

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

    • @CodingWithAdam
      @CodingWithAdam  Год назад +1

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

  • @LcyYoutube
    @LcyYoutube Год назад +2

    Thanks a lot! Nice tutorial :)

    • @CodingWithAdam
      @CodingWithAdam  Год назад

      You’re welcome! Glad you enjoyed the tutorial 😁

  • @CieloGotCash
    @CieloGotCash 2 года назад +2

    Nice video man make more coding tutorials u rock👑💯

  • @wave.firefreezer8390
    @wave.firefreezer8390 Год назад +2

    Amazing top video!

  • @SmithnWesson
    @SmithnWesson Год назад +1

    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
      @CodingWithAdam  Год назад +1

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

    • @SmithnWesson
      @SmithnWesson Год назад

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

    • @CodingWithAdam
      @CodingWithAdam  Год назад

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

  • @zoom.81
    @zoom.81 Год назад +2

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

    • @CodingWithAdam
      @CodingWithAdam  Год назад +1

      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

  • @tullyendicott6700
    @tullyendicott6700 2 года назад +2

    Thanks - very clear.

  • @staycalm4957
    @staycalm4957 Год назад +1

    Nice and right to the point!
    Thanks!

    • @CodingWithAdam
      @CodingWithAdam  Год назад +1

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

  • @snowman1185-v
    @snowman1185-v 2 года назад +2

    Thanks for sharing your tutorial. :D

  • @gfxmentoring
    @gfxmentoring 2 года назад +2

    Informative! Thanks for sharing your great experience.

    • @CodingWithAdam
      @CodingWithAdam  2 года назад +1

      You’re welcome! Happy you enjoyed the video!

  • @ashimghoshfm
    @ashimghoshfm 2 года назад +2

    well explained sir. Thank you! Subscribed

    • @CodingWithAdam
      @CodingWithAdam  2 года назад +1

      You’re welcome! Thank you for subscribing!

  • @crowning8691
    @crowning8691 Год назад +1

    Great job! Thanks for help.

  • @orrymr
    @orrymr 22 дня назад +1

    This is a great video.

  • @johnbonjovi9347
    @johnbonjovi9347 Год назад +2

    Good one! Tnx

  • @SilviuIT-tn3dn
    @SilviuIT-tn3dn Год назад +3

    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
      @CodingWithAdam  Год назад +1

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

  • @hastudent738
    @hastudent738 2 года назад +2

    thank you very much sir

  • @diana5899-n4v
    @diana5899-n4v Год назад +3

    prettier isn't appearing after installing

  • @schajuli1991
    @schajuli1991 2 года назад +1

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

    • @schajuli1991
      @schajuli1991 2 года назад +1

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

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

  • @ciomio3703
    @ciomio3703 Год назад +1

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

    • @CodingWithAdam
      @CodingWithAdam  Год назад +2

      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

  • @nektariis
    @nektariis Год назад +2

    Thank you🎉

  • @sefa6636
    @sefa6636 Год назад +2

    thank you man

  • @3amnatural
    @3amnatural Год назад +2

    Thanks

  • @jiazhengliu2137
    @jiazhengliu2137 2 года назад +2

    Amazing video!

  • @agusalfandi6672
    @agusalfandi6672 2 года назад +2

    thanks man, this help full me

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

    thanks , it worked for me :)

  • @nicenavarro1376
    @nicenavarro1376 Год назад +1

    Appreciate it!

  • @luiscampos6064
    @luiscampos6064 3 года назад +3

    Very helpful, thanks.

  •  2 года назад +1

    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
      @CodingWithAdam  2 года назад +1

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

  • @cizario
    @cizario Год назад +1

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

    • @CodingWithAdam
      @CodingWithAdam  Год назад +1

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

  • @sebastianantoniochaviracha4845
    @sebastianantoniochaviracha4845 Год назад +2

    Thank you :)

  • @lauris5275
    @lauris5275 2 года назад +1

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

  • @zirakqader3664
    @zirakqader3664 2 года назад +2

    Great one :)

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

    thanks man!

  • @abdullahsoomro6238
    @abdullahsoomro6238 2 года назад +2

    Thanks alot.

  • @Nouman-Bhai
    @Nouman-Bhai 6 месяцев назад +1

    My c File code is not formatted...

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

      Unfortunately prettier does not support c files.

  • @mayankgaur_
    @mayankgaur_ Год назад +1

    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
      @CodingWithAdam  Год назад

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

  • @azperin4k
    @azperin4k 2 года назад +1

    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
      @CodingWithAdam  2 года назад +1

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

    • @azperin4k
      @azperin4k 2 года назад +1

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

  • @jsvrs
    @jsvrs 2 года назад +1

    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
      @CodingWithAdam  2 года назад +1

      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

  • @Tech_Eshwar
    @Tech_Eshwar 2 года назад +1

    but this formatter is not working for c cpp and java

    • @CodingWithAdam
      @CodingWithAdam  2 года назад +1

      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

  • @_CryptoFunUA
    @_CryptoFunUA Год назад +1

    thx bro

  • @TheBlackmanIsGod
    @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????

  • @MrHerrmeier
    @MrHerrmeier 2 года назад +1

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

    • @CodingWithAdam
      @CodingWithAdam  2 года назад +1

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

  • @matinodoom5883
    @matinodoom5883 Год назад +1

    does prettier support python?

    • @CodingWithAdam
      @CodingWithAdam  Год назад +2

      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

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

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

  • @soyelchicodelanus8471
    @soyelchicodelanus8471 Год назад +2

    thanks!!!

  • @evgehaplay4912
    @evgehaplay4912 2 года назад +1

    Thanks!

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

    thanks🥰

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

    thanks for this

  • @Nr8k
    @Nr8k 2 года назад +2

    Thanks gangy

  • @bharatbaglari
    @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

  • @goldgold4943
    @goldgold4943 Год назад +2

    Thanks

  • @highvid5604
    @highvid5604 2 года назад +1

    Prettier not working on html file, please help

    • @CodingWithAdam
      @CodingWithAdam  2 года назад +1

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

  • @zscoder
    @zscoder 2 года назад +3

    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
      @CodingWithAdam  2 года назад +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/

  • @abdullakhajamohideen
    @abdullakhajamohideen 10 месяцев назад +2

    nice

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

    thxxxxxx very helpfullllll

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

    Thank you.

  • @TaprobanaOrg
    @TaprobanaOrg Год назад +2

    💙💙

  • @TheGeigerUX
    @TheGeigerUX 2 года назад +1

    My Prettier is still not autosaving

    • @CodingWithAdam
      @CodingWithAdam  2 года назад +1

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

  • @hossainmahmudshishir8091
    @hossainmahmudshishir8091 Год назад

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

    • @CodingWithAdam
      @CodingWithAdam  Год назад

      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

  • @S.Abdul_Basit
    @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.