How To Setup Prettier

Prettier is one of my favorites tools for writing clean and easy to read code since it does all the formatting for you. In this video I will show you how to setup Prettier, how to use it in your IDE, how to configure it with ESLint, and a few other small Prettier tips.

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:38 - Installation
01:35 - Command Line Usage
02:51 - Integrating Into VSCode
06:18 - Ignoring Files
08:00 - Configuration Options
09:55 - Using With Eslint

#Prettier #WDS #JavaScript

[justingolden]

Great comprehensive yet short and sweet intro to Prettier. I knew 2/3rds of this stuff, but it's good to have all this in one place. A great video to start or to link to someone starting.

[Outplayedqt]

Gosh, I’ve been curious about the ACTUAL correct way of setting Prettier up. Thanks again for such an eloquent yet concise tutorial!

[maacpiash]

Excellent video. The last part was really helpful. Whenever I start a new project, one of the hardest things to get right is to configure ESLint and Prettier to work well with each other. Great job explaining that bit.

[redemptionokoro]

This is sorcery. I was kind of struggling with prettier and eslint for the past two days now. Nice one kyle

[christophersavasta]

You read my mind! I was just having trouble setting this up last week. And now I know why. Thanks.

[cristianmonroy]

I've already finished a node.js back-end course and my teacher magically made the .prettierrc file work when he saved the changes of a file, but i didn't get why. With this tutorial I understood why it is. Thanks a lot, you rock.

[GeneralistDev]

Was trying this for so long... finally you are here❤️

[aliimran]

Excellent video that covers all the essential information a developer should be aware of.

[IhorVyshniakov]

Very appreciating your last part 09:55 about "Using With Eslint"!!!
Thank you a lot

[arogueotaku]

Awesome video Kyle. Would be awesome to see a similar video made for ESLint also.

[cryptonews]

Loved your videos Web dev and all your courses specially JS Simplified

[arcz]

I always wanted to start using it but never know right way to actually it set up. Thanks!

[cold_]

This tutorial on how to set up Prettier was incredibly helpful! The presenter did a great job of explaining the benefits of using Prettier and demonstrated each step clearly and concisely. The visual presentation of the video made it easy to follow along and understand each concept, and the tips and insights provided throughout the tutorial were very helpful. Thanks to this video, I was able to set up Prettier in my JavaScript project quickly and easily. I highly recommend this tutorial to anyone looking to improve their code formatting and simplify their workflow.

[markopolo]

this couldnt have been come out at a better time
for some reason my prettier stopped working and this will be so helpfull
thank you so much

[kabijoshi]

You are fking very smart. A real time saver for dummies like myself. Thumbs up man.
Keep it up and thanks.

[Krzysiekoy]

11:25 Interesting. I tend to go 1 step further and instead of running npx eslint-config-prettier and manually turning off conflicting rules, I just make eslint use prettier as a formatter. So in my eslint config I just do "extends": ["some-config-you-extend", It's not necessary but this way eslint is using prettier as its plugin and there is zero chance for any conflicts.

[zxxwhwj]

Great video! can you do one with eslint? and maybe the configure it with prettier?

[themarksmith]

When trying prettier for Tailwindcss in VS Code it always complains about my using closing semanitc HTML tags - Not sure why so I always end up disabling Prettier - anyone have any ideas?

[andrewwalkerscotland]

Great tutorial as usual. Triggered my OCD in the title though using the word 'setup' as a verb, grrr!

[BGdev]

Would really like for you to do an updated how YOU have setup VS Code and live browser updating. I know you did this some years ago, but things have changed.