add support for prettier with jsx and tsx langs

[victororlyk]

it would be nice if helix would support prettier for jsx and tsx.

[kirawi]

Are you asking to add it to the default config, or asking for how to get prettier to work with Helix? If it's the latter: https://github.com/helix-editor/helix/wiki/External-binary-formatter-configuration

[victororlyk]

@kirawi I am little bit confused, I thought prettier is supported only for such languages flow|babel|babel-flow|babel-ts|typescript|acorn|espree|meriyah|css|less|scss|json|json5|json-stringify|graphql|markdown|mdx|vue|yaml|glimmer|html|angular|lwc

for example in deno there next langs available ts, tsx, js, jsx, md, json, jsonc i was hoping to have jsx/tsx in prettier list as well

[victororlyk]

with my config for languages prettier is not working

[[language]]
name = "rust"
[language.config]
checkOnSave = { command = "clippy" }

[[language]]
name = "html"
formatter = { command = 'prettier', args = ["--parser", "html"] }

[[language]]
name = "json"
formatter = { command = 'prettier', args = ["--parser", "json"] }

[[language]]
name = "css"
formatter = { command = 'prettier', args = ["--parser", "css"] }

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

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

[the-mikedavis]

Those configurations look ok to me. You should check the log file to see if lines are printed when you try to save, it may point out failures running prettier: https://github.com/helix-editor/helix/wiki/FAQ#access-the-log-file

It looks like prettier may use the typescript parser for tsx and jsx https://prettier.io/blog/2017/06/03/1.4.0.html

[victororlyk]

interesting but it doesn't produce anytthing related to prettier in the logs

2023-01-26T14:40:37.280 helix_view::editor [DEBUG] editor status: 'src/components/pages/Profile/components/Bar/Bar.tsx' written, 224L 6878B
2023-01-26T14:40:37.281 helix_view::document [DEBUG] id 2 modified - last saved: 1, current: 1
2023-01-26T14:40:40.956 helix_view::document [DEBUG] id 2 modified - last saved: 1, current: 1
2023-01-26T14:40:41.357 helix_term::application [DEBUG] received editor event: IdleTimer
2023-01-26T14:40:41.397 helix_view::document [DEBUG] id 2 modified - last saved: 1, current: 1
2023-01-26T14:40:41.551 helix_view::document [DEBUG] id 2 modified - last saved: 1, current: 1
2023-01-26T14:40:42.936 helix_view::document [DEBUG] id 2 modified - last saved: 1, current: 1

with next config it formats files

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

but I am not sure this is correct config
but with such config tsx file is all in errors

[the-mikedavis]

Also see #5689 and the updated https://github.com/helix-editor/helix/wiki/External-binary-formatter-configuration#prettier

TSX is configured as a separate language from typescript so you need to add an extra block for TSX in order to use prettier for TSX files:

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

Adding it to the typescript language config entry is problematic like you say because you will use the language server will think the TSX file is typescript instead.

[claytoncasey01]

Is there a way to get it to use my .prettierrc? I can't figure out where it's pulling the formatting from and it completely ignores any prettiter config files. I always do hx . in the root directory of my project but adding args = ["--config", "./.prettierrc"] and various other permutations of that doesn't seem to work either.

[krawitzzZ]

I have the same issue, prettier simply does not want to pick up my config from workspace... there is a way to find a config for a file according to pretiter docs, but it seems it's not yet possible to make use of this functionality in helix..

[krawitzzZ]

from what I found out so far I can assume, that the content of the file is getting passed to prettier via stdin, similar to this (if you'd do it in terminal)

cat MyComponent.tsx | prettier --stdin-filename file.tsx

and as long as you opened helix in a directory that contains prettier config file (or anywhere along the directory tree) it will pick up the config, but if the current directory does not contain config file, defaults are used..

In my case it does not work, because I am using npm workspaces, where root folder only contains package.json file and prettier configs are in dedicated frontend apps' folders.
it would have been nice if there were (just a random idea out of the blue) some env variables available that are provided by helix and could be used in configuration. e.g. if we are talking in context of language servers there could have been a variable that represent the directory where the file is located, then it would have been possible to workaround it like this

[[language]]
name = "tsx"
formatter = { command = "cd $FILE_LOCATION && prettier", args = [
  "--config-precedence",
  "prefer-file",
  "--stdin-filepath",
  "file.tsx",
] }

[AddictArts]

For anyone else finding this and might be on Windows. I had to add .cmd to the command. Example:

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

I am guessing that due to (Get-Command -commandType Application prettier).path returning 2 results, prettier.cmd and prettier which helix may be trying to run prettier.

[pix303]

i think --stdin-filename must be changed in --stdin-filepath

[Proful]

file.tsx is bit confusing.

[AddictArts]

file.tsx is bit confusing.

Which part? Windows fix? Update your local Languages.toml to get it setup.