prettier: Prettier makes code harder to read by removing line breaks.

Ah yes, thanks! I don’t believe that addresses the issue though. Here are the important parts in bold:

Specifically, my inability to improve the organization and readability of large files by separating related groups of code using 2 (or more in rare cases) empty lines

Related:

• https://github.com/prettier/prettier-eslint/issues/176
• https://github.com/prettier/prettier/issues/554
• https://github.com/prettier/prettier/issues/4439
• https://github.com/prettier/prettier/issues/1610
• https://github.com/prettier/prettier/issues/3501
• https://github.com/prettier/prettier/issues/1613
• https://stackoverflow.com/questions/54413716/how-to-add-multiple-lines-between-code-blocks-with-prettier
• https://stackoverflow.com/questions/68708569/vscode-prettier-no-need-to-remove-blank-lines
• https://www.digitalocean.com/community/questions/prettier-custom-rules-formatter
• https://stackoverflow.com/questions/59309733/prettier-rule-no-multiple-empty-lines-not-working-in-react-js-project

I’ve been resisting the urge to make this issue for years in hopes that I was missing something, but at this point I am certain that I’m not. The 1-empty-line only rule significantly decreases code readability (depending on the context), inhibiting the speed of navigating large files with modular, related sections of code.

A config option to specify the max-empty-lines would obviously solve this problem that so many people have, but since the maintainers of this project refuse to add it, I would like to know how I can fix the problem without it.

@brodybits While this issue happened to mention the CSS bug, that is not the primary subject of this issue.

This issue is about the lack of a configuration option for allowing more than 1 empty line in a file, as clarified in my previous comment:

Specifically, my inability to improve the organization and readability of large files by separating related groups of code using 2 (or more in rare cases) empty lines

Related:

• Prettier does not respect the “no-multiple-empty-lines” rule of eslint prettier-eslint#176
• Suggestion: add option to retain blank lines #554
• Option Request: configurable empty multiple lines #4439
• 2 new lines after import #1610
• Keep the empty line at the beginning of a function, if present. #3501
• Readability: Preserve existence of two or less blank lines between code chunks. #1613
• https://stackoverflow.com/questions/54413716/how-to-add-multiple-lines-between-code-blocks-with-prettier
• https://stackoverflow.com/questions/68708569/vscode-prettier-no-need-to-remove-blank-lines
• https://www.digitalocean.com/community/questions/prettier-custom-rules-formatter
• https://stackoverflow.com/questions/59309733/prettier-rule-no-multiple-empty-lines-not-working-in-react-js-project

This is a bug according to the empty lines rationale.

Also, if you ever create an issue in Prettier again, please follow the Issue Template.

I’d like to request that you please restore the original title and close this issue as wont-fix instead of changing it into something it was never intended to be. We can make a new issue for the CSS bug.

The community support for this option has been widespread for years now. It’s a legitimate complaint, and for historical reasons, the support shown for this option would be best preserved with the original title.

As an aside, if anyone has advice towards a reasonable solution – whether it’s adding this option with a plugin or a fork – that would be greatly appreciated. I’m forced to use prettier (like many in this thread) due to it’s industry dominance and it would be a massive QOL improvement if I was able to preserve code readability in large codebases using empty lines without being forced to remove them against my will by a tool like prettier 😅

We’ll never add any options for this. But it is possible that it will be fixed.

Agreed

Before prettier:

export const startMongo = async () => {
    const dbConnection = <string>process.env.STAGE === 'PROD' ? <string>process.env.MONGODB_KEY_PROD : <string>process.env.MONGODB_KEY_DEV;
    try {
        await mongoose.connect(String(dbConnection), {useNewUrlParser: true, useUnifiedTopology: true});

        console.log("+ Connecting to MongoDB...");

        mongoose.connection.on('connected', () => {
            console.log('+ You are connected to MongoDB!');
        });
    } catch (error) {
        console.error('Error connecting to MongoDB:', error);
        throw error;
    }
}

After:

export const startMongo = async () => {
  const dbConnection =
    <string>process.env.STAGE === "PROD"
      ? <string>process.env.MONGODB_KEY_PROD
      : <string>process.env.MONGODB_KEY_DEV;
  try {
    await mongoose.connect(String(dbConnection), {
      useNewUrlParser: true,
      useUnifiedTopology: true,
    });
    console.log("+ Connecting to MongoDB...");
    mongoose.connection.on("connected", () => {
      console.log("+ You are connected to MongoDB!");
    });
  } catch (error) {
    console.error("Error connecting to MongoDB:", error);
    throw error;
  }
};

Which one do you guys think is more readable? Maybe I’m in the wrong here…

It really should preserve those newlines.

I think it would be awesome if someone could update both the title and description with some more info.

Title could read something like this:

Prettier removes blank lines from CSS

And add markdown from a playground, this for example:

Prettier 2.5.1 Playground link

--parser css

Input:

$colours: (
    /* Text */
    "text": $light-100,

    /* Background Colours */
    "background-primary": $dark-300,
    "background-secondary": $dark-200,
    "background-tertiary": $dark-100,

    /* Primary Colours */
    "primary": $blue-300,
    "primary-hover": $blue-400,

    /* Secondary Colours */
    "secondary": $blue-200,
    "secondary-hover": $blue-100,
    
    /* Misc */
    "green": $green,
    "red": $red
);

Output:

$colours: (
  /* Text */ "text": $light-100,
  /* Background Colours */ "background-primary": $dark-300,
  "background-secondary": $dark-200,
  "background-tertiary": $dark-100,
  /* Primary Colours */ "primary": $blue-300,
  "primary-hover": $blue-400,
  /* Secondary Colours */ "secondary": $blue-200,
  "secondary-hover": $blue-100,
  /* Misc */ "green": $green,
  "red": $red
);

Expected:

same as input (??)

Will do! Perhaps the SCSS example should get it’s own (properly named) issue?

My issue, however, applies to all languages. Specifically, my inability to improve the organization and readability of large files by separating related groups of code using 2 (or more in rare cases) empty lines.

My question specifically was:

If I can’t stop prettier from removing empty lines, how can I write a plugin or hook to prevent Prettier from making my code harder to read?

Any insight would be much appreciated!