How to use Prettier in VS Code - Code Formatting

Поділитися
Вставка

КОМЕНТАРІ • 234

  • @pubgm7262
    @pubgm7262 3 місяці тому +9

    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  3 місяці тому +1

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

  • @user-xj2mt1rp2v
    @user-xj2mt1rp2v Рік тому +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 7 місяців тому

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

  • @soumitralahiri6328
    @soumitralahiri6328 Рік тому +14

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

    • @CodingWithAdam
      @CodingWithAdam  Рік тому +1

      You’re welcome! really glad the tutorial helped!

  • @JohnAshleyMckenzie
    @JohnAshleyMckenzie Рік тому +10

    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 4 місяці тому +2

    Thanks for the tutorial!

  • @erickchavez4551
    @erickchavez4551 Рік тому +9

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

    • @CodingWithAdam
      @CodingWithAdam  Рік тому +1

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

    • @BobDenton655
      @BobDenton655 9 місяців тому

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

  • @narekmusakhanyan523
    @narekmusakhanyan523 2 роки тому +9

    Clear explanation. Thank you

  • @kirankumarsukumar
    @kirankumarsukumar Рік тому +8

    Explained perfectly.

  • @cjcro6456
    @cjcro6456 Рік тому +5

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

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

  • @sandeepnandanwar5240
    @sandeepnandanwar5240 2 місяці тому +2

    now i understant how automatic formatiing the code thanks very much

    • @CodingWithAdam
      @CodingWithAdam  2 місяці тому +1

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

  • @mattvalgreen
    @mattvalgreen 5 місяців тому +1

    Thank you sir. great explanation video 👍

    • @CodingWithAdam
      @CodingWithAdam  5 місяців тому

      You’re welcome! Glad the tutorial was helpful!

  • @fighter8931
    @fighter8931 Рік тому +3

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

    • @CodingWithAdam
      @CodingWithAdam  Рік тому +1

      You’re welcome! Glad you enjoyed the video.

  • @inescherif5385
    @inescherif5385 11 днів тому +2

    Thank u so much! That was helpful!

    • @CodingWithAdam
      @CodingWithAdam  4 дні тому +1

      You're welcome! Glad the video was helpful.

  • @elcancion
    @elcancion Рік тому +3

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

    • @CodingWithAdam
      @CodingWithAdam  Рік тому +1

      Glad the video helped! Thank you for the Sub!

  • @alkhiddier9407
    @alkhiddier9407 2 місяці тому +2

    thanks, this video help me and easy to understand

    • @CodingWithAdam
      @CodingWithAdam  2 місяці тому +1

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

  • @achillesus7
    @achillesus7 2 роки тому +2

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

  • @masrado3195
    @masrado3195 Рік тому +2

    Smooth language and video good job

  • @quatron9561
    @quatron9561 Рік тому +3

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

    • @CodingWithAdam
      @CodingWithAdam  Рік тому +2

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

  • @jeffreyhunter4115
    @jeffreyhunter4115 Рік тому +2

    Thank you! Just what I was looking for.

  • @nickgannon7466
    @nickgannon7466 Рік тому +1

    This is a good thing you've done

  • @entrinsek9230
    @entrinsek9230 4 місяці тому

    LOVE YOUUUUU workspace setting i was stucking on it thank you

    • @CodingWithAdam
      @CodingWithAdam  4 місяці тому

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

  • @ahmadkhalil970
    @ahmadkhalil970 10 місяців тому +1

    perfect vedio than others

  • @isatyamshivam
    @isatyamshivam Рік тому +4

    Thanks Adam, for to the point explanat. 😀

  • @duyphuongnguyen431
    @duyphuongnguyen431 4 місяці тому +1

    Thanks man. It helps me too much !!!

    • @CodingWithAdam
      @CodingWithAdam  3 місяці тому

      You’re welcome! Glad the tutorial helped!

  • @simpleview1433
    @simpleview1433 Рік тому +2

    very helpfull video, thanks bro )

  • @tullyendicott6700
    @tullyendicott6700 Рік тому +2

    Thanks - very clear.

  • @rhymekidstv
    @rhymekidstv Рік тому +2

    Very informative. Thank you

  • @sebastianantoniochaviracha4845

    Thank you :)

  • @JohnGallie
    @JohnGallie 2 місяці тому +3

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

    • @CodingWithAdam
      @CodingWithAdam  Місяць тому +1

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

  • @gabriel5591
    @gabriel5591 19 днів тому +2

    very usefull bro! Thanks

    • @CodingWithAdam
      @CodingWithAdam  4 дні тому +1

      You’re welcome! Glad the video was useful.

  • @3amnatural
    @3amnatural Рік тому +2

    Thanks

  • @michalroesler
    @michalroesler 11 місяців тому +2

    awesome Tutorial - Thank you Adam.

  • @user-xe8cq9eg9s
    @user-xe8cq9eg9s Рік тому +2

    Big thank you, it was very helpful to me 🌼

  • @schajuli1991
    @schajuli1991 Рік тому +1

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

    • @schajuli1991
      @schajuli1991 Рік тому +1

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

  •  Рік тому +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  Рік тому +1

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

  • @LcyYoutube
    @LcyYoutube Рік тому +2

    Thanks a lot! Nice tutorial :)

    • @CodingWithAdam
      @CodingWithAdam  Рік тому

      You’re welcome! Glad you enjoyed the tutorial 😁

  • @mouatezbenariba
    @mouatezbenariba 2 роки тому +10

    Great, informative and on point !

  • @carlosbracho1304
    @carlosbracho1304 8 місяців тому +1

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

    • @CodingWithAdam
      @CodingWithAdam  8 місяців тому

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

  • @karinapsheny5063
    @karinapsheny5063 Рік тому +2

    Thank u! Great description! =)

  • @ashimghoshfm
    @ashimghoshfm Рік тому +2

    well explained sir. Thank you! Subscribed

    • @CodingWithAdam
      @CodingWithAdam  Рік тому +1

      You’re welcome! Thank you for subscribing!

  • @juggles5474
    @juggles5474 10 місяців тому +1

    Great video, thanks!

  • @patrickhollywood93
    @patrickhollywood93 Рік тому +2

    Thanks for sharing your tutorial. :D

  • @mayankgaur_
    @mayankgaur_ 8 місяців тому +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  8 місяців тому

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

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

  • @gfxmentoring
    @gfxmentoring Рік тому +2

    Informative! Thanks for sharing your great experience.

    • @CodingWithAdam
      @CodingWithAdam  Рік тому +1

      You’re welcome! Happy you enjoyed the video!

  • @hastudent738
    @hastudent738 Рік тому +2

    thank you very much sir

  • @jiazhengliu2137
    @jiazhengliu2137 Рік тому +2

    Amazing video!

  • @evgehaplay4912
    @evgehaplay4912 Рік тому +1

    Thanks!

  • @araitmai
    @araitmai 2 місяці тому +2

    Thank you!

  • @wave.firefreezer8390
    @wave.firefreezer8390 Рік тому +2

    Amazing top video!

  • @staycalm4957
    @staycalm4957 Рік тому +1

    Nice and right to the point!
    Thanks!

    • @CodingWithAdam
      @CodingWithAdam  Рік тому +1

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

  • @user-gm5vf8iv1i
    @user-gm5vf8iv1i 3 місяці тому +2

    Bro thank you very much

    • @CodingWithAdam
      @CodingWithAdam  3 місяці тому +1

      You're welcome! Glad the video helped!

  • @luiscampos6064
    @luiscampos6064 2 роки тому +3

    Very helpful, thanks.

  • @robsongrubba
    @robsongrubba 7 годин тому

    Thank you very much!

  • @crowning8691
    @crowning8691 Рік тому +1

    Great job! Thanks for help.

  • @CieloGotCash
    @CieloGotCash Рік тому +2

    Nice video man make more coding tutorials u rock👑💯

  • @ashaysaoji2273
    @ashaysaoji2273 9 місяців тому +1

    Thanks for the help!

  • @typalogic4454
    @typalogic4454 8 місяців тому +1

    Thanks for the video :)

  • @johnbonjovi9347
    @johnbonjovi9347 Рік тому +2

    Good one! Tnx

  • @dambro71
    @dambro71 Рік тому +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

  • @agusalfandi6672
    @agusalfandi6672 2 роки тому +2

    thanks man, this help full me

  • @simpleview1433
    @simpleview1433 Рік тому +1

    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,

  • @truongvo920
    @truongvo920 Рік тому +2

    thanks🥰

  • @madeleniflores2990
    @madeleniflores2990 3 місяці тому +2

    Thank you ❤️

  • @thechesstrain528
    @thechesstrain528 Рік тому +2

    thanks , it worked for me :)

  • @sefa6636
    @sefa6636 Рік тому +2

    thank you man

  • @Titan0_7
    @Titan0_7 7 днів тому

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

  • @nektariis
    @nektariis Рік тому +2

    Thank you🎉

  • @zirakqader3664
    @zirakqader3664 Рік тому +2

    Great one :)

  • @andranikhambardzumyan6264
    @andranikhambardzumyan6264 9 місяців тому +1

    Amazing video

  • @abdullahsoomro6238
    @abdullahsoomro6238 Рік тому +2

    Thanks alot.

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

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

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

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

  • @TheBlackmanIsGod
    @TheBlackmanIsGod 10 місяців тому

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

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

  • @nicenavarro1376
    @nicenavarro1376 6 місяців тому +1

    Appreciate it!

  • @S.Abdul_Basit
    @S.Abdul_Basit 8 місяців тому

    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.

  • @Nr8k
    @Nr8k Рік тому +2

    Thanks gangy

  • @smurffronda2951
    @smurffronda2951 2 роки тому +2

    thanks for this

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

  • @MrHerrmeier
    @MrHerrmeier Рік тому +1

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

    • @CodingWithAdam
      @CodingWithAdam  Рік тому +1

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

  • @imrealgigachad
    @imrealgigachad 2 дні тому

    Thanks man

  • @mailmallett
    @mailmallett 8 місяців тому

    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  8 місяців тому

      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.

  • @bharatbaglari
    @bharatbaglari 11 місяців тому

    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

  • @mahtab_sudip
    @mahtab_sudip 11 місяців тому +2

    Thanks

  • @soyelchicodelanus8471
    @soyelchicodelanus8471 Рік тому +2

    thanks!!!

  • @krlwshu
    @krlwshu 2 роки тому +2

    Thank you.

  • @user-gt1oq6kz6o
    @user-gt1oq6kz6o 6 місяців тому +1

    Nice Video

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

  • @rakatoneco
    @rakatoneco 2 роки тому +2

    thxxxxxx very helpfullllll

  • @TaprobanaOrg
    @TaprobanaOrg Рік тому +2

    💙💙

  • @kiPROBRos
    @kiPROBRos 10 місяців тому +2

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

    • @CodingWithAdam
      @CodingWithAdam  10 місяців тому +1

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

  • @egm5081
    @egm5081 3 місяці тому

    thanks man!

  • @Tech_Eshwar
    @Tech_Eshwar Рік тому +1

    but this formatter is not working for c cpp and java

    • @CodingWithAdam
      @CodingWithAdam  Рік тому +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

  • @Nouman-Bhai
    @Nouman-Bhai 14 днів тому +1

    My c File code is not formatted...

    • @CodingWithAdam
      @CodingWithAdam  4 дні тому +1

      Unfortunately prettier does not support c files.

  • @100NPRE
    @100NPRE 8 місяців тому

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

    • @CodingWithAdam
      @CodingWithAdam  8 місяців тому

      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.

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

  • @Rhxrrrr
    @Rhxrrrr 3 місяці тому

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