Prettier is uglier

01.md

Before:

  plugins: [
    "@typescript-eslint",
    "ember",
    "prettier",
  ],

After:

  plugins: ["@typescript-eslint", "ember", "prettier"],

Impression:

• Makes the code harder to skim with eyes;
• makes it impossible to select individual items with triple click;
• as a result, makes it hard to cut-and paste items;
• makes it impossible to rearrange items with IDE hotkeys (Alt+Up/Down in my case).

02.md

Before:

  const EmberApp              = require('ember-cli/lib/broccoli/ember-app');
  const fingerprintExtensions = require('broccoli-asset-rev/lib/default-options').extensions;

After:

  const EmberApp = require("ember-cli/lib/broccoli/ember-app");
  const fingerprintExtensions = require("broccoli-asset-rev/lib/default-options")
    .extensions;

Impression:

Weird formatting, ruins readability.

03.md

Before:

export type Model<T> = {
  [P in keyof T]:
    T[P] extends DS.Model & DS.PromiseObject<infer M>      ? ModelInstance<M> :
    T[P] extends DS.Model                                  ? ModelInstance<T[P]> :
    T[P] extends DS.PromiseManyArray<infer M>              ? Collection<M> :
    T[P] extends DS.Model[] & DS.PromiseManyArray<infer M> ? Collection<M> :
    T[P] extends DS.Model[]                                ? Collection<T[P]> :
    T[P] extends Date                                      ? Date | string :
                                                             T[P];
};

After:

export type Model<T> = {
  [P in keyof T]: T[P] extends DS.Model & DS.PromiseObject<infer M>
    ? ModelInstance<M>
    : T[P] extends DS.Model
    ? ModelInstance<T[P]>
    : T[P] extends DS.PromiseManyArray<infer M>
    ? Collection<M>
    : T[P] extends DS.Model[] & DS.PromiseManyArray<infer M>
    ? Collection<M>
    : T[P] extends DS.Model[]
    ? Collection<T[P]>
    : T[P] extends Date
    ? Date | string
    : T[P];
};

Impression:

A nested ternary was carefully formatted into a table layout. Conditions are in the left column, results are in the right column.

The "Prettier" varian is just plain ugly, making it much harder to look through available conditions.

04.md

Before:

