Very slow formatting with Prettier

[Nintron27]

Just messing around with setting up formatting on JavaScript/TypeScript files using Prettier. Currently my hack-y attempt is the following config:

[[language]]
name = "svelte"
indent = { tab-width = 4, unit = "\t" }
auto-format = true
roots = ["svelte.config.js"]
# formatter: the svelteserver LSP automatically uses prettier (I think)
language-servers = ["tailwindcss-ls", "svelteserver"]

[[language]]
name = "javascript"
indent = { tab-width = 4, unit = "\t" }
auto-format = true
formatter = { command = "npx", args = ["prettier", "--parser", "javascript"] }

[[language]]
name = "typescript"
indent = { tab-width = 4, unit = "\t" }
auto-format = true
formatter = { command = "npx", args = ["prettier", "--parser", "typescript"] }

When formatting JS/TS files it takes about 1-2 seconds to apply, which is exactly how long it takes to format using the cli command directly cat {FILE} | npx prettier --parser typescript, so I suspect it's my method of going about this. When saving any svelte file, and using that formatter, it's pretty much "instant", despite the fact that I think the svelteserver LSP uses prettier under the hood.

If anyone has any other suggestions on how to go about this better I'd greatly appreciate any help!

[alex-kim-dev]

I tried configuring prettier as a formatter and through efm-langserver, same delay. I wonder how vscode does it instantly and if we can recreate that in Helix.

Also would be nice to have the range formatting support #3209.

[gabydd]

Maybe try https://github.com/fsouza/prettierd instead

[alex-kim-dev]

Great advice, it works much faster with prettierd. I've set it up with efm-langserver. Although there's one catch - it spawns a new prettierd process for each project I've worked with, and these processes are never terminated fsouza/prettierd#645

[matzxrr]

Yea that is the problems with prettierd and eslintd, they run forever until you stop them. I just turned off auto format and only call format when I need to.

[David-Else]

Try Deno, it has a Rust clone of Prettier called dprint built in that is infinitely faster:

[[language]]
name = "javascript"
formatter = { command = 'deno', args = ["fmt", "-", "--ext", "js"] }
auto-format = true

[[language]]
name = "typescript"
formatter = { command = 'deno', args = ["fmt", "-", "--ext", "ts"] }
auto-format = true

Or just use dprint itself, but that seems more complex to setup: https://dprint.dev/install/, it even has a wrapper for Prettier that could do what you want: https://dprint.dev/plugins/prettier/

[alex-kim-dev]

Thanks for a suggestion. I couldn't get dprint to read configuration from .prettierrc / .editorconfig / prettier config package. Seems like it works only with dprint.json. I'm keeping prettierd for now.

[Rudxain]

If I understand correctly, this implies hx is doing this:

1. Dump buffer to file (on storage)
2. Make prettier load the file into its memory
3. prettier formats (in-memory)
4. prettier dumps its buffer into the file (on storage)
5. hx re-loads the file into its buffer

Instead of this:

1. Pass buffer to prettier (in-memory)
2. prettier formats (in-memory)
3. hx overwrites its own buffer with prettier's stdout (also in-memory)
4. Dump buffer to file

I'm using an NVMe SSD with write-caching, and the latency is still horrible

[David-Else]

Prettier 4 will be much faster, you can check it out now:

https://prettier.io/blog/2023/11/30/cli-deep-dive
https://github.com/prettier/prettier-cli