,

You Might Be Using Prettier Incorrectly

Posted by

You’re (Probably) Using Prettier Wrong

You’re (Probably) Using Prettier Wrong

If you’re a developer, chances are you’ve heard of Prettier. Prettier is a popular code formatter that helps you maintain consistent formatting in your codebase. However, many developers are not using Prettier to its full potential, which can lead to inefficiencies and inconsistencies in their code.

One common mistake that developers make is not configuring Prettier properly. Prettier allows you to customize various formatting options to suit your coding style. By not setting up these options, you may not be getting the full benefit of Prettier’s capabilities.

Another mistake is not integrating Prettier into your workflow. Prettier works best when it is integrated into your code editor or build system. This allows you to easily format your code with a single keystroke, making it a seamless part of your development process.

Furthermore, some developers only use Prettier on a file-by-file basis, rather than running it on their entire codebase. Running Prettier on your entire codebase ensures consistent formatting across all files, making your code easier to read and maintain.

In conclusion, if you’re not using Prettier to its full potential, you may be missing out on the many benefits it offers. By configuring Prettier properly, integrating it into your workflow, and running it on your entire codebase, you can ensure consistent and clean code that is easier to work with.

0 0 votes
Article Rating
38 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
@tamasmolnar4157
7 months ago

Hi Theo, 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.

@blue_name_warrior
7 months ago

Me configuring typescript, vue, vscode extensions, pinia, router, vite, (previously babel, webpack), tsx, dotenv, tailwind, playwright, vitest, eslint, prettier… It's good to hear the complexity of the last two things are necessary.
Joke. I used bun for several months.

@calebcruz151
7 months ago

Super helpful, thanks!

@PieterWigboldus
7 months ago

I was always expecting that Prettier just uses Eslint in the background, and in that case, it would be better to add prettier to Eslint.
But now i am confusing, and will dive into the prettier code to check how it really works.

@hckhanh
7 months ago

Personally, I am using both ESLint and Prettier as formatting tools. I think that's not too wrong with that. I am using eslint-plugin-perfectionist, it can cover what Prettier can't do

@AIZEN155
7 months ago

Aah come on , the docs says it's a formatter not a linter, that why people uses eslint with prettier

@carlotadias9335
7 months ago

Excelent explanation,

Thank you

@Argylleagen
7 months ago

0:00

@badumtsy
7 months ago

I grew to dislike prettier with passion. Just because some people can't grow up and organize themselves but spend ungodly amount of time picking "the right style" shouldn't hinder my ability to make my own decissions. The "opinionated" part is basically treating us like kids instead of adults and making deccissions for us. Prettier tries to solve several problems at once — format your code AND keep the codebase consistent, without wondering if it should. IMO for superior approach would be a future-reach, customizable, on-demand formatter on the IDE side, so that everyone can work in their preferred style, but opinionated and uniform formatter when pushing to remote to maintain diffs minimal and uniform. No more "bickering" about the code style — you get what you want in your IDE's but the repo is consistent at the same time. Ultimately the style doesn't matter for the semantics… The number of times Prettier made code easier to read was roughly equal to when it made it harder and annoying.

@Sindoku
7 months ago

My thoughts are if the linters don’t want you to style your code with them then they should just remove the stylist rules module from the linter. If you cut the head off the snake so speak, it can’t bite you. If you remove the ability to restyle, it can’t interfere with formatters.

@eldarshamukhamedov4521
7 months ago

There's nothing worse than having a linter tell you that your formatting is wrong. I don't want to know… I just want you to fix it. Formatting lint errors are PURE noise.

@7iomka
7 months ago

ESLint v8.53.0: Deprecation of formatting rules 🙂

@gingerbread2662
7 months ago

1:18 – eslint-config-prettier IS NOT AN ESLINT PLUGIN! It is a config. People are messing up those two things as well a lot

@DanielPVolpato
7 months ago

Agreed. But I think it's better to eslint first and the prettier it, in case eslint autofix will screw the formatting of the file.

@laurin__
7 months ago

Hey, beside the infomative i really like your open, fast talking way, I feel like I can relate well to your mind whatever xD , kinda wondering what iq you have 😮

@kingfisher7348
7 months ago

You looks like a guy from 1800-1900 century. I loved it.

@roberthead
7 months ago

Subscribing for the hair.

@DanielRios549
7 months ago

I use only ESLint for my project, the only problem I have is a bug on VSCode configuration, depending on the config, sometimes when I press CTRL + S it applies the lining and removes again if I press the shortcut again, and it keep applying and removing in a loop, it's a bit weird,, I think it's related to the config "editor.formatOnSave"

@zksumon847
7 months ago

🎉

@JoelHarkes
7 months ago

wouldn't it makes sense to have 1 tool you can either run to format or to lint?
If you could run eslint either with only fixing formatting or with doing linting i can imagen it can be just as fast on the formatting part?