export default class ProductWizard_Component extends GlimmerComponent<ProductWizard_Component_Args> {

After:

export default class ProductWizard_Component extends GlimmerComponent<
  ProductWizard_Component_Args
> {

Impression:

If a 80-character length limit is a must (it really shouldn't be!), this would be much more readable:

export default class ProductWizard_Component
  extends GlimmerComponent<ProductWizard_Component_Args>
{

But if you did that, prettier would still mess it up! 😡

05.md

Before:

const result =
  foo === "whatever line SHORTER than 80 characters"
  || (
    bar ===  "whatever line SHORTER than 80 characters"
    && baz === "whatever line SHORTER than 80 characters"
  )
  || bar !== "whatever line SHORTER than 80 characters";

After:

const result =
  foo === "whatever line SHORTER than 80 characters" ||
  (bar === "whatever line SHORTER than 80 characters" &&
    baz === "whatever line SHORTER than 80 characters") ||
  bar !== "whatever line SHORTER than 80 characters";

Impression:

This is an example of a complicated condition.

The "prettier" option is now much harder to comprehend because the important decision-makers || and && are moved to the end of lines!

And the closing paren is on the right too, it's now hard to distinguish groups.

06.md

Before:

const result =
  source
    .filter((foo) => bar.baz() || bar.quux === "zomg" || "whatever line longer than 80")
    .map((foo) => bar.baz() || bar.quux === "zomg" || "whatever line longer than 80")
    .length;

After:

const result = source
  .filter(
    foo => bar.baz() || bar.quux === "zomg" || "whatever line longer than 80"
  )
  .map(
    foo => bar.baz() || bar.quux === "zomg" || "whatever line longer than 80"
  ).length;

Impression:

A negligible gain in line shortness at the cost of numerous linebreaks.

.length is now merged with one of the conditions, making it harder to notice. Editing by selecting full lines (triple-click and drag) is now impossible because you would include .length.

---

All extra blank lines have been removed.

It is now impossible to visually group/separate logical blocks of code. All the code is now an uninterrupted sheet of text.

You have to pay extra mental effort to parse the code with your eyes in order to figure out where a block ends and another one starts.

07.md

Before:

const testCases = [
  { browser: 'Chrome',  version: 75,   headless: false, cookie: false, messageText: null },
  { browser: 'Chrome',  version: 74,   headless: false, cookie: false, messageText: null },
  { browser: 'Chrome',  version: 75,   headless: true,  cookie: false, messageText: null },
  { browser: 'Chrome',  version: 74,   headless: true,  cookie: false, messageText: null },
  { browser: 'Firefox', version: 68,   headless: false, cookie: false, messageText: null },
  { browser: 'Firefox', version: 67,   headless: false, cookie: false, messageText: null },
  { browser: 'Safari',  version: 12.1, headless: false, cookie: false, messageText: null },
  { browser: 'Safari',  version: 12,   headless: false, cookie: false, messageText: null },
];

After:

const testCases = [
  {
    browser: "Chrome",
    version: 75,
    headless: false,
    cookie: false,
    messageText: null
  },
  {
    browser: "Chrome",
    version: 74,
    headless: false,
    cookie: false,
    messageText: null
  },
  {
    browser: "Chrome",
    version: 75,
    headless: true,
    cookie: false,
    messageText: null
  },
  {
    browser: "Chrome",
    version: 74,
    headless: true,
    cookie: false,
    messageText: null
  },
  {
    browser: "Firefox",
    version: 68,
    headless: false,
    cookie: false,
    messageText: null
  },
  {
    browser: "Firefox",
    version: 67,
    headless: false,
    cookie: false,
    messageText: null
  },
  {
    browser: "Safari",
    version: 12.1,
    headless: false,
    cookie: false,
    messageText: null
  },
  {
    browser: "Safari",
    version: 12,
    headless: false,
    cookie: false,
    messageText: null
  }
];

Impression:

This is just plain ridiculous! Enjoy how much prettier it got!

08.md

Before:

    const optionValues =
      this.configurationModel
        .getAvailableOptionValues(option, this.state);

After:

    const optionValues = this.configurationModel.getAvailableOptionValues(
      option,
      this.state,
    );

Impression:

What is the gain here?!

This code just got LARGER both in line length and the number of lines.

It also became less readable, harder to skim through with eyes.

09.md

Before:

      LOG_RESOLVER:             process.env.WBC_DEBUG_LOG_RESOLVER             === 'true',
      LOG_ACTIVE_GENERATION:    process.env.WBC_DEBUG_LOG_ACTIVE_GENERATION    === 'true',
      LOG_TRANSITIONS:          process.env.WBC_DEBUG_LOG_TRANSITIONS          === 'true',
      LOG_TRANSITIONS_INTERNAL: process.env.WBC_DEBUG_LOG_TRANSITIONS_INTERNAL === 'true',
      LOG_VIEW_LOOKUPS:         process.env.WBC_DEBUG_LOG_VIEW_LOOKUPS         === 'true',

After:

      LOG_RESOLVER: process.env.WBC_DEBUG_LOG_RESOLVER === "true",
      LOG_ACTIVE_GENERATION:
        process.env.WBC_DEBUG_LOG_ACTIVE_GENERATION === "true",
      LOG_TRANSITIONS: process.env.WBC_DEBUG_LOG_TRANSITIONS === "true",
      LOG_TRANSITIONS_INTERNAL:
        process.env.WBC_DEBUG_LOG_TRANSITIONS_INTERNAL === "true",
      LOG_VIEW_LOOKUPS: process.env.WBC_DEBUG_LOG_VIEW_LOOKUPS === "true",

Impression:

So pretty!

10.md

Before:

  seed(server, 'ProductType', `
    | id | name         | code          |
    | 1  | "Model"      | "bedmodel"    |
    | 2  | "Headboard"  | "headboard"   |
  `);

After:

  seed(
    server,
    "ProductType",
    `
    | id | name         | code          |
    | 1  | "Model"      | "bedmodel"    |
    | 2  | "Headboard"  | "headboard"   |
  `,
  );

Impression:

Why, just why?!

The 80-char length limit has not been violated in the first place!

It's now twice as tall, and the opening and ending backticks are now on different indentation level.