Prettier makes your code shittier


As the whole idea of Prettier can fit in a tweet, my response could probably fit in a simple «I don’t like the way you solve a possibly nonexistent problem» too.

But since they become so popular, I decided to take apart a paragraph from Prettier’s homepage

By far the biggest reason for adopting Prettier is to stop all the on-going debates over styles. It is generally accepted that having a common style guide is valuable for a project and team but getting there is a very painful and unrewarding process

Well…

By far the biggest reason for adopting Prettier is to stop all the on-going debates over styles

That does sound reasonable, but we never fight for the right place for a new line. We do fight for optimal line-length and function vs =>, but Prettier doesn’t help you to solve any of these problems

having a common style guide is valuable for a project and team

Amen!

but getting there is a very painful and unrewarding process

It is, indeed! But let’s take a look at object shorthands. They look better and even easier to read. However, I do not follow this rule because TypeScript refactoring tool doesn’t work in that case. And I value the ability to rename object’s members way more than concise syntax. Same goes to default import/export, which we avoid. Thus, if you care about maintainability, you still have to have tslint, most likely with custom rules developed within your company.

It is painful to get there, but it’s not very painful for sure. And that is a really rewarding process, which pays you back immediately.

To me, Prettier does help you in places where you don’t care about code style and does not allow you to have a custom format in places where it matters, sometimes it reduces readability:

export const selectIsImmersiveLayout: StoreSelector<boolean> = () => false;

// prettier ↓

export const selectIsImmersiveLayout: StoreSelector<
  boolean
> = () => false;

sometimes, it propagates inconsistency and causes git conflicts by changing more than you intended to:

function foo(does, fit)
// single rename results in several lines changed ↓
function foo(
  doesnt,
  fit,
)

prevents you from manually formatting your code where it matters, say, complicated logic conditions:

if (
    A
    && B
    && (
        C
        ||
        D
    )
) {
// prettier ↓
if (A &&
    B &&
    (C || D)
//  or whatever mathes configured line length,
//  but not the format you put there

so why?