I have some JS files which I want to format nicer with a CLI formatter tool like Prettier. I tried Prettier itself, but I was surprised to find that it doesn't add blank lines between function definitions. I think this would enhance visual structure significantly.
An example might clarify what I'm after. Given the input source code:
import {foo, bar} from "./myfoobar.js"
export var myfirstfunc = function (para) {
...
}
// mysecondfunc does wonderful things
export var mysecondfunc = function (more, para) {
...
}
I would like to see the following output code with blank lines:
import {foo, bar} from "./myfoobar.js"
export var myfirstfunc = function (para) {
...
}
// mysecondfunc does wonderful things
export var mysecondfunc = function (more, para) {
...
}
In my test Prettier doesn't do this. Is there a way to tell Prettier -- or another formatter -- to do this kind of visual structuring?
You can achieve something similar to this by using ESLint's padding-line-between-statements rule. Any sort of STATEMENT_TYPE (such as export, import, var) can be specified to require a blank line between it and another given STATEMENT_TYPE (or wildcard, to match anything).
The following config:
padding-line-between-statements: [
"error",
{ blankLine: "always", prev: "export", next: "*" },
{ blankLine: "always", prev: "import", next: "*" },
{ blankLine: "always", prev: "var", next: "*" },
]
results in automatically fixed code of:
import {foo, bar} from "./myfoobar.js"
export var myfirstfunc = function (para) {
}
// mysecondfunc does wonderful things
export var mysecondfunc = function (more, para) {
}
Any IDE that supports ESLint's auto-fixing (such as VSCode) should be able to implement this.
Feel free to tweak with the config settings objects to require spaces between different types of statements as desired.