Prettier Typescript + TSX

[mauscoelho]

Just a tip for people that are trying to use zed for a web project with Typescript and TSX. The docs show how to use it only with Javascript but you can easily add support for TS and TSX with these example:

    "language_overrides": {
        "TypeScript": {
            "format_on_save": {
                "external": {
                    "command": "prettier",
                    "arguments": [
                        "--stdin-filepath",
                        "{buffer_path}"
                    ]
                }
            }
        },
        "TSX": {
            "format_on_save": {
                "external": {
                    "command": "prettier",
                    "arguments": [
                        "--stdin-filepath",
                        "{buffer_path}"
                    ]
                }
            }
        }
    }

[spaceexperiment]

I added this as is but it didn't seem to work for me

[mauscoelho]

You need prettier installed as a global package

[spaceexperiment]

Thanks :)

[justinfriebel]

Does this pick up and use the .prettierrc in a project's root?

[spaceexperiment]

Seems to be the case for me!

[mauscoelho]

yeah for me also works fine

[justinfriebel]

Unfortunately I can't get it to work for me at all with the above settings and prettier installed globally ☹️

[mauscoelho]

Are you adding the formatter to the right file type?
The snippet above it's only for TypeScript and TSX

[renestalder]

Use the local prettier installation by pointing the command to the binary installed in the project.

{
  "language_overrides": {
    "TypeScript": {
      "format_on_save": {
        "external": {
          "command": "node_modules/.bin/prettier",
          "arguments": [
            "--stdin-filepath",
            "{buffer_path}"
          ]
        }
      }
    },
    "TSX": {
      "format_on_save": {
        "external": {
          "command": "node_modules/.bin/prettier",
          "arguments": [
            "--stdin-filepath",
            "{buffer_path}"
          ]
        }
      }
    }
  }
}

[mauscoelho]

Zed has prettier and eslint build in
The only thing I need on my settings is

"format_on_save": "on",

[renestalder]

Has it? I'm pretty sure it's using the formatting capabilities of the language server it connects to, and not prettier or eslint.

In any case, the configuration I mentioned is using the versions in the project, which is at least what we want in our team projects.

[mauscoelho]

Indeed, when utilizing the built-in feature on Zed, it exclusively displays ESLint issues without incorporating ESLint formatting. The formatting is exclusively handled by Prettier.

As per the suggested approach, it is recommended to rely solely on Prettier for formatting, utilizing ESLint solely for identifying and presenting issues. This is particularly beneficial as ESLint's formatting can be relatively slow.

However, if your preference is to format with ESLint, your current settings are configured correctly.

[silvenon]

"format_on_save": "on",

Hmm, while this does exist, it doesn't respect local .prettierignore unfortunately, and the documentation leads me to believe that it's up to us to configure our own formatting command, so I'm a little confused whether to file an issue to respect local ignore files or to configure a command in my projct's config that isn't tied to a language (so I don't have to repeat it), something like this:

"format_on_save": {
  "external": {
    "command": "npx",
    "arguments": [
      "prettier",
      "--ignore-unknown",
      "--stdin-filepath",
      "{buffer_path}"
    ]
  }
}

[Chanzhaoyu]

thanks bro

[renestalder]

On a note: This is now in the official documentation.

https://zed.dev/docs/languages/javascript

[onx2]

FWIW TS/TSX/Prettier/ESLint worked for me out of the box in the most recent version of Zed.

[nmhungdev]

Hey, @onx2! I'd love to see your setup. Could you share it with us?

[onx2]

My setting.json is basically empty now that this all works out of the box but I do have a task set up for running Vitest instead of Jest in my test files:

~/.config/zed/tasks.json

{
  "label": "Run Vitest",
  "command": "bun run vitest run",
  "args": ["\"$ZED_RELATIVE_FILE\" -t=\"$ZED_SYMBOL\""],
  "tags": ["tsx-test", "ts-test"]
}