using prettier with helix

[AugustinSorel]

Hello,

I am a beginner and I am trying to switch to helix, coming from vscode. I am trying to set prettier with helix but I can't find a lot ressources on the subject.

Any ideas how to set prettier on save with helix ?

[kirawi]

There is #2942 which will allow you to set a non-LSP formatter for the language.

[David-Else]

I was helped by @PiergiorgioZagaria on this thread: #2942 . I suggest you ask him, I was really only copy pasting what he told me, if it really doesn't work we need a fix before 22.08 comes out!

[PiergiorgioZagaria]

Have you tried

formatter = { command = "npx", args = ["prettier", "--parser", "typescript"] }

?

[AugustinSorel]

I got the same error when I use :format
Async job failed: Failed to spawn formatter npx: NotFound
I also tried:

formatter = { command = "npx prettier", args = ["--parser", "typescript"] }
formatter = { command = "npx prettier --write", args = ["--parser", "typescript"] }

[PiergiorgioZagaria]

Do you know where prettier is installed? Could you try using the full path like:

formatter = { command = "C:\Path\To\Prettier", args = ["--parser", "typescript"] }

[AugustinSorel]

Thank you. Really appreciate it. It's working amazingly well now :)
Here is what I have used:

[[language]]
name = "typescript"
formatter = { command = 'C:\Users\<name>\AppData\Roaming\npm\prettier.cmd', args = ["--parser", "typescript"] }

[David-Else]

It is working great on Linux with Prettier installed globally and (for example for TypeScript):

[[language]]
name = "typescript"
formatter = { command = 'prettier', args = ["--parser", "typescript"] }
auto-format = true

Has anyone tried the new:

https://prettier.io/blog/2022/06/14/2.7.0.html#cli
https://prettier.io/docs/en/cli.html#--cache

? I am wondering if it does anything when it is only a single buffer being formatted as in Helix?

• Does Helix keep on running the entire format again when saving even if nothing has changed? As it is async it would not be too annoying, but a waste of resources.
• Would the --cache option stop the unnecessary format happening (if it did happen in Helix), and which --cache-strategy?

[ghost]

If I were to use this and then run 'hx --health | more' would I expect to see prettier checked for typescript? That is what I am expecting to see but I do not.

[David-Else]

I made a WIKI article that covers Prettier: https://github.com/helix-editor/helix/wiki/External-binary-formatter-configuration

[janos-r]

Perfect! I was just looking for this!
Hope this makes it into the section
https://docs.helix-editor.com/master/languages.html
where most people are looking first for this probably.
Maybe just add there that prettier should be installed globally with for example sudo npm install -g prettier for us slower types lol.
I was also nicely surprised that it picks up the .prettierrc.json automatically by searching up the tree.
Very nice!

[David-Else]

@the-mikedavis I agree with @janos-r that the binary-formatter-configurations should live in the main docs, and also I think How-to-install-the-default-language-servers should move there too. I have been chasing language server contributors to update the language servers WIKI, it is pretty much good to go now.

They both need improving/re-writing, also they could have nice logos and attractive layout. Is that something you would be interested in me doing?

[the-mikedavis]

I would prefer those configuration docs in the Wiki - I think it's a better format for them since they're much easier to edit and don't get frozen with a release. We could link out to the wiki pages though so it's more visible that there's more documentation on these configurations

[IvanGoncharov]

I discovered a problem with prettier using different parsers based on filenames.
For example, package.json formatted with json-stringify but other *.json files formatted with json parser.
https://github.com/prettier/prettier/blob/2316e2fecd171335fc00f3ec97b7e46cc8964153/src/language-js/index.js#L81-L94

I reported it here: #3596

[dimas-cyriaco]

Anyone knows how to use a config file with prettier?

The command I run in the cli is npx prettier -c .prettierrc. This works fine and apply our custom rules.

I've tried to configure helix with this:

formatter = { command = 'npx', args = ["prettier", "-c", ".prettierrc"] }

But it's not using our local config. Looks like it's using the defaults.

It does not seems to be using prettier at all. I think it's using the lsp formatter... 😕

[dimas-cyriaco]

This worked:

formatter = { command = 'npx', args = ["prettier", "--config", ".prettierrc", "--parser", "typescript"] }

[wsw0108]

I write https://github.com/watertank/lsp-prettier with help of Copilot.

If you use Windows, you can try it.

setup, global or project

[language-server.lsp-prettier]
command = "lsp-prettier"
args = [ "--stdio" ]

[[language]]
name = "html"
# put lsp-prettier before other servers that also provide formatting function
language-servers = [ "lsp-prettier", "vscode-html-language-server", "emmet-lsp", "typos-lsp" ]