Skip to content

Prettier makes code harder to read by removing line breaks. #12053

@braebo

Description

@braebo

Large files become harder to read when sections of code can't be separated by more than 1 empty line. Empty lines can be used to group related code, improving the organization and readablility of large codebases.

Even 1 empty line is removed sometimes, further degrading readability. This is harder to read:
$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
);

Than this:

$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
);

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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    lang:css/scss/lessIssues affecting CSS, Less or SCSSlocked-due-to-inactivityPlease open a new issue and fill out the template instead of commenting.

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions