How To Setup Prettier

[@Outplayedqt]

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

[@IhorVyshniakov]

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

[@justingolden21]

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.

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

[@cristianmonroy3897]

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.

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

[@hi-ew2ox]

gpt ass comment

[@GeneralistDev]

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

[@redemptionokoro8274]

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

[@christophersavasta5222]

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

[@markopolo2224]

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

[@arcz15]

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

[@arogueotaku]

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

[@danser_theplayer01]

I have installed and configured so many tools in the last few days (vscode, jsdoc, eslint, prettier....) that I feel like I can now officially be called a pro-programmer, using all this stuff to increase my pro-productivity.

[@samislam2746]

The good thing in this channel is you don't waste our time

[@kabijoshi5949]

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

[@cryptonews5253]

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

[@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", "plugin:prettier/recommended"]. It's not necessary but this way eslint is using prettier as its plugin and there is zero chance for any conflicts.

[@aliimran7051]

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

[@tamasmolnar4157]

Hi Kyle, ESLint 9.0.0 is out (breaking changes). If you have time/will, please make a video on ESLint and Prettier in a node.js typescript project (e.g. Nest.js). It would be really appreciated. Thanks in advance.

[@theisoj]

Very nice tutorial! Thanks Kyle!

[@andrewwalkerscotland]

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

[@coderawesome]

On point! Thanks Kyle.

[@kayodekehinde3756]

Thank you Kyle nice teaching...

[@gabrielanzaldoalvarado.2380]

clear and concise 🙌

[@deathdogg0]

I prefer eslent for formatting ts and js files, as I like doing things a certain way that prettier doesn't allow for. But I like prettier for jsx and tsx so it definitely has its place in my toolbox

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

[@ahmedalaaezzat]

Thank you that was super useful ❤

[@SaarC-rm2go]

What's the difference between just clicking Alt+Shift+F?

[@hello_world_104]

i dont have text editor option to select prettier

[@ПётрПетров-д2ч4х]

Very useful! Thnx a lot!

[@BGdev305]

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.

[@Ald0Abdiel]

Awesome video :)

[@Trauma_Clown]

you're good boy Kyle

[@carlotadias9335]

nice video ! thank you

[@magnumax2978]

Thanks man!

[@nick066hu]

