prettier
prettier copied to clipboard
prettier
Prettier makes code harder to read.
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?
Also, if you ever create an issue in Prettier again, please follow the Issue Template.
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!
On JavaScript formatting, we can get the below output that is keeping line breaking.
Prettier 2.5.1 Playground link
--parser babel
Input:
const foo = {
/** prop1-3 **/
prop1: 3,
prop2: 3,
prop3: 3,
/** prop4-5 **/
prop4: 3,
prop5: 3,
/** prop6-8 **/
prop6: 3,
prop7: 3,
prop8: 3,
};
Output:
const foo = {
/** prop1-3 **/
prop1: 3,
prop2: 3,
prop3: 3,
/** prop4-5 **/
prop4: 3,
prop5: 3,
/** prop6-8 **/
prop6: 3,
prop7: 3,
prop8: 3,
};
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?
The answer is we should not create any plugins to fix this bug. We should fix it on Prettier side.
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.
Same question
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 (??)
@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
@FractalHQ did you find anything more on how one could make a plugin to make Prettier keep two empty lines? Or some other alternative? I would also like such a feature.
The problem is even deeper. For example, you might want to collapse multiple empty lines into a single empty line for JavaScript files; on the other hand, you might want to preserve consecutive empty lines in CSS files.
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.
@pedro-santos21 I pasted your example into Playgound and it preserved new lines for me:
Prettier 3.0.3 Playground link
--parser typescript
Input:
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;
}
}
Output:
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;
}
};
We are not adding new options for this. Also, since it is difficult to treat this issue as a problem for all languages that Prettier supports, we will treat it as an issue related to CSS.
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.