You're (Probably) Using Prettier Wrong

Prettier, ESLint, TSLint, Typescript...they're all a bit confusing. That's not an excuse for using them wrong.

S/O Ph4seOne for the awesome edit 🙏

[ofadiman]

Since I started watching Theo, he is constantly telling me "You are (probably) using XYZ wrong..." 🐞

[rafaelpoveda]

The biggest confusion that I’ve seen around this topic is when you include VSCode into the mix.
Is not always clear who’s formatting my code. The vscode extension formatting on save or my precommit hook.

[AwesomeAsh]

Theo I've only recently found your channel but man am I enamoured (by your content)! You make the best devs videos that aren't just "tutorial/intro to technology" where you gloss over "advanced" topics and only cover superficial and basic level concepts. You truly make videos that devs want to watch, covering a broad range of topics, making informed arguments, and overall just being a top tier dev (uploadthing). Looking forward to the rest of your great work.

[LetondAtreides]

These days we expect the tools to be intuitive.

They should just remove the styling functionality in eslint.

The reality is that it isn’t that most developers think they’re better than open source maintainers… It’s that they never think about the maintainers’ existence at all.

Opensource has always had an aspect of putting what you want to have out there, out in the world.

But you're doing it without an expectation that the users act like customers or fans.

[Holfter]

According to this guy I'm probably living my life wrong

[mjanos]

I think a good reason for having a prettier config is that it pins down all the defaults or whatever configs you like. That way if the prettier team changes their mind on what a given config value’s default should be, you can still stay witht the same formatting as you had before without creating a PR where 7000 files have changed.

[allhailalona]

So I entered the video, then liked and subscribed, all because of your mustache.

Later, after watching the video. I realize it's quite good.

[miguelsoldado]

Great video, only thing I don't agree with is not having a prettier config... If you share a repo with even a small team the likelihood that someone has changed their default prettier config is pretty high. I do believe the defaults are fine but setting them in a config so it overrides each team member personal config is the play for me

[AlexSpieslechner]

what do you think about import sorting with eslint?

[denzilv]

Great video and thanks for the explanation, Theo! 🤙

[DesolationPhoenix]

Hey Theo! Thanks for the video. How you you recommend configuring vscode settings to ensure that prettier runs first on save, then eslint afterwards?

[thimodev]

I agree both a linter and formatter have their own use cases. However with prettier I often find it to make the code unreadable when the printwidth is exceeded. I have now used eslint only for a few projects and the only thing I encounter is having to decide when to break a line of code into multiple lines. Adding full Prettier for that for me feels overkill

[jenewland]

While it would be a breaking change, I feel like ESLint would be doing themselves a big favour if they just removed the ability to have stylistic rules in ESLint altogether. They could have a non-breaking change that just adds a warning message to the output saying, please don't use eslint-plugin-prettier and link to that page you showed, or better yet this video.

[devagr]

Josh's talk is a must-watch for 99% of people working in typescript projects

[ValerianAndStuff]

I like using prettier + ESlint with most harsh rules and auto fix on save

+ auto reloading code

[Adam-ysgn]

I use eslint-plugin-prettier in my codebases, and it has always worked nicely for me. It's convenient being able to do an eslint autofix and have all the fixable lint issues and formatting errors taken care of with one command. I also like the fact that my formatting issues show up in my code through the eslint extension. Though, it's good to know that if my formatting ever becomes slow then this might be why.

[Mitsunee_]

the only thing I format with ESLint are my imports, because prettier doesn't care at all about some details I prefer and the plugin by trivago does weird stuff with the AST of prettier, so I'd rather use the ESLint plugin that is guaranteed to work better and basically does the same thing.

[FamilyGuyVids]

thanks for the tips. i'm finally setup with eslint and prettier CORRECTLY!

[NateLevin]

Same thing with the Tailwind ESLint plugin, which has formatting enabled by default for some reason. The worst part is that the third party ESLint plugin conflicts with the official Tailwind prettier plugin. Ugh!

[zhdky]

great info, thanks. mind making a video how you setup both working together in a project?