External binary formatter docs for Prettier sets up wrong formatter for TSX

[mazei513]

In the wiki for the prettier section, the configs are listed with using the --parser arg to let prettier know what kind of parser to use. However, when adding an additional config for TSX, I had set up

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

Looking through the Prettier docs there doesn't seem to be a TSX specific parser and the typescript parser worked well enough, except it formats the following wrongly.

const foo = <T,>(a: T): T => return a;
// becomes
const foo = <T>(a: T): T => return a;

The trailing comma, which is required for the generic function declaration, is removed. The fix was was to instead configure prettier with the --stdin-filename arg instead to let Prettier decide on a parser based on the file extension.

[[language]]
name = "html"
formatter = { command = 'prettier', args = ["--stdin-filename", "file.html"] }

[[language]]
name = "json"
formatter = { command = 'prettier', args = ["--stdin-filename", "file.json"] }

[[language]]
name = "css"
formatter = { command = 'prettier', args = ["--stdin-filename", "file.css"] }

[[language]]
name = "javascript"
formatter = { command = 'prettier', args = ["--stdin-filename", "file.js"] }
auto-format = true

[[language]]
name = "typescript"
formatter = { command = 'prettier', args = ["--stdin-filename", "file.ts"] }
auto-format = true

[[language]]
name = "tsx"
formatter = { command = 'prettier', args = ["--stdin-filename", "file.tsx"] }
auto-format = true

Would like to suggest the wiki page to be updated to this as it would avoid a hiccup for what I would think is a common usecase for web dev. The additional tsx configuration doesn't need to be included even, just having the wiki docs showing the use of --stdin-filename would help lead readers down a path that would avoid the above issue.

[mazei513]

I could make the change if maintainers agree.

[David-Else]

I was the person who made the Helix Prettier WIKI. I think the ["--stdin-filename", "file.tsx"] is a bit of a hack. The file file.tsx does not exist, so it is not the correct way to tell Prettier the file format.

My main concern is:

const foo = <T,>(a: T): T => return a;
// becomes
const foo = (a: T): T => return a;

So Prettier does not support .tsx and making the change you suggest would cause serious errors? formatter = { command = 'prettier', args = ["--stdin-filename", "file.tsx"] } is selecting the TypeScript parser incorrectly?

I am open to being convinced of your changes, but I don't see they are a good idea yet...

[mazei513]

Except they do specifically handle this case for TSX. I'm not sure what the proper way to achieve it is, but they do seem to have a TSX parser that is undocumented.

[mazei513]

Is there a way in the language configs to tell helix to pass the filename as an arg?

[David-Else]

Is there a way in the language configs to tell helix to pass the filename as an arg?

Not yet, there is a pull request I think.

I have changed the WIKI to add information about .tsx file formatting, what do you think? https://github.com/helix-editor/helix/wiki/External-binary-formatter-configuration#prettier

I had a quick search and nobody seems to be talking about .tsx and Prettier? Maybe you can find more info?

[the-mikedavis]

That note in the wiki looks good, thanks for updating it 👍

I'll close this in favor of the issue about exposing the filename for the formatter command: #3596

Until we have that, I think the current entries (--parser <language-name>) are preferrable for the other prettier languages in the Wiki