My issue is not the topic here. but this is what comes to my mind seeing Prettier and Co.'s default results of code 'prettifying', sorry for the off-topic rant: (btw. a clue to a more appropriate, more effective forum for my topic is welcome) Why does everyone, including the most popular tools, insist on a formatting habit coming from the 1980's, the days of 25 to 80 characters per line screens, when all source code was printed out on matrix printers to fanfold paper, as the only way of being well-documented and kept safe. When 'structured, clean programming' meant one variable/statement/nesting depth per line. It has even evolved to a stage when each function declaration had to start on a new page when printed. It is now 2023. Of my three monitors, the middle one alone is 4096 pixels, almost a meter wide (it's a 48" 4k OLED 👍), perhaps even more significant is that my two eyes are arranged horizontally 👀 (maybe this is the reason why I hate vertical videos too). In a word: I have plenty of horizontal screen space. Vertical space is however a precious treasure for me and all programmers I know. Then why is this code writing style that wastes the most valuable, vertical space is so widespread? Believe me, understanding two or three basic object properties profanely written into one line, or even an if-then-else structure where not a whole line for each curly brace is wasted (I regularly see two additional empty lines added around to further ease the indigestible mystery of the curly braces of a simple if-then-else), is not beyond the intellectual capacity of even a novice programmer. But having to scroll back and forth several meters to understand a simple program is a challenge for us all. Even if you don't recognize it as a problem: understanding several related logical units in the same field of vision is way more easy than assemble one in mind from several screens. Just give it a try! Please limit the spread of vertically diluted source code, it is as pointless as how the vertical videos are stupid. The only difference is that those videos are perpetrated by incompetents, but this vertical coding style is unfortunately spread by professionals. Professionals who think that a simple 'if (s==='nope') return null else return s' instruction, although it is written in plain English, is only interpretable for all other programmers and their future selves when spread to 8 lines of code (or 12-15 lines if the even more pretty 'clarifying' empty lines are added), covering a significant part of any computer screen. What do they think is then needed to understand a complex parallel thread-safe multilevel abstraction? Seven empty lines between statements? PS: I would appreciate seeing a config/setting for doing the opposite of the 'prettifying' vertical code dilution: a vertical code condenser, an 'uglyfier' Like removing empty lines when more then one, one-line conditional/loop statements when only one statement is in the block, one-line object initializers (when properties are unnested and fit within a line), etc. This is not to confuse with code minifying, my 'uglyfier', let's name it vertical condenser, would make the code more concise, more readable.

[@PieterWigboldus]

Using the actual version is a personal choice. But if prettier isnt using semver and break things in minor versions, than this would be an advice, or use something better that use semver. If you want to use the exact version or use the ^ should just be a personal preference.

[@darrylbrian]

Is it possible to set up Prettier to use the Airbnb Javascript style guide?

[@321sas]

Kyle, you could use -D instead of --save-dev. It uses less effort.

[@BezzantSam]

You should change the intro music to a death metal riff

[@sogggy]

Can you do a random video playing the guitar behind you?

[@amai3548]

Hi there, I use Prettier for HTML and CSS-Files. I don't like that Prettier sets unnecessary backslashes in stand-alone-tags. Do you know how to stop this behavior? Thanks!

[@adityasethi9794]

The issue with front end is that there are a billion packages to install lol. Good vid tho. Why do we need the extension if we install the dev prettier pkg?

[@עידוגרוס-ע7ג]

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

[@UmarHamza]

Great video

[@abdulazeez.98]

There is also an awesome trick you can use. Write a comment with “prettier-ignore” and it will ignore the next code block (i.e. function, loop..). It’s useful when you have a long line and you don’t want it to wrap.

[@hojdog]

I've been using eslint and prettier for years and I still spend a day or two trying to configure them every time I start a new project, and it never works out as I like anyway and I just settle for whatever doesn't break in the end 😅

[@mark-dev-1]

This sounds awful tbh

[@rhyshughes9942]

If my project has prettier in devDependencies but my team has prettier local to their mac's, will it override their local settings? If not,, how do they turn it off?

[@gosnooky]

I just use eslint for both. I don't see why we need a separate dependency and editor plugin to perform the 5 or so tasks that eslint can handle just fine.

[@alanproduction910]

please make a tutorial video about how to connect PHP to REACT and how we use them together ...

[@boopathisakthivel6901]

Will prettier works with all framework files ? For eg, *.feature files. I have prettier that works with react/typescript/css files except this automation files.

[@solr4cc]

WHy after runnig prettier your object have all prop on different lines where mine is oneliner?

[@renatozr11]

Nice video

[@PhoneBizone]

thanks buddy

[@B0BHD]

i dont have the one text editor setting???? i cant set it as default wth do i do??

[@yoshiyoshi6]

note: you need only `npm i prettier` to install prettier since --save-dev is the default behaviour of npm

[@aram5642]

This is actually the development area that gets me p.ssed off. There is too many of those formatting tools around, and none of them is either complete or cross-platform/cross-IDE. Prettier, editorconfig, eslint fixers, and then ide plugins or internal settings. I wish I could only use liny fixers with the vast gamut of options webstorm offers.

[@fantasyplanet480]

Hello can you make a live streaming app like twitch tv using mern stack and key stream for every streamer to connect with obs ? Thanks

[@simohamedlaarmani6789]

thank you

[@e-benz]

love WebStorm

[@nageshpatel889]

How can we do production ready webpack configuration in react app..?

[@danser_theplayer01]

I'm gonna specify it with tilde (~) so it goes up to most recent patch of the same version.

[@JoelPeltonen]

I still can't believe prettier by default gives HTML void elements a closing slash. It also just can't handle long strings in a sane enough way.

[@alagunoff]

Thanks

[@xaiwnl]

That thumbnail like how you'd even manage to get the before bit 💀💀💀

[@chezchezchezchez]

Is there an add-on for VS 2022 proper?

[@hello_world_104]

Do u still need to install package if using vs code extension

[@hello_world_104]

Annnndd as i kept watching u answered this lol nvd

[@andreymatveyev3204]

how to get array values to show up on the new line

[@rickyrico80]

Log(a * b < 7 ? 'Ugly' : 'pretty') Ternaries all the way baby

[@Tony.Nguyen137]

How do i make it work for .handlebars file

[@michaelirwin7258]

I like and use prettier just because. I picked it up a few years back and never turned it off...

[@aznmayo]

it says the npm command is not found

[@Matrium0]

Prettier is nice for JS/TS code, but a catastrophe for any kind of markup (e.g. HTML), at least if you have lots of attributes (let's say because of accessibility) It prints every single attribute of an html element (for example) on a new line. This makes the arguments readable, but drops the readability of the overall structure of the document (which when reading HTML you are most likely MORE interested in) into oblivion. Prettier just forces you into one code-style, without even thinking for a second that there may be different requirements for styling of code (e.g. JS/TS) and markup (e.g. HTML). If you have to (heterogenous team with members all around the world using different IDEs) you can use it. But if you are in homogenous environment with direct contact to your colleagues you will 100% find a better solution for you

[@Benmadi_imed]

bro yr amaizing

[@MerrickKing]

My issue with prettier is that it's so opinionated and hard to configure. How about an ESLint tutorial? Including for TS

[@jabadnik]

Bs"D Hi Kyle! I'm building a Spotify's clone with Spotify for developers and your KZbin's video. There's a login button, when I touch it, it goes to the page that I am building now, and few seconds turns back to the page in the button's login.

[@seva.pechenin]

Standardjs has the better formatting rules and zero configuration. And the main thing that it is a standard which is mean that you can not change the standard of the rules it uses to format your code. In this way every developer you work with on some project has the same set of rules that formatter applies to make a cleanup in the project code. Thus you use the same solid standard of the code style which is setuped by default always.

[@coolemur976]

"Standardjs has the better formatting rules" - that is subjective, but nice try stating it as a fact. For example, standardjs removes dangling commas. And some devs might prefer dangling commas because when you rearrange items in arrays or objects using shortcuts, you don't have to worry about missing comma. And this is just one of the examples... So in this case, when team prefers this rule, Standartjs is instantly not an option. Eslint + prettier gives more freedom (even tho prettier is opinionated and might have some edge case problems itself with very specific projects).

[@zinner525]

And what do i do if prettier is doing garbage formatting like my second input line here : {errors && {errors}} . For some stupid reason it thinks that the second input line here is easier to read and formats it different than the rest. Been driving me crazy.

[@geniuskingsley6747]

Nice ❤

[@NITINKUMARSHAW-cc9nv]

Bro Will this work in trading BRO?

[@pallu83]

Can’t find anything to run prettier on save with IntelliJ 😢

[@aamhermansyah7859]

Please make ritch text editor or wysiwyg tutorial using Javascript 🙏

[@voidmind]

ESLint is a way better formatter, because it's flexible enough that you can customize it's formatting rules really easily. Please do yourself a favour when you start a new job: Make sure you don't install Prettier until you know if there are no other code formatting tools that your team has standardized on. Prettier can reformat a whole code base and mess up the git blame on each line of code changed due to automatic re-formatting. You will just aggravate all the other devs on the team.

[@AkhilPrasadYT]

Why don't you simply right click & press the format document option rather than making this so complicated or use the formatfiles extension.

[@DaveMadeIt]

Yes, I use that feature all the time. Why would I install prettier??

[@AndrewLapteff]

yeaehhhh!!!!!

[@davidmeissner5010]

Is that an American Jackson in the background?

[@mykalimba]

I tried the prettier extension in VS Code, but had to uninstall it. It was *too* opinionated for me, and there was no way to ease up on certain things in the settings. Prettier said "Take me as I am, or leave me!", and I said "Bye, Felicia!".

[@999hibuki]

thaksn

[@windar2390]

i actually like the standard formatter more

[@pomprocks]

Ideally each person could have their own prettier settings and see the code formatting the way they want to see it. Why don't we have that option yet?

[@nivethan_me]

umm then what will happen with version control? after i edit a file the whole file will be highlighted by git as changed i guess

[@sputnyq]

@@nivethan_me the file should be committed without the spaces and line breaks, i guess??

[@thalibmuhammad9519]

no, ideally .prettierrc are pushed to repo and prettier configuration are consensus of the repo maintainer, so every PR will not display unecessary formatting changes

[@ogreeni]

Absolutely not. Formatting should be consistent across the repo.

[@martinlutherkingjr.5582]

What a dumb idea

[@flamme8587]

Oh, Jetbrains' tools have it as default. You can perform the code reformat associated to a bind like the saving file or a key binding, configuring how it works for each type of file etc.. Prettier js can be good when using concurrency before building to production tho

[@irun_mon]

I don't like the way prettier formats my boostrap lines, i just use build in formater

[@jiegao3591]

_presses alt+shift+f in vscode_ _random stuff breaks_

[@_Ye______ah_]

how to unistall

[@glaciron]

Guys, can someone tell me, prettier in css does not work

[@risitas5874]

Doesn't the package-lock.json remove the need to save the exact version of the library?

[@RedStone576]

just use standard

[@chanmyaemaung]

👍

[@MJ-qe5lg]

Explain why you do not like semicolons and what that means in the feature

[@ultrasoundaudio7844]

First 